jquery infinite scroll not working when calling through jquery load

Question

I am using jquery infinite scroll plugin for pagination and it is working good when running the page directly to the browser. But if I call the page through jquery load method it doesn't work. I can get the first set of results and then I can't even see the loader. Please help. Thanks

Code that uses yii infinite scroll extension

$this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
                'contentSelector' => '#container',
                'itemSelector' => 'ul.wlist',
                'loadingText' => 'Loading next 15 rows...',
                'donetext' => 'Loading Completed.',
                'pages' => $pages,
                ));

Open bootstrap model popup while click of a button

            <button name="add_more" class="btn btn-primary" id="add_more" type="submit" onClick="show_dest();">Add More?</button>

        <a data-toggle="modal"  data-target="#myModal" style="cursor:pointer;"><span id="click_frm" style="display:none">spn</span></a>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:70%; margin-left:auto; margin-right:auto;">
        <div class="modal-content">
        <div class="modal-body" style="display:inline-block; width:100%;" > 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position:absolute; top:10px; right:10px;" >&times;</button>

        <div id="res_search" style=" height:500px; overflow:auto; margin-top:-20px;"></div>
        </div>
        </div>
        </div>
        </div>

        <script type="text/javascript">

        function show_dest()
        {
        var r_id=document.getElementById('reg_id').value;

        $('#click_frm').trigger('click');
        }

        $(document).ready(function(){
        var reg_id=document.getElementById('reg_id').value;
        $("#res_search").load("/site/selectmore", {'reg_id':reg_id}, function(){
        }); 

        });
        </script>

You'll need to post your code or a link to the page else it's kind of impossible to help you — Ronan Thibaudau, Jun 20 '14 at 09:16
I can not find the IDs in the HTML of this short piece of code and hence not comprehend what's going on. Check if the script is part of subject to be overloaded by AJAX data. — Pinke Helga, Jul 03 '14 at 20:45
You use a contentSelector of `#container`, yet there is no `id="container"` in your code. Are you sure you don't try and bind the scroll to a container that's simply (not yet/no longer) there? — LSerni, Jul 04 '14 at 21:07

score 1 · Answer 1 · answered Jul 04 '14 at 18:43

Boy you have some ugly code

First, Replace your script with its cleaner version

<script type="text/javascript">

function show_dest() {
    // WHAT IS THE PURPOUSE OF SETTING RID HERE ?!
    // BECAUSE IT READS REG_ID AND THEN DOES NOTHING WITH THE GOTTEN VALUE?
    var rId = $('#reg_id').val();
    $('#click_frm').trigger('click');
}

$(function() {
    var rId = $('#reg_id').val();
    $("#res_search").load( 
        "/site/selectmore", 
        { 'reg_id': rId }, 
        function(data) {
            // YOU DO NOTHING ON SUCCESS IS THIS OK?
        } 
    );
);

</script>

Formatting your code properly would help you solve errors like this
Now read my comments inside code
Use something like Chrome Developer Tools Javascript Console (F12 in Chrome) to debug errors in javascript

jquery infinite scroll not working when calling through jquery load

1 Answers1