0

さまざまなセクションを含む html ページがあります (DIV タグを介して達成されます)。これらのセクションは、ajax 呼び出しを使用して作成/更新されます。div の 1 つは実際にはプログレス インジケーターです。バックグラウンドでリクエストを処理していることをユーザーに伝える画像を表示するだけです。

私の問題は、各クリック イベント ハンドラの最初の数行のコードにこのセクションを表示するコードがあるにもかかわらず、要求されたときにこの進行状況インジケータが常に表示されるとは限らないことです。(そして、各ボタンクリックの最後に、divを非表示にします)

ここに私のコードの基本的なスケルトンがあります:

 <div class="row-fluid">        
  <div class="span12">

      <h2>Title for Page></h2>
          <table class="table table-bordered table-striped"  id="assignedRecords">
          <thead>
              <tr>                  
                  <th>ID</th>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Voice</th>
                  <th>Jumbo</th>
                  <th>Mode</th>
                  <th>&nbsp;</th>
              </tr>
          </thead>
          <tbody>

              <?php foreach ($databaserecords as $record): ?>
                  <tr>          
                                        ...  code to create initial table
                                        <td><button class='btn deleteBtn'>Delete</button></td>
                </tr>
              <?php endforeach ?>

          </tbody>
          </table>

          <div id="progress-indicator">
                 <img src="<?php echo base_url();?>assets/img/wip.gif"> Retrieving records...</img>
          </div>    

          <button class="btn" id="getlist">Get List of Available Objects</button>
  </div>

  <div class="span12" id="availableObjectsAjaxContainer"></div> 
  <!--this is updated via ajax when the user clicks on the modify button. -->

 </div>   


  <script>

   $(document).ready(function(){

    //hide the please wait div by default.
    $('#progress-indicator').hide();


            $('#getlist').live('click', function()  {


                    $('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> Retrieving...</img>");
                    $('#progress-indicator').fadeIn();      
                    .
                   // updates availableObjectsAjaxContainer section
                    .
                    .

    $('#deleteRecord').live('click', function()  {

                $('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> deleting record...</img>");
                $('#progress-indicator').fadeIn();      
                .
                .
                // updates assignedRecords table section
                .

「getlist」ボタンをクリックすると表示されます。ただし、「deleteRecord」ボタンをクリックすると表示されません。私のajax呼び出しが進行状況インジケーターを持つdivを誤って「一掃」しないようにしました。私のajax呼び出しは、「assignedRecords」テーブルセクションと「availableObjectsAjaxContainer」セクションのみを更新します。

どこが間違っているのか教えてもらえますか?

ありがとう。

編集1

deleteRecord クリック イベント ハンドラ関数の本格的なバージョンは次のようになります。

  $('.deleteBtn').live('click', function()  {
                $('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> deleting vlan...</img>");
                $('#progress-indicator').fadeIn();          
                //get a count of all records. only allowed to delete if you have more than one record.

                var reccount = $('#assignedRecords tbody tr').length;

                if (reccount > 1)
                {

                        var userSelectionId  = $(this).parent().siblings('.id').text(); 
                        var modeDelete = $(this).parent().siblings('.mode').text();


                        var fullpath = BASEPATH + 'index.php/switches/delete/' + userSelectionId + '/' + modeDelete;
                        console.log(fullpath);
                        $.ajax({
                                url:fullpath,
                                type:'POST',
                                dataType:'json',
                                success: function(returnDataFromController) {

                                                console.log(returnDataFromController);
                                                //build table contents 
                                                var htmlstring = '<thead>';  
                                                htmlstring = htmlstring + '<tr>';
                                                htmlstring = htmlstring + '<th>Id</th>';
                                                htmlstring = htmlstring + '<th>Name</th>';
                                                htmlstring = htmlstring + '<th>Status</th>';
                                                htmlstring = htmlstring + '<th>Voice</th>';
                                                htmlstring = htmlstring + '<th>Jumbo</th>';
                                                htmlstring = htmlstring + '<th>Mode</th>';
                                                htmlstring = htmlstring + '<th>&nbsp;</th>';
                                                htmlstring = htmlstring + '</tr>';
                                                htmlstring = htmlstring + '</thead>';
                                                htmlstring = htmlstring + '<tbody>';

                                                //loop through results from ajax call and build table.  
                                                for(i = 0; i < returnDataFromController.length; i++) {
                                                      //alert(returnDataFromController[i].Id);
                                                      htmlstring = htmlstring + "<tr>"
                                                      htmlstring = htmlstring + "<td class ='recordid'>" + returnDataFromController[i].Id + "</td>";
                                                      htmlstring = htmlstring + "<td>" + returnDataFromController[i].Name + "</td>";
                                                      htmlstring = htmlstring + "<td>" + returnDataFromController[i].Status + "</td>";
                                                      htmlstring = htmlstring + "<td>" + returnDataFromController[i].Voice +"</td>";
                                                      htmlstring = htmlstring + "<td>" + returnDataFromController[i].Jumbo + "</td>";
                                                      htmlstring = htmlstring + "<td class='mode'>" + returnDataFromController[i].Mode +"</td>";
                                                      htmlstring = htmlstring + "<td><button class='btn deleteBtn'>Delete</button></td>";
                                                      htmlstring = htmlstring + "</tr>";    

                                                }//end loop

                                               htmlstring = htmlstring + "</tbody>";
                                               htmlstring = htmlstring + "</table>";

                                             $('#assignedRecords').html(htmlstring);
                                  }//end success ajax call

                        });//end ajax.                                               
                }
                else
                {   
                    alert("Must have at least one record!");
                }
                $('#progress-indicator').hide();

  }); //end click event 

編集2:

    $('#getList').click(function()  {

            $(this).attr("disabled","disabled");
            $('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> Retrieving ...</img>");
            $('#progress-indicator').fadeIn();
            $.ajax({
              url:"<?php echo site_url('switches/showavailrecs/'.$ip.'/'.$hardwaremodel);?>",
              type:'POST',
              dataType:'json',
              success: function(returnDataFromController) {

                  var htmlstring;


                  htmlstring = htmlstring + "<th>Id</th><th>Name</th>";

                  //loop through results
                  for(i = 0; i < returnDataFromController.length; i++) {
                          //alert(returnDataFromController[i].Id);
                          htmlstring = htmlstring +  "<tr><td><a href=>"+returnDataFromController[i].Id+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>"; 

                  }


                  $('#availableObjectsAjaxContainer').html(htmlstring);

                  $('#progress-indicator').hide();
                 }//end success
              }); //end ajax call
              $(this).removeAttr("disabled");
    });

編集3:

何が起こっているのか理解できたと思いますが、なぜそうなっているのかはわかりません。

すべての .hide コマンドを ajax 呼び出しの成功セクション内に配置するように移動しました...そして今...それらは機能しているようです。なぜこれが当てはまるのか、誰でも説明できますか?

4

1 に答える 1

0

それがあなたの問題に関連しているかどうかはわかりませんが、ID は一意である必要があり、#deleteRecordオブジェクトごとに 1 つの要素があります。

コードを次のように変更する必要があります。

<td><button class='btn delete'>Delete</button></td>

...

$('.delete').live('click', function()  {

編集:最後に非常に明白です(最新の編集に基づいて):進行状況インジケーターを表示し、フェードインし始めたときにすぐに非表示にしていました...

于 2012-10-01T15:33:27.837 に答える