CODEWITHSUNDEEP
javascriptjqueryhtml
CeylonDomains Solutions
CeylonDomains Solutions

Reputation: 53

Load JS scripts required for lazy loaded content

I'm having an issue of loading JS scripts for my lazy loaded contents after the page is fully loaded.

Please go through my code

/*JS Which Runs on LoadMore button Clicks*/

$.ajax({
        method :'GET',
        url: baseUrl+'ajaxcontroller/Load_Categories_To_View',
        success:function(data){
        $('#searchResults').append(data);
        //scriptLoader('#scripts');
        $('#loadingImage2').hide();
        },
        complete: function(){
        $('#loadingImage2').hide();
         $("#loadMore").show();
        },
        error:function (xhr, ajaxOptions, thrownError)    {alert(thrownError);}
        });
<!-SEARCH RESULTS PAGE-->

<!doctype html>
<html lang="en">
<head>
	
</head>
 <body>
 

  	<section class="content">
    	<section class="block">
      	<div class="container">
        <!----------------------------------------------Ads---------------------------------------------------->
        <?php if(!empty($headerdata[0]['homepageAds720x90']) && $headerdata[0]['enable_ads']==1){ ?>
        <section class="block" align="center">
             <?php $this->load->view('ads/homepageAds720x90'); ?>
        </section>
        <?php }?>
        <!------------------------------------------------------------------------------------------------------>

        <!-------------------------------------------Search Product Page---------------------------------------->
        <div id="loadingImage" align="center" style="display:none;"> <img src="<?php echo base_url();?>assets/img/loadingimage.gif"/> </div>
        <div id="searchResults"><div id="scripts"></div></div>
        <div id="loadMore" style="">
          <a href="#"><?php echo $this->lang->line('loadmore_btn'); ?></a>
        </div>
        <!-------------------------------------------------------------------------------------------------------->

        </div>
    	</section>
	  </section>

	</div>
  <div id="backtop">&#9650;</div>

<!----------------------------------------------Page Scripts---------------------------------------------------------> 
<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------------------------------------->

</body>
</html>

As I have shown via my code it will load the first set of results and then there will be a loadMore Button where a user has to click to load the next set of results.

Everything works as expected but the issue is when a user clicks on LoadMore button JS scripts within the SEARCH RESULTS PAGE also loads, which will be duplicated each and every time user clicks on the LoadMore Button. But easily I can remove following scripts from my search results page but then none of the page functions will work for the lazy loaded contents. because to run these functions lazyloadcontrols.js should be loaded every time when a user clicks on LoadMore button.

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

So my question is, is there any way for me to load these JS scripts to my main search page and use them for the contents that I will be loading later when a user clicks on LoadMore Button? Basically is there any way for me to apply these JS scripts for the whole page without duplicating them each time a user loads the results?

Thanks in advance

Upvotes: 0

Views: 95

Answers (1)

toanpt
toanpt

Reputation: 66

I think your

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>

should add below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions