Initiate JSF ajax form using JavaScript programmatically

My aim is to execute a JSF managed bean method from within a JavaScript function.

Here is the function:

var fbLogin = function() {
                FB.login( 
                    function(response) {
                        if (response.authResponse) {
                            var access_token =   FB.getAuthResponse()['accessToken'];
                            console.log(access_token);
                            //document.getElementById("hiddenFbForm:hiddenFbToken").value = access_token;
                            //document.getElementById("hiddenFbForm:hiddenFbLoginSubmit").onclick();
                        } else {
                            console.log("ERROR");
                        }
                    }, 
                    {scope:'email'}
                );
            };

I had the idea of using a hidden JSF ajax form, populating a hidden field and then clicking on submit commandlink:

<h:form id="hiddenFbForm">
            <h:inputHidden id="hiddenFbToken" value="#{loginController.fbToken}" />
            <h:commandLink id="hiddenFbLoginSubmit" actionListener="#{loginController.printFbInfo()}" />
        </h:form>

Unfortunately, this approach does not seem to work. The page reloads, and my printFbInfo server-side method is never triggered.

Do you have any better suggestions for invoking a JSF server-side bean from a JavaScript function programmatically without requiring user interaction?

Also, I prefer the call to be AJAX-based without causing a page refresh.

Answer №1

Consider modifying the Action listener method by removing braces.
Instead of #{loginController.printFbInfo()}, try using #{loginController.printFbInfo}.

Utilizing Primefaces in your project allows you to employ Primefaces RemoteCommand (p:remoteCommand) for this purpose.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When you try to upload an image using php/ajax, it causes the page to refresh

I'm currently experiencing an issue with my script. I am successfully using formData() to upload an image via Ajax, which is being saved to the designated folder. However, I am puzzled as to why my page keeps refreshing after move_uploaded_file() is e ...

The affix feature in Bootstrap's navbar fails to recognize the height of images

My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist. The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets ...

Interactive search tool with multiple fields using HTML and JavaScript

I need help developing a search box for structured data, where I want to implement two types of typeahead searches: one for fields and another for values within those fields. The image below illustrates what I am aiming for. https://i.sstatic.net/MRsJ2.png ...

Error message: When using the Semantic UI React Modal, the Portal.render() function requires a valid React element to be returned, otherwise

Currently, I am working on integrating the Semantic UI React modal into my dashboard application built using React. To facilitate this integration, I have developed a ModalManager component that will be utilized in conjunction with Redux to handle the stat ...

What is causing the failure in retrieving the smallest number from this array?

The maximum value should be 9.99, and the minimum value should be 6.88 let arr = [["2019","00","01", 9.99], ["2018","00","01", 9.32], ["2017","00","01", 6.88]] let max = Math.max(Number(...arr.map((o) => { return o[3] }))); //9.99 let min = Math.mi ...

Implementing Pagination for Ajax Search in Laravel

After reviewing both this GitHub Gist and how to implement AJAX pagination with Laravel on Stack Overflow, I am still encountering a unique issue. In summary: When conducting a search, the initial page loads data successfully using AJAX without refreshing ...

Tips for using jQuery dropdown menus

I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue. My objective is to have a dropdown animate down w ...

Unleash the full power of Angular Components by enhancing them with injected

I am facing a challenge with handling the destruction event of an Angular component in my external module that provides a decorating function. I've run into issues trying to override the ngOnDestroy() method when it includes references to injected ser ...

Passing data between components in Vue.js

I am currently in the process of creating an application using Laravel and Vue. I have a navbar set up, which currently looks like this: <template> <nav class="navbar"> <p>{{msg}}</p> </nav> </template> And I am im ...

What is the best way to iterate over JSON data and organize the output based on the key value?

Let's say I want to filter through the JSON data below and only push the home_team_conference if it matches Southeastern. My goal is to organize the data by home_team_conference in order to display each array on different pages of my website. Currentl ...

Double scroll event firing in Internet Explorer due to Jquery

Here's the code snippet I've implemented that triggers an ajax call when a div reaches the bottom as part of an auto-dynamic scroll feature. This ajax call fetches the next set of items from the list. $("#gvContacts").scroll(function(){ va ...

Add an array into an object using $set (properties remain unchanged)

I have an object with the following structure: obj: { 1: { 'a': [ [] ], 'b': [ [] ] } } Now, I am attempting to append 'c' => [ [] ] to this object in a watcher. My first attempt was using this.obj[1][&apo ...

The inner workings of v8's fast object storage method

After exploring the answer to whether v8 rehashes when an object grows, I am intrigued by how v8 manages to store "fast" objects. According to the response: Fast mode for property access is significantly faster, but it requires knowledge of the object&ap ...

Prevent iframe loading from occurring

I am currently working with an iframe where I upload files, but I am facing a challenge. How can I stop the loading process in the middle of it? I attempted to modify the src using a jQuery function attr(), however, it was not effective. Removing the entir ...

Setting the rotation position in JQuery prior to initiating the animation

Perhaps I could phrase my query differently as How can I rotate an image in JQuery from a starting position other than 0 degrees. I am attempting to animate the rotation of an image from -50deg to 0deg. However, regardless of what I do, JQuery seems to al ...

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

The datepicker is refusing to update the date format

I've been attempting to adjust the date format for my datepicker, but it refuses to change. Below is the code I'm using: $(document).ready(function() { $('#dateselect').datepicker({ format: 'dd/mm/yyyy', o ...

What is the best way to present these values with spaces in between each word?

When I use console.log(JSON.stringify(selected["1"]?.others)), the output is: ["Cars","Books","Necklaces"] On the screen, however, when displaying this data, all the words appear together without spaces. It looks li ...

Unable to use href attribute as intended

HTML: <a id="Switch">Click here to switch</a> <a href="image1_large.png" class="mainA blade"> <img id="mainImage" src="image1.png"/></a> Javascript: <script> $(function() { $('#Switch').click(functio ...

Invoke a functional component when a button is clicked in a React application

I have a functional component that includes a button. My goal is to trigger another functional component when this button is clicked. Upon clicking the Submit button, the Preview button appears. When the user clicks on the preview button, it should call t ...