如何使用事件處理程序創建5個JQuery AJAX調用？

我開發我的學校/工作場所登記制度，以及教師需要對學生的全面列表落入誰5個單獨的類別：如何使用事件處理程序創建5個JQuery AJAX調用？

未曾謀面，也沒有註冊abscence
有不謀面，但註冊後abscence上午8點
未曾謀面，但註冊後abscence上午8點
見過，但註冊的原因abscence上午8點
有上午8點

作爲第一個（沒有見過，也沒有註冊）將加載3個數據庫的學生數據進行檢查，得到的數據可能需要一些時間。我想通過PHP加載所有的數據，直到所有的東西都加載完畢，然後顯示一個白色的屏幕，而不是加載頁面，然後使用JQuery AJAX函數獲取數據。

的AJAX加載和使用此代碼展示工程：

//Not met and not registered 
div1 = $("#not-met-not-registered"); 
    div1.find(".text").html("<img src='' class='loader'>"); 
    $.post("/admin_post/getusers", {area:"not-met-not-registered"}, function(data) { 
     div1.find(".text").html(data); 

     div1.find("tr").each(function (row) { 
      datatable1.push({ 
       "Row": $(this), 
       "Navn": $(this).find("td.navn").html() 
      }); 
     }); 
    });

然而，這隻能作爲我staticly輸入DIV值，並保存在5名不同的名字在div值（DIV1，DIV2等）。

要收到的數據，我有5個格看起來像這樣：

<div id="not-met-not-registered" class="list"> 
    <label>Students who have not met and not registered abscence</label> 
    <img src="/images/search.png" class="search"> 
    <input type="text" class="search"> 
    <div class="text"></div> 
    <input type="button" value="Print"> 
</div>

每個div都具有唯一的ID AJAX應通過POST發送來獲取數據承擔責任。這就是爲什麼我想通的東西沿着這一線將是ablicable：

$("div.lists div.list").each(function() { 
    $(this).on("ready", {div: this}, function (eventObject) { 
     div = eventObject.data.div; 
     $.post("/admin_post/getusers", {area: $(div).attr("id")}, function (data) { 
      div.find("div.text").html(data); 

      div.find("tr").each(function (row) { 
       datatable.push({ 
        "Row": $(this), 
        "Name": $(this).find("td.name").html() 
       }); 
      }); 
     }); 
    }); 
});

功能將保存在eventObject.data陣列內部問題的股利，並使用div的ID作爲搜索條件在PHP頁。通過將div保存爲eventObject中的值，我可以使用其他地方的相同名稱，因爲如下所示，該想法適用於使用eventhandlers的搜索功能。

每個表中給出使用功能eventhandling代碼自己尋找機會，雖然尚未建成了完整的宗旨：

$(this).find("input[type=text].search").on("change", {preVal: ""}, function (eventObject) { 
    preVal = eventObject.data.preVal; 
    curVal = $(this).val(); 

    if (preVal != curVal) { 
     eventObject.data.preVal = curVal; 
     alert(curVal); 
    } 
});

我知道，我不是一個很熟練的JS或JQuery的編碼器，以及也許我正在走出最佳做法或失去一些非常明顯的東西。無論如何，我真的希望你能幫助我！

來源

2016-08-05 Troels M. B. Jensen

我設法找出故障是什麼，圖中我會在這裏發佈。

因此，出於某種原因，當您在JQuery中調用一個函數並在其中保存一個變量時，下一次調用同一個函數並在變量中保存一個新值時，新變量將保存在舊函數中呼叫。

現在我保存在DIV

div = e;

要素e。當我把它5次：

div = 1 
div = 2 
div = 3 
div = 4 
div = 5

然後，當AJAX的回報，它認爲是這樣的：

div = 5 
div = 5 
...

通過刪除它的div部分，我做了它的工作：

function load_in(e, link, target, data) 
{ 
    $.post(link, {data:data}, function(data) { 
     $(e).find(target).html(data); 
     enable(e); 
     setCount(e); 
    }); 
}

該函數將E-字元素，要發送的POST數據

可贖回與此鏈接，您AJAX來，你希望你的結果目標進入和任何數據：

load_in(this, "/admin_post/getusers", "div.list", $(this).attr("id"));

來源

2016-08-12 08:40:40

如何使用事件處理程序創建5個JQuery AJAX調用？

回答

相關問題