0

ajaxを使用<div id="ajax-content-container">してデータコンテンツが同じdivに表示される前に、最初に画像ローダーをロードしたいと思います。<div id="ajax-content-container">ただし、画像ローダーは表示されず、最初に画像ローダーをロードせずにコンテンツが直接表示されました。beforeSend の下に return false を配置すると、reverse が表示され、ロードが停止しませんでした。

  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").show()ajax$(".loading_image").hide()

それがあなたを助けることを願っています

于 2013-06-26T05:38:31.843 に答える