0

我想先加载一个图像加载器，然后再使用 ajax<div id="ajax-content-container">在同一个 div 中显示数据内容。<div id="ajax-content-container">但是，图像加载器甚至没有显示出来，内容直接显示而无需先加载图像加载器。如果我在 beforeSend 下放置 return false，它会显示反向并且负载没有停止。

  beforeSend: function(){
  $('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax-
  loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" />');
    return false;
}`

如何完成这项工作？这是我的代码。谢谢您的帮助。

看法：

<?php if (!isset($ajax_req)): ?>
<div class="row">

 <div class="span3"> <?php echo
 form_dropdown('courses',$dropdown,$selected_value,'id="select_id"');?> </div>
 <div class="span3"> <?php echo 
 form_dropdown('schedule',$dropdown_sched,$date_value,'id="date_option"');?> </div>
 <div class="span2"> <?php echo 
 form_dropdown('status',$dropdown_status,$status_value,'id="status_id"');?></div>


 </div>
 <?php endif; ?>

<div id="ajax-content-container">

<table class="table table-bordered table-condensed table-striped table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Phone Number</th>
<th>Status</th>

</tr>
<?php foreach ($student_list as $key=>$value): ?>
  <tr>
    <td><?php echo $value->first_name; ?></td>
    <td><?php echo $value->last_name; ?></td>
    <td><?php echo $value->email; ?></td>
    <td><?php echo $value->phone_no; ?></td>
    <td><?php echo $value->status; ?></td>
  </tr>
<?php endforeach; ?>

 </table>
 </div>

javascript:

<script type="text/javascript">

$(document).ready(function () {
ajax_courses();
ajax_sched();
ajax_status();

 });

function ajax_courses() {

$('#select_id').change(function () {
var course_id = $("#select_id").val();
var postData = {'course_id':course_id};
var timeout;

$.ajax({
  url: "<?php echo base_url(); ?>/ajax_student_controller/get_ajax_course_student/",
  async: false,
  type: "POST",
  data: postData,
  dataType: "html",
  beforeSend: function(){
  $('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax- 
  loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" 
  />');

  },
  success: function(data) {
    $('#ajax-content-container').html(data);

  },

  })
  });

  }

 </script>
4

1 回答 1

0

怎么样，你不需要在change里面包装一个函数，ajax_courses()只要把它准备好，当onchange函数被调用时，加载器图像将被添加到ajax-content-container，当ajax请求完成时， ajax-content-containerdiv 将在容器中具有所需的内容。

注意确保您的加载图像路径正确，否则图像将不会显示

<script type="text/javascript">

$(document).ready(function () {
//ajax_courses();
ajax_sched();
ajax_status();   

$('#select_id').change(function () {
$('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax-loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" />');
var course_id = $("#select_id").val();
var postData = {'course_id':course_id};
var timeout;

$.ajax({
  url: "<?php echo base_url(); ?>/ajax_student_controller/get_ajax_course_student/",
  async: false,
  type: "POST",
  data: postData,
  dataType: "html",
  success: function(data) {
  setTimeout(function(){
  $('#ajax-content-container').html(data);    
  },3000); // 3 seconds delay

  },

  });//end ajax
  }); // end onchange

  });//end ready

 </script>

其他方式我建议将加载图像放在 ajax-content-container div 中，display:none并在完成时onchange使用，然后如果 loading_image 存在使用$(".loading_image").show()ajax$(".loading_image").hide()

希望对你有帮助

于 2013-06-26T05:38:31.843 回答