JQuery/Ajax - 使用.replaceWith或.html數據庫調用後在頁面中加載新數據？

我很好奇如何讓我的AJAX/JQuery使用新的數據庫信息更新頁面。JQuery/Ajax - 使用.replaceWith或.html數據庫調用後在頁面中加載新數據？

研究現有的問題表明，這些職位可能會有所幫助：

jQuery AJAX calls to database work, but not in order

與這些建議一致，我創建了處理與AJAX發送的數據的PHP函數。在成功，我fadeOut舊的HTML，並replaceWith新的HTML。

問題是，在第一次單擊DOM元素時，數據庫中的新數據不會顯示，但它會在第二次點擊時顯示。我也在第二次點擊時收到不需要的頁面刷新。

你可以看到一個活生生的例子（我的婚禮網站）： http://bucketlingerwedding.com/80s-music-reception/

如果試投了，它不工作的第一次，和作品第二次（除了頁面重新加載）。

我的另一個問題是我不知道cache是否應該設置爲'false'或者簡單地省略。部分問題可能是我用replaceWith加載的新HTML（我也試過.html（））對每個錶行都有相同的類和ID。我很好奇，如果我試圖替換單個行而不是整個表，並給它一個新的ID和類名，那麼JQUERY/AJAX會在數據庫的新信息中淡入新行嗎？

這裏是我使用的AJAX代碼（部分基於以上職位）：

$(document).ready(function(){ 
//JQuery for the submission of a new list item. 
    $('input.[class$="-arrow"]').click(function(e){ 
     e.preventDefault(); //put e in function. 
     var ajaxurl = '<?php echo the_permalink(); ?>'; 
     if ($(this).hasClass('up-arrow')) { 
      var arrowdirection = 'up'; 
      var entry = $(this).val(); 
     } 
     else if ($(this).hasClass('down-arrow')) { 
      var arrowdirection = 'down'; 
      var entry = $(this).val(); 
     } 
     var rowid = '.line-items-rows' + '#' + entry; 
     var data = { 
      action: 'cb_lud_arrow_action', 
      arrow: arrowdirection, 
      entryID: entry 
     }; 
     $.ajax ({ 
      cache: false, 
      type: 'POST', 
      url: ajaxurl, 
      data: data, 
      success: function(data){ 
       newtable = '<?php 
       $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_); 
       include_once "table-up-down.php"; 
       echo $cb_lud_new_output; 
       ?>'; 
       $('#cb_lud_table').fadeOut('fast', function(){ 
        $(this).replaceWith(newtable).hide(); 
        newtable.fadeIn('fast'); 
       }); 
       } 
     }); 
}); 
});

注：我已經證實，貼有AJAX的數據的確更新數據庫表，所以。 PHP文件和ajax POST方法至少可以正常工作。

我基本上需要的是事件的時間順序是：

用戶投票最多（點擊）在表中的一行。
將數據發送到MySQL數據庫，在正確的列中添加投票。
成功後，函數將確定數據庫中的新值並生成新的html。
舊數據淡出，新數據淡入。
大家都很高興。

它沒有多大關係，我如果這更是一個JQuery的解決方案（如把正確的順序的影響，或使用.delay（）函數），以上的AJAX解決方案，其中的我根據數據的成功發佈設置回調函數，或者與緩存相關的東西。只是想讓它工作。請幫忙。

來源

2012-06-20 ChrisBuck

使用瀏覽器控制檯查看拋出的錯誤。 newtable只是一個字符串，因此您不能將其用作jQuery對象來調用jQuery方法。這會在控制檯中引發錯誤，並使您可以輕鬆地在代碼中進行調整。

看在什麼下列輸出源視圖：

newtable = '<?php 
      $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_); 
      include_once "table-up-down.php"; 
      echo $cb_lud_new_output; 
      ?>';

你可能不需要任何字符串，它是一個完整的重建HTML字符串表的，但因爲整個頁面也是在HTML中返回它是完全重複的，你可以簡單地抓住HTML版本本身，並完全刪除以上。

更改爲：

 success: function(data){ 
      /* convert whole page returned to jquery and get inner html of the table*/ 
      var newRows=$(data).find('#cb_lud_table').html() 
      $('#cb_lud_table').fadeOut('fast', function(){ 
       /* insert new rows*/ 
       $(this).html(newRows).fadeIn('fast'); 

      }); 
      }

一旦你得到的工作，你也可能需要重新審視自己的點擊處理程序如何連接（我沒有看過）。刪除舊的html也會刪除附加的任何事件。使用on()委託給表，現在將是一個permaennt資產，將彌補更改html

來源

2012-06-20 04:03:49 charlietfl

感謝您的回答。我將通過建議的解決方案並接受一個答案。 – ChrisBuck

太棒了！此解決方案在第一次點擊後完美運行。請參閱http://bucketlingerwedding.com/80s-music-reception/。它會在第二次點擊後刷新頁面，我想我可以用on（）來彌補，就像你提到的那樣。不完全確定如何做到這一點，但它應該是一個更簡單的問題。感謝您的詳細解答和有效的代碼。 – ChrisBuck

你也會注意到，由於不重複表格的html，頁面的來源大大減少了。 table元素不再被替換，只有內部行，所以你可以委託'on（）'到你的點擊處理程序的表格元素，因爲表格現在是一個永久性的資源 – charlietfl

您已經在變量上使用了fadeIn函數。所以它會拋出一個錯誤newtable.fadeIn不是一個函數。你不能在變量上使用fadeIn函數。將id或類名稱提供給fadeIn函數。

來源

2012-06-20 04:03:22 muthu

感謝您的答案。我將通過建議的解決方案並接受一個答案。 – ChrisBuck

JQuery/Ajax - 使用.replaceWith或.html數據庫調用後在頁面中加載新數據？

回答

相關問題