Ajax – How to use JSF(Primefaces) ajax Listener

ajaxjsfprimefaces

I am having problem in using the ajax tag of the listener to invoke a method in the managed bean. The following code does not work. Although the ajax is invoking the JavaScript method view.show(), it does not invoke the managedbean method in the listener property.

<p:dataTable id="dataTable" var="customersFeedback"
  value="#{customersFeedbackController.allReadFeedbacks}"  
  widgetVar="reservationTable"
  selectionMode="single" 
  selection="#{customersFeedbackController.customersFeedback}" 
  rowKey="#{customersFeedback.id}">

   <p:ajax event="rowSelect" update=":viewFeedbackForm:viewDlg" listener="#
     {customersFeedbackController.setMessageAsRead()}" oncomplete="view.show()"/>
</p:dataTable>

Here is my managedbean. The update method is simply a method to update the CustomerFeedback object in the database.

@ManagedBean(name = "customersFeedbackController")
public class CustomersFeedbackController implements Controller<CustomersFeedback> {

    private CustomersFeedback customersFeedback = new CustomersFeedback();
    // other fields here

    @Override
    public void update() {
        customersFeedbackDao.update(customersFeedback);
    }

    public void setMessageAsRead() {
        customersFeedback.setStatus("Read");
        this.update();
        System.out.println("Method Executed"); // Just a test
    }

    // Other methods here

}

am I doing something wrong? If there is, feel free to correct me. Thanks.

Best Solution

I observed that in your code for ajax you used

listener="#
     {customersFeedbackController.setMessageAsRead()}"

instead of this use following code:

listener="#
     {customersFeedbackController.setMessageAsRead}"

brackets are not needed to call function from backing bean.

also add SelectEvent to your backing bean method. like: public void setMessageAsRead(SelectEvent event){}

refer: http://www.primefaces.org/showcase/ui/ajaxifyAction.jsf

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Best Solution

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

Javascript – How to upload files asynchronously with jQuery

Related Question