unable to reset lazyloader correctly

[michaelnguyen2021]

Hello Dave,

I am having trouble with reseting lazyloader. My set up includes:

• a input field to search job title
• a submit button

First submit always work. Subsequence submits after loading all available jobs does not do load more event anymore.

Example: put electrician in job title field and click submit. There are total of 26 jobs , 10 job per page so I am able to scroll down and lazyloader just load 1 more time. then, i immediately change job title to plumber and click submit. There are total of 31 jobs, but when I scroll down to the end, lazyloader does not load more. It does nothing.

I attempted

$( '#searchjobs' ).lazyloader( "resetAll" ); 
or 
$( '#searchjobs' ).lazyloader( "reset","searchjobs" );

but a new error occurs where it keeps loading forever and click submit after first time, lazyloader does not work anymore.

Here is my code:

var initLazyLoader = function() {
    //$("#searchjobs").lazyloader("destroy");
    // Initialize the lazyloader widget
    $("#searchjobs").lazyloader();

    /* Set some default options for the lazyloader
     *   the first three set the timeout value for when the widget should check
     *   the current scroll position relative to page height to decide whether
     *   or not to load more yet.  The showprogress option is to specify the
     *   duration of the fadeIn animation for the lazyloaderProgressDiv.
     */
    $.mobile.lazyloader.prototype.timeoutOptions.mousewheel = 300;
    $.mobile.lazyloader.prototype.timeoutOptions.scrollstart = 700;
    $.mobile.lazyloader.prototype.timeoutOptions.scrollstop = 100;
    $.mobile.lazyloader.prototype.timeoutOptions.showprogress = 100;

    // Use an automatic threshold that's a function of the height of the viewport
    threshold = $( window ).height();

    // Set up the variable options to pass to the lazyloader reinitialize function
    var options = {   "threshold"   : threshold,
                      "retrieve"    : 10,
                      "retrieved"   : 10,
                      "bubbles"     : false,
                      "offset"      : 0 };

    // Set up the page specific settings to pass to the lazyloader reinitialize function
    var settings = {  "pageId"                : "searchjobs",
                      "mainId"                : "commandlist",
                      "progressDivId"         : "lazyloaderProgressDiv",
                      "clearUrl"              : "http://localhost/API/reset",
                      "moreUrl"               : "http://localhost/API/moreJobs"};

    // Set up the post parameters to pass to the lazyloader reinitialize function
    var parameters = {  "retrieve"      : options.retrieve,
                        "retrieved"     : options.retrieved,
                        "offset"        : options.offset, 
                        "keyword"  : localStorage.getItem("keyword")};

    // Reinitialize the lazyloader so that it correctly handles the listview on the artists page
    $( "#searchjobs" ).lazyloader("reInitialize", options, settings, parameters );
}

$(document).ready(function(){

    $('form').submit(function(){

        initLazyLoader();
        //$( '#searchjobs' ).lazyloader( "resetAll" ); does not work - stop loading more after another submit

        var postData = $(this).serialize();

        var loadJobs = $.ajax({
            type: 'POST',
            data: postData,
            url: 'http://localhost/API/searchJobs',
            dataType: 'json'
        });

        loadJobs.done(function( data ) {
            alert('Load Jobs ...');

            var template = "{{#jobs}}\
                template_html_here
                {{/jobs}}";

            var html = Mustache.to_html(template, data);
            $('#commandlist').html(html).listview( 'refresh' );
        });

        loadJobs.fail(function( data ) {
            alert('Make sure you are connected to Internet.');
        });

        return false;
    });

});

Best Regards,

Michael