CODEWITHSUNDEEP
javascriptjqueryjquery-ui
bsr
bsr

Reputation: 58662

Jquery dialog : Form submission


I am trying to do a search form using jquery dialog. Please see the complete program below. I do have a server running in my pc, and http://localhost/search. there are few doubts

  1. Something is wrong with the ajax call, as I get an error message. I tried GET request as well.
  2. In chrome, the request type at server is POST , but in Iceweasel (Firefox) it is OPTIONS
  3. In Iceweasel (Firefox), the modal window stays open, and displays error. But in google chrome, the modal window closes. This may be related 2
  4. anything wrong with javascript code below. I am not an expert on JS.

thank you very much,
bsr.

 <html><head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    </head>
    <body>

      <input id="myButton" name="myButton" value="Click Me" type="button" />

      <div id="myDiv" style="display:none">    
        <form id="myform">
          <input name="q" placeholder="Search ..">
        </form>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 

      <script type="text/javascript"> 
            jQuery(document).ready( function(){       
                jQuery("#myButton").click( showDialog );
                  $myWindow = jQuery('#myDiv');
                  $myWindow.dialog({ width: 400, autoOpen:false, title:'Hello World',
                          overlay: { opacity: 0.5, background: 'black'},
                          buttons: {
                  "Submit Form": function() {  $('form#myform').submit();},
                  "Cancel": function() {$(this).dialog("close");}
                    }
                          });
                  });

        var showDialog = function() {
            $myWindow.show(); 
            $myWindow.dialog("open");
            }
        var closeDialog = function() {
            $myWindow.dialog("close");
        }

        var successFn = function (response) {        
                $("#myform").parent().html('').html(response);
                }
        var errorFn =  function (xhr, ajaxOptions, thrownError){
                        $("#myform").parent().html('').html(xhr.statusText);
                        }

        $('form#myform').submit(function(){
          $.ajax({
            type: 'post',
            dataType: 'html',
            url: '/search',
            async: false,
            data: $("#myform").serialize(),
            success: successFn,
            error: errorFn
          });
        });    

      </script>
    </body></html>

Upvotes: 2

Views: 5875

Answers (1)

Michel Ayres
Michel Ayres

Reputation: 5985

You probably need this.

// include modal into form
$(this).parent().appendTo($("form:first"));

EDIT:

With this, you add your dialog into the form, making it possible to postBack

you can add this in the Open event.

Try use json as dataType, jSon is an amazing tool with ajax =)

Upvotes: 2

Related Questions