Colorbox和ajax,发送和接收数据

时间:2015-03-11 14:25:20

标签: javascript jquery ajax colorbox bootstrap-modal

我有一个网站需要查询数据库,查看colorbox中的结果(或者bootstrap模式也可以工作),从结果中选择数据,然后将这些选择发送回主页以填充引导文本区域。

这是我到目前为止所拥有的。

html:表单提交到colorbox

<div class="form-group col-sm-4">
    <button type="button" id="pairsub" class="btn-sm-primary form-control"
     data-toggle="modal" data-target="#pairFind" onclick="submitForm">Pair Find</button>
</div>

colorbox JS:

 $(document).ready(function(){
     $("#pairsub").click(function (){
         $.post("pairfind.php",
              $("#form1").serialize(),
              function(data){
                 $.fn.colorbox({
                 html: data,
                 open: true,
                 iframe: false,
                 width: "500",
                 height: "500px",
                });
              },
             "html");
          });
      });

html textarea接收选定的数据:

<div class="form-group col-md-8">
     <textara class="form-control" name="IID" id="IID2">/textarea>
</div>

提交表单并让彩盒工作完美。现在,&#34;提交&#34;带有colorbox结果的按钮通过php echos发回信息并刷新主页。我想将所选数据发送回主页而无需刷新。想法?

1 个答案:

答案 0 :(得分:0)

所以我放弃了彩盒以及何时使用纯粹的自举。这段代码就像一个魅力。

$(document).ready(function() {   
       $('#formbtn').click(function(e) {
            $.ajax({
                url: 'pairFind.php',
                type: 'POST',
                data: $('#form1').serialize(),
                async:true,
          beforeSend: function () {
             $('#spin').modal('show');
             }
          success: function(data) {
             $('#pairFr .modal-body').html(data);
             $('#pairFr').modal('show');
             $('#spin').modal('hide');
             }
        });
    });  
});
相关问题