CODEWITHSUNDEEP
jqueryinfinite-scrolljquery-load
Vasanthan.R.P
Vasanthan.R.P

Reputation: 1287

jquery infinite scroll not working when calling through jquery load

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>

Upvotes: 2

Views: 1129

Answers (1)

Jacek Pietal
Jacek Pietal

Reputation: 2019

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>

  1. Formatting your code properly would help you solve errors like this

  2. Now read my comments inside code

  3. Use something like Chrome Developer Tools Javascript Console (F12 in Chrome) to debug errors in javascript

Upvotes: 1

Related Questions