pendig bootstrap模式单击以加载远程数据

时间:2015-12-14 17:01:46

标签: javascript jquery ajax twitter-bootstrap

我有这个代码用于使用jquery ajax将动态数据从远程文件加载到引导程序中:

JS:

$(function(){

   $('.push').click(function(){
      var essay_id = $(this).attr('id');
        $.ajax({
        type : 'post',
        url : 'your_url.php', // in here you should put your query 
        data :  'post_id='+ essay_id, // here you pass your id via ajax .
                     // in php you should use $_POST['post_id'] to get this value 
       success : function(r)
           {
              // now you can show output in your modal 
              $('#mymodal').show();  // put your modal id 
             $('.something').show().html(r);
           }
    });
 });
});

HTML:

<a href="#" id="1" class="push">click</a> 

<div class="modal-body">  
   <div class="something" style="display:none;">
     // here you can show your output dynamically 
   </div>
</div>

这对我有用但是模态框不会显示,直到/挂起数据加载。我需要在点击后加载模态框,然后加载数据。

如何解决这个问题?!

1 个答案:

答案 0 :(得分:0)

您可以在加载时在点击事件之外进行ajax调用,并在点击时显示隐藏:

$(document).ready(function() {

var essay_id = $(this).attr('id'); 
var results;

$.ajax({ 
      type : 'post', 
      url :  'your_url.php',
      async: false
      'post_id='+ essay_id, 
      success : function(r) { 
          results = r;
      } 
 });

$(' your_element').click(function() {
      if (results) {
          $('#mymodal').show(); 
          $('.something').show().html(results); 
      } 
 });
 });

使用 async:false 会强制它在继续执行脚本之前完成您的请求。希望这可以帮助。