ajax – Twitter Bootstrap模式表单提交

发布时间：2020-12-16 02:55:25 所属栏目：百科来源：网络整理

导读：我是Twitter Bootstrap的初学者,我正在尝试从一个模式框处理一个表单,它也加载了Ajax.问题是我不知道如何使用它.我在谷歌搜索了几个小时,但我找不到一个很好的例子. 我之前使用过jquery ui,我想它可能几乎一样. 我想知道以下内容：如何加载包含Ajax表单的文

我是Twitter Bootstrap的初学者,我正在尝试从一个模式框处理一个表单,它也加载了Ajax.问题是我不知道如何使用它.我在谷歌搜索了几个小时,但我找不到一个很好的例子.

我之前使用过jquery ui,我想它可能几乎一样.
我想知道以下内容：

>如何加载包含Ajax表单的文件
>在加载表单之后简单地使用选择器(例如$(‘#item’);)是否有效,以获取在表单中键入的值
>如何绑定模式的“提交”按钮以通过Ajax将表单发送到另一个文件

我将非常感谢您的帮助,我可以提供以下表格样本：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Submit a link</h3>
    </div>
    <div class="modal-body">
    <div id="msgholder1"></div>
    <div id="msg-loader"></div>
    <form action="../ajax/controller.php" data-async data-target="#msgholder1" id="add-link-form" method="POST">
    <table id="theform">
    <tr>
    <td>URL:</td>
    <td><input type="text" name="url" size="45" class="text ui-widget-content ui-corner-all" id="url" /></td>
    </tr>
    <tr>
    <td>Quality:</td>
    <td><select name="quality" id="quality">
          <option value="0">Pick One ...</option>
          <option value="1">CAM</option>
          <option value="2">TS</option>
          <option value="3">DVD</option>
    </select><br />
    </td>
    </tr>
    <tr>
    </fieldset>
    </form>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>

任何类型的相关文档也很有用.

谢谢！

解决方法

经过几个小时的研究和解决,我得到了以下工作Ajax Modal脚本：

<script type="text/javascript">
$(document).ready(function() {
  $('#addlink').on('click',function(event) {
    var href = SITEURL + '/modules/movies/addlink.tpl.php?movie_id=<?php echo $movie->id; ?>';
    $.get(href,function(response) {
      $('.modal').html(response);
      $('.modal').modal({keyboard:true});
      $('button#submit_link').bind('click',function()
        {
        $('.modal-body').html('<p>Loading ...</p>');
        $.ajax({
                    type: 'post',url: SITEURL + "/ajax/controller.php",data: 'action=report_link',dataType : 'html',context: $(this),success: function (msg) {
                        $(".modal-body").html(msg);
                    }
                });
        });
    });
    event.preventDefault();
  });
});
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!