在现有页面上创建对话框，php-ajax 查询成功，jquery mobile答案

【问题标题】：Create dialog over existing page, php-ajax query success, jquery mobile在现有页面上创建对话框，php-ajax 查询成功，jquery mobile
【发布时间】：2014-05-22 20:43:16
【问题描述】：

我的网站具有“动态”内容，“静态”导航按钮在点击时仅替换特定 div 内容。

我成功地将我的 php/ajax 结果返回到一个对话框中，但我无法理解如何在当前页面上创建此对话框。

我当前代码的结果是整个“search.html”被这个新页面替换，这会打开一个对话框（这几乎是我想要的）。这会导致新页面背景为白色，结果显示在顶部的对话框中。

（这一切都发生在我的 'index.php' 的一个 div 中）

我想要做的是将我的初始页面放在对话框中。

我已经尝试在 javascript 中创建一个“对话”对象，因为一些研究表明可能有效，然后在其上调用 .dialog('open')。这导致了“打开不是函数”错误（释义）。

进一步的研究表明，JQM 对话框与 JQ UI 对话框不同。这就是我被难住的地方，然后尝试了我现在的“解决方案”。

我的“search.html”（加载在我的索引页面内的 div 中）：

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
  <!-- Removed class="main" -->
     <div  data-role="content" id="main">
        <div id="holder">
           <h1>Search</h1>
           <div data-role="fieldcontain" id="center">
              <form name="searchForm" id="searchForm" onsubmit="return false;">
                 <div id="term">
                    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" data-mini="true">

                          <input type="radio" name="termChoice" id="term1" value="1"/>
                             <label for="term1">Term 1</label>
                          <input type="radio" name="termChoice" id="term2" value="2" />
                             <label for="term2">Term 2</label>
                          <input type="radio" name="termChoice" id="term3" value="3" />
                             <label for="term3">Term 3</label>
                          <input type="radio" name="termChoice" id="term4" value="4" />
                             <label for="term4">Term 4</label>
                        </fieldset>
                 </div>                                                    
                 <p/>
                 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">                           
                    <select id="courseSelect" name="courseSelect">
                       <option value="null">Select Course</option>
                    </select> 
                 </fieldset>
                 <p />
                 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                          <input type="radio" name="type" value="lec" id="lec"/>
                             <label for="lec">Lecture</label>
                          <input type="radio" name="type" value="lab" id="lab">
                             <label for="lab">Lab</label>
                          <input type="radio" name="type" value="*" id="both" checked="checked">
                             <label for="both">Both</label>
                 </fieldset>
                 <input type="range" name="numberSlider" id="numberSlider" value="0" min="0" max="35" />
                 <p/>
                 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                    <input type="submit" value="Go">
                 </fieldset>
              </form>
            </div>
            <p style="font-size:9px"><i>Note: Zero ('0') on slider indicates *All* lab/lecture numbers.</i></p>
        </div>
     </div>

  <script src="./scripts/searchGo.js"></script>
  <script src="./scripts/dynamicSelect.js" />
  </body>
  </html>

我的“searchGo.js”：

  $(document).ready(function() {    
      $("#searchForm").submit(function(e)
         {
           e.preventDefault();

           var term = document.forms["searchForm"]["termChoice"].value;

           if(term==null || term=="")
           {
              alert("Select Term and Course.");
              return false;
           } else {         
              var formData = $("#searchForm").serialize();
              var trimmedFormData = $.trim(formData);

           $.ajax({
               type: "POST",
               url: "./scripts/search_result.php",
               data: trimmedFormData,
               success: function(data){
                 $("#main").html(data).dialog().trigger('create');       
                 $(this).enhanceWithin();
               }
           });
        }
     });
  });

我意识到 $(document).ready(function() {});不能在 jQuery Mobile 中使用。虽然不正确，但该网站运行正常，我很确定这与我当前尝试解决的问题无关。

由于我正在加载整个 .html/.php 文件 inside 我的“index.php”中的一个 div，因此在我的 search_result.php 中使用“div data-role="page"”（ ajax 成功后加载）没有影响。

非常感谢任何建议或意见。

我是 AJAX、jQuery/jQuery Mobile 的新手，不知道如何获得我想要的结果。

我想要的只是将“search_result.php”（“数据”）加载到一个对话框中，该对话框会打开我的“search.html”页面的 on-top...

对不起所有的代码/长篇文章。

干杯...

【问题讨论】：

你为什么不使用一个大的弹出窗口？你会得到同样的东西，你甚至可以将不透明度设置为弹出覆盖 div，让它看起来更像真正的对话框。另一件事是，不推荐使用对话框，因此最好使用此弹出解决方案。如果这是您需要的东西，我将为您创建一个工作示例。
感谢好问题，人们通常不知道如何发布好问题。
类似这样的：jsfiddle.net/Gajotres/45V7G/1 我是从我的旧示例中创建的，只需单击添加弹出窗口。 Popup 可以像经典的 jQuery Mobile 页面一样包含所有内容，包括页眉和页脚
太棒了。快速浏览一下你的例子，我相信我可以让它按照我的需要工作。救生员！ =P（将尝试并在成功实施后添加“答案”）
Np，但我明天醒来时会这样做。

标签： javascript php html ajax jquery-mobile

【解决方案1】：

对于遇到同样问题的任何人，这里有一个解决方案：

按照@Gajotres 的建议和示例，我的代码如下所示。

它正在达到我想要的结果；出现在当前页面上的弹出窗口，其中包含从 PHP 查询中检索到的“数据”。

我的新“searchGo.js”：

  $(document).ready(function() {  

      $("#searchForm").submit(function(e)
         {
           e.preventDefault();

           var term = document.forms["searchForm"]["termChoice"].value;

           var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();

           if(term==null || term=="")
           {
              alert("Select Term and Course.");
              return false;
           } else {         
              var formData = $("#searchForm").serialize();
              var trimmedFormData = $.trim(formData);

           $.ajax({
               type: "POST",
               url: "./scripts/search_result.php",
               data: trimmedFormData,
               success: function(data){
                 var popup = $("<div/>", {
                    "data-role": "popup",
                    "class" : "ui-content"
                }).css({
                    "width": $(window).width()*0.6,
                    "height": $(window).height()*0.6
                }).append(closeBtn).append(data);

                // Append it to active page
                $(".ui-page-active").append(popup);

                // Create it and add listener to delete it once it's closed
                // open it
                $("[data-role=popup]").on("popupafterclose", function () {
                    $(this).remove();
                }).on("popupafteropen", function () {
                    $(this).popup("reposition", {
                        "positionTo": "window"
                    });
                }).popup({
                    dismissible : false,
                    theme : "b",
                    overlayTheme : "b",
                    transition : "pop"
                }).enhanceWithin().popup("open");    
               }
           });
        }
     });
  });

这基本上创建了一个弹出窗口和一个关闭按钮，然后将关闭按钮附加到弹出窗口，将 php-request 数据附加到弹出窗口，并将弹出窗口附加到当前活动页面（根据我的理解）。

【讨论】：