CODEWITHSUNDEEP
javascriptphpinfinite-scrolljquery-ias
Adarsh Khatri
Adarsh Khatri

Reputation: 358

<script> not loading after ajax scroll called

I have googled a lot regarding this, and actually couldn't find any solution.

This is what I have in my .phtml file:

              <?php foreach($items as $item):?>
                 ........................
                 ............
                  <?php $count = 1;?>
                        <div id="new-script-<?php echo $count . "-". $item->getId();?>">
                            <script type="text/javascript">
                                var dthen<?php echo $count; ?> = new Date("<?php echo Date("m/d/y", strtotime($toDate)).' 11:59:59 PM'; ?>");
                                var start = "02/10/16 14:57:49";
                                start_date = Date.parse(start);
                                var dnow<?php echo $count; ?> = new Date(start_date);
                                if(CountStepper>0)
                                ddiff= new Date((dnow<?php echo $count; ?>)-(dthen<?php echo $count; ?>));
                                else
                                ddiff = new Date((dthen<?php echo $count; ?>)-(dnow<?php echo $count; ?>));
                                gsecs<?php echo $count; ?> = Math.floor(ddiff.valueOf()/1000);
                                var iid<?php echo $count; ?> = "countbox_<?php echo $count; ?>";
                                CountBack(gsecs<?php echo $count; ?>,"countbox_"+timer, timer);
                                timer++;
                            </script>
                            <?php $count = $count + 1; ?>
                        </div>
               ................
           <?php endforeach;?>

As you can see I have got few php variable called inside script. Which is why I cannot keep this script in external file.

And my ajax code:

jQuery(document).ready(function() {
    jQuery.ias({
        dataType: 'text',
        container : ".category-products",
        item : "ol.products-pack-list",
        next : "a.next",
        pagination : '.pages',
        loader : '<div style="width:100%; display:block; min-height:100px;"><p class="cateogry-loader loader" id="loading_mask_loader" style="margin:0 auto; width: 150px; padding: 15px 30px; background: #fff4e9; border: 2px solid #f1af73; color: #d85909; font-weight: bold; text-align: center; z-index: 1000;"><img src="/image/ajax-loader-tr.gif" alt="Loading..."><br>Please wait...</p></div>',
        triggerPageThreshold : 9999
    });
});

And this is in my <head> tag:

<script type="text/javascript" src="https://www.digitalcinema.com.au/skin/frontend/enterprise/helloshopper/js/auto-load/jquery-ias.min.js"></script>

Now, this works fine, however I also have a infinite-ajax-scroll in place to load all my result. Which is causing the issue here.

After each ajax scroll, my <script> just disappears. I am not able to prevent this. Please suggest.

I had also asked this to the above extension writer, haven't answered yet.

https://github.com/webcreate/infinite-ajax-scroll/issues/218

My rendered html

First page before ias call

<li class="item odd 1">
    <div id="new-script-1">
        <script type="text/javascript">
            var dthen1 = new Date("02/14/16 11:59:59 PM");
            start_date = Date.parse(start);
            var dnow1 = new Date(start_date);
            if(CountStepper>0)
                ddiff= new Date((dnow1)-(dthen1));
            else
                ddiff = new Date((dthen1)-(dnow1));
            gsecs1 = Math.floor(ddiff.valueOf()/1000);
            var iid1 = "countbox_1";
            CountBack(gsecs1,"countbox_"+timer, timer);
            timer++;
        </script>
    </div>

Second page after ias call

<li class="item odd 1">
        <div id="new-script-1-100">
            <script type="text/javascript">
                var dthen1 = new Date("02/14/16 11:59:59 PM");
                start_date = Date.parse(start);
                var dnow1 = new Date(start_date);
                if(CountStepper>0)
                    ddiff= new Date((dnow1)-(dthen1));
                else
                    ddiff = new Date((dthen1)-(dnow1));
                gsecs1 = Math.floor(ddiff.valueOf()/1000);
                var iid1 = "countbox_1";
                CountBack(gsecs1,"countbox_"+timer, timer);
                timer++;
            </script>
        </div>
  </li>
    <li class="item even 2">
        <div id="new-script-2-101">
        </div>
  </li>

See second list and it's content, whole script is disappeared.

Upvotes: 0

Views: 262

Answers (0)

Related Questions