Tarun Sapra
Tarun Sapra

Reputation: 1901

jQuery form Submit not working in JSF?

I have a JSf form, I am tryin' to use jQuery Ui dialog plugin to submit the form. here's the code snippet.

function confirmSubmit() {
          $('#dialog').dialog('open');
          return false;
      }

    $('#dialog').dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        buttons : {
            "Submit Form" : function() {
                 document.myForm.submit();
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        }
    });
<h:form id="myForm"> 
<h:commandLink action="#{Bean.search}" type="submit" onclick="return confirmSubmit()"   id="search" styleClass="buttonSearch">
                 </h:commandLink>    

The "document.myForm.submit();" part in the dialog box isn't working i.e., no calls goes to the server and in the server console I see the error:

11:45:32,738 SEVERE [lifecycle] JSF1054: (Phase ID: RENDER_RESPONSE 6, View ID: /PRT01/IMCM0101.jsp) Exception thrown during phase execution: javax.faces.event.PhaseEvent[source=com.sun.faces.lifecycle.LifecycleImpl@ec333b]

The dialog box is appearing correctly but once i press the submit button "document.myForm.submit();" code is executed and the form is NOT submitted instead the above described error comes on the server console.

Upvotes: 2

Views: 3500

Answers (2)

Tarun Sapra
Tarun Sapra

Reputation: 1901

It's done, some JSF parameters were missing. which jsf adds during form submissiom, I added them using jQuery:

$("a[id$='search']").click(function() {
    var input = $("<input>").attr("type", "hidden").attr("name",   "myForm:search").val("myForm:search");
    $('#myForm').append($(input));
    $("p#dialog-email").html(titleVar);
    $('#dialog').dialog('open');
});

Upvotes: 0

Jigar Joshi
Jigar Joshi

Reputation: 240890

as you return false; it won't submit actually.

To make dialog working

    $(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen : false,
                            width : 400,
                            modal : true,
                            resizable : false,
                            buttons : {
                              "Submit Form" : function() {
                                       document.myForm.submit();
                               },
                               "Cancel" : function() {
                                       $(this).dialog("close");
                                }
                           }
                });


});

and then just call

 function confirmSubmit() {
      $dialog.dialog('open');
      return false;
  }

Upvotes: 3

Related Questions