Question

我希望首先在<div id="ajax-content-container">中加载图像加载器，然后使用ajax在同一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>

Answer 1

如何做到这一点，你不需要在change内包装一个ajax_courses()函数，只需将其准备就绪，当调用onchange函数时，加载器图像将被添加到ajax-content-container当ajax请求完成后，ajax-content-container div将在容器中包含所需内容。

注意确保您的加载图片路径正确，否则图片将无法显示

<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>

其他方式我建议将加载图片放在带有display:none的ajax-content-container div中，当onchange发生$(".loading_image").show()时ajax完成{} loading_image存在使用$(".loading_image").hide()

希望它可以帮到你

Ajax加载图像在ajax内容加载之前没有显示;图像和内容加载在同一个div

1 个答案: