Jquery dialog : Form submission_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-24 22:59 出处：网络

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

Something is wrong with the ajax call, as I get an error message. I tried GET request as well.
In chrome, the request type at server is POST , but in Iceweasel (Firefox) it is OPTIONS
In Iceweasel (Firefox), the modal window stays open, and displays error. But in google chrome, the modal window closes. This may be related 2
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>

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 =)

Jquery dialog : Form submission

精彩评论

关注公众号

热门标签

图文推荐

Jquery dialog : Form submission

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：