Диалог Jquery: отправка формы - PullRequest
2 голосов
/ 15 апреля 2011


Я пытаюсь сделать форму поиска, используя диалог jquery.Пожалуйста, смотрите полную программу ниже.У меня на компьютере запущен сервер, и http://localhost/search. есть несколько сомнений

  1. Что-то не так с вызовом ajax, поскольку я получаю сообщение об ошибке.Я попытался получить запрос, а также.
  2. В chrome тип запроса на сервере - POST, но в Iceweasel (Firefox) - это ОПЦИИ
  3. В Iceweasel (Firefox) модальное окно остается открытым и отображает ошибку.Но в Google Chrome модальное окно закрывается.Это может быть связано 2
  4. что-то не так с кодом JavaScript ниже.Я не специалист по JS.

большое спасибо,
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>

1 Ответ

2 голосов
/ 15 апреля 2011

Возможно, вам это нужно.

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

РЕДАКТИРОВАТЬ:

С этим, вы добавляете свой диалог в форму, что позволяет postBack

вы можете добавитьэто в событии Open.

Попробуйте использовать json в качестве dataType, jSon - удивительный инструмент с ajax =)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...