Question

我有一个位于模态中的表单。模态来自找到的here插件。我通过AJAX调用以此形式提交数据，然后在成功处理数据后，我的主页上的DIV在AJAX成功部分内刷新。

这是我的模态＆amp;表格代码：

<!--- Link to open the modal to add a new dasboard link --->
     <div id="DashboardLinks" style="display:none;">
     <h3>Add a new dashboard link:</h3>
     <form id="add_dashboard_links">
        <table width="100%" id="dashboard_table" border="0" cellpadding="5">

          <tr>
            <td colspan="3"></td>
            </tr>
          <tr>
            <td>Link Description:</td>
            <td colspan="2"><input type="text" name="link_description" id="link_description" required="yes" message="Please enter the Link Description"/></td>
            </tr>
          <tr>
            <td>Link URL:</td>
            <td colspan="2"><input type="text" name="link_url" id="link_url" required="yes" validate="url" message="Please enter the Link URL with http:// -or- https://"/></td>
            </tr>
          <tr>
            <td>Link Notes:</td>
            <td colspan="2"><textarea id="notes" name="notes" cols="" rows="">&nbsp;</textarea></td>
          </tr>
          <tr>
            <td colspan="3"><input type="submit" name="button" id="button" value="Add Link" />
        <input type="hidden" name="link_hidden" value="1"><br />
            <div class="loader"><img class="loading-image" src="images/loading.gif" /></div>
            <div class="response" id="addNoteResponse"></div>
        </td>
            </tr>
        </table>
        </form>
        </div>

问题是，在我的AJAX代码完成后，它会按预期更新DIV，但会使模态自动消失，但我的浏览器窗口仍然具有不透明度覆盖。如果我然后单击浏览器窗口中的任何位置，则不透明度会消失。但我仍然希望模态可见，以便用户可以选择以实际方式关闭它或提交更多数据。

如果删除此代码，模态插件将正常运行。

$("##noteDiv").load( 'templates/dashboard_notes.cfm?techID=#techID#' );

有什么想法吗？

这是我完整的AJAX代码：

<!---Script to add dashboard link --->     
        <cfoutput>
        <script>
        $(function(){
        //Add a new note to a link
        $("##add_dashboard_links").submit(function(){
           // prevent native form submission here
                $.ajax({
                    type: "POST",
                    data: $('##add_dashboard_links').serialize(),
                    url: "actionpages/add_dashboard_link.cfm",
                    beforeSend: function(){
                        $('.loader').show();
                    },
                    complete: function(){
                         $('.loader').hide(3000);
                    },
                    success: function() {
                        $("##noteDiv").load( 'templates/dashboard_notes.cfm?techID=#techID#' );
                        $("##addNoteResponse").html('');
                        $("##link_description").val('');
                        $("##link_url").val('');
                        $("##notes").val('');
                        $("##addNoteResponse").append( "Link successfully added." );
                      }    
                });
                return false;           
            });
        });
      </script>
      </cfoutput>

Answer 1

通过与此插件的开发人员合作，我能够找到解决此问题的方法：https://github.com/kylefox/jquery-modal/issues/89

调用AJAX成功时，模态插件似乎会中断

1 个答案: