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
– Ronan Thibaudau, Commented Jun 20, 2014 at 9: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
– Pinke Helga, Commented Jul 3, 2014 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
– LSerni, Commented Jul 4, 2014 at 21:07

Jacek Pietal · Accepted Answer · 2014-07-04 18:43:01Z

1

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

answered Jul 4, 2014 at 18:43

Jacek Pietal

2,0191 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery infinite scroll not working when calling through jquery load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related