Question

我试图在我的项目中实现无限卷轴。我第一次尝试在一个新项目上工作正常，但当我尝试在我的其他项目中实现它时，我得到了奇怪的结果。

为了测试它，我已将限制设置为1，因此它现在应该每次添加1个项目，但它不会。它总是使项目数量翻倍，并给出一个奇怪的订单。所以我添加了一个带有项目的计数/偏移的回声，我得到了这样的东西。（数字是回声偏移，每行是一个滚动，应该只添加1个项目）：

首先：1（= 1项）

第二：1 - 2 - 2（= 3项）

第三：1 - 2 - 4 - 4 - 2 - 4 - 4（= 7项）

第四：1 - 2 - 4 - 8 - 8 - 4 - 8 - 8 - 2 - 4 - 8 - 8 - 4 - 8 - 8（= 15项）

等等......此外，相同的数字始终是相同的项目。所以我得到了很多双重物品。我也试过做过警告（计数（$ 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为你的控制器提供了不正确的值，我建议你确保加载$('.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;
                }
            });
    }
}

如果有效，我们会尝试，希望它有所帮助，欢呼！

Codeigniter无限滚动奇怪的结果

1 个答案: