2016-08-14 53 views
0

我正在使用AJAX調用來刪除和正在工作的項目,我遇到的問題是更新div內的數據表以反映從數據庫刪除項目。在AJAX調用後使用JQuery更新div

+0

你必須將命令發送到PHP。一旦PHP收到它,它將執行該命令。 Php會處理這個命令,並提出所需的值或錯誤。這將作爲對您的JavaScript的迴應發回。然後你可以更新。 –

+0

我從我的AJAX調用中得到響應就好了,這不是問題$('#dataTable')。load('includes/datatable.php');沒有更新div ...我希望在ajax回調函數成功返回後,刷新div(我的數據表#dataTable)的內容。 –

+0

我會使用hyml()而不是.load() –

回答

0

所以這裏的答案很簡單:

if(itemdel=="deleted") 
{ 
    console.log("get request to datatable"); 
    //add the absolute url here so with http://xyz.xy/includes/datatable.php 
    $.get('includes/datatable.php', function(data) { 
     console.log("data received, data"); 
     $('#dataTable').html(data); 
    }); 
} 
+0

簡短的答案不更新任何內部的div ...我會繼續努力,謝謝你。 –

+0

你爲什麼這麼想?它是一個ajax請求到datatable.php頁面,在回調中你會收到數據和.html方法,你可以將它寫在DOM上的div上 [Jquery Doc](https://api.jquery.com /jquery.get/) –

+0

我的意思是它沒有做什麼後,我單擊刪除,我的ajax調用從MySQL數據庫中刪除記錄,回調函數回來'刪除',但您的代碼不會更新div #dataTable。 –

0

這裏的 「長個」 試着瞭解:)

var delID = document.getElementById('delID').value; 

$('#so-delete').on('click', deleteData); // execute the deleteData function on click // without()!!! when you put() it will be executed @init 

function deleteData() { 
    apiCall("includes/deletesoitem.php", "POST", loadData, delID); // makes the request --> loadData function executed after ajax call is successfully finished 
} 

function loadData(itemdel) { 
    if (itemdel == "deleted") { 
     alert("SUCCESS: Item Deleted Successfully!"); 
    // the "anonymous "callBack" function will be executed after ajax request is finished 
     apiCall("includes/datatable.php", "GET", function (msg) { 
      $('#dataTable').html(msg); 
     }); 
    } 
} 

/** 
* 
* @param url Request for the URL 
* @param ajaxMethod Request Method (POST/GET/ETC) 
* @param callBack Callback method this method will be executed after  ajax request is successful 
* @param data Request body data 
*/ 
function apiCall(url, ajaxMethod, callBack, data) { 
    var requestData = (data != "undefined") ? data : {}; // set request data to data if exists 

    var request = $.ajax({ 
     url: url, 
     method: ajaxMethod, 
     data: requestData, 
     dataType: "text" 
    }); 

    request.done(function (msg) { 
     //execute the callback function 
     callBack(msg); 
    }); 

    request.fail(function (jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 
}