Codeigniter無限滾動怪異結果

Question

我試圖在我的項目中實現無限滾動器。 我首先在一個新項目上進行了嘗試，但效果很好，但是當我嘗試在其他項目中實現它時，卻得到了奇怪的結果。

為了測試它，我將限制設置為1，因此應該每次都添加1個項目，但不是。 它總是使物品數量加倍，並給出奇怪的順序。 因此，我在項目的計數/偏移量上添加了回顯，得到了類似的結果。 （數字是回聲偏移量，每行都是滾動，應該僅添加一項）：

第一：1（= 1個項目）

秒：1-2-2（= 3個項目）

第三名：1-2-4-4-2-4-4（= 7件）

第四位：1-2-4-8-8-8-4-8-82-4-8-8-8-8（= 15件）

依此類推...同樣，相同的數字始終是相同的項目。 所以我有很多雙重項目。 我還嘗試過警報（count（$ items））; 結果之前，foreach只給1。

這是Ajax的代碼：

var reachedEnd = false;
$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

        setTimeout(function() {
            lastPostFunc();
        }, 1000);
    }
});

function lastPostFunc() {
    var trs = $('.sresult-row'); 
    var count = trs.length; //offset

    if (reachedEnd == false) {
        alert("test"); //I only get 1 alert after each scroll 
            $.ajax({
                url: "http://localhost/ci/index.php/search/ajax_searchJob/" + count,
                async: false,
                dataType: "html",
                success: function(data) {
                    if (data != "End")
                        $('.result-bd').append(data);
                    else
                        reachedEnd = true;
                }
            });
    }
}

只是我的控制器的一小部分：

public function ajax_searchJob($offset = null) {
    if ($this->job_model->searchJobUnique($where, 1, $offset)) {
        $jobs = $this->job_model->searchJobUnique($where, 1, $offset);
        echo $offset; //This gives the result I've said before 
        ...
        $this->load->view("default/search-job-result-ajax", $data);
    } else {
        echo 'End';
    }
}

我的模型，以防有人要看：

public function searchJobUnique($where, $limit = 1, $offset = 0)
{
      $sql = "SELECT *,job.id as id, job.country as country, job.province as province, job.city as city,
            job.employment_length as employment_length, job.employment_type employment_type,
            u.username as company_name, job.company_id as company_id, u.description as description,
            job.is_visa_assistance, job.is_visa_assistance,
            ms.employment_type as msjob_employment_type,
            ms.employment_length as msjob_employment_length,
            ms.is_visa_assistance as msjob_is_visa_assistance,
            ms.is_housing_assistance as msjob_is_housing_assistance,
            ms.language_level as msjob_language_level,
            ms.industry_position as msjob_industry_position
                      FROM job
                      LEFT JOIN user as u on job.company_id=u.uid
                      LEFT JOIN job_industry_position as jip on job.id=jip.job_id
                      LEFT JOIN match_score as ms on job.id=ms.job_id".$where."  ORDER BY job.post_date DESC 
                      limit " . $limit . " offset " . $offset;
      $r = $this->db->query($sql);

      if ($r->num_rows > 0) {
        return $r->result_array();
    } else {
        return false;
    }
  }  

我真的很想解決這個問題。 我使用了與我的testproject中使用的代碼完全相同的代碼。

任何人？

Answer 1

查看您的JS，我認為$('.result-bd')是$('.sresult-row') ，可能無法准確獲取行數是因為附加文件尚未加載到DOM上，因此，您的ajax req將錯誤的值替換為ur控制器，我建議您確保在繼續分配任何值之前先加載$('.sresult-row')您的count ，即您可以在代碼中嘗試：

var reachedEnd = false;
var count = 1; //give your offset a default value first
$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            $.when(lastPostFunc()).then(function(){ //make sure that the result items gets appended
               var trs = $('.sresult-row'); //assigning new instances of sr-row everytime 
               setTimeout(function() { //provide a short lag time just to make sure that .result-row is already existing in the dom 
                  count = parseInt(trs.length, 10); //assigns a new value for your offset
               }, 500);
            });

    }
});

function lastPostFunc() {
    if (reachedEnd == false) {
            $.ajax({
                url: "http://localhost/ci/index.php/search/ajax_searchJob/" + count,
                async: false,
                dataType: "html",
                success: function(data) {
                    if (data != "End")
                        $('.result-bd').append(data);
                    else
                        reachedEnd = true;
                }
            });
    }
}

尚未嘗試過是否奏效，希望能幫上忙，加油！