jQuery / javascript How to load Script when a css class presents in the page

Question

I have a page shows a list of rows and with a pagination, when you click on next page the next page loads in same page contains another list of rows. so basically next page loads a bunch of other rows without my exact page been reloaded

So the problem im haven is i use this script below while it works fine but when the next page loads in same window this script does not work for them. I hope i make sense here :) what is a good solution for this?

$('.ltwitch').each(function () {
    var tnick = $(this).data('tnick');
    var span = $(this).next();
    $.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
        if (data.stream === null) {
            span.html( 
                '<strong class="ipsOnlineStatus ipsOnlineStatus_offline"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta">Offline</div>');
        } else { 
            var views = data.stream.viewers;
            var game = data.stream.game;
            span.html(
                '<strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta"> ' + views + ' viewers </div><div class="ipsDataItem_meta">Playing: '+ game +' </div>');
        }
        $(function() {
            var online = $('.ipsOnlineStatus_online').closest('.cCmsRecord_row');
            var first = $('.cCmsRecord_row')[0];
            online.each(function() {
            $(first).before(this);
            });
        });

short of HTML

<ol class="List">

    <li class="row">
        <div class="main">
            <a href="#" class="ease">
                <div class="ltwitch" data-tnick="esl_lol"></div>
            </a>
        </div>
    </li>
        <li class="row">
        <div class="main">
            <a href="#" class="ease">
                <div class="ltwitch" data-tnick="esl_lol"></div>
            </a>
        </div>
    </li>
    ....
    ....
    ....

</ol>

<div data-role="tablePagination">
    <ul class="ipsPagination">  
        <li class="ipsPagination_prev ipsPagination_inactive"><a href="#">Prev</a></li>     
        <li class="ipsPagination_next"><a href="#">Next</a></li>
    </ul>
</div>

You didn't describe your problem or what the script is supposed to be doing above. Why can't you perform the operation after the next has been clicked? Example: $('.ipsPagination_next').click(function(){ $('.ltwitch').each(function(){ .. })) — vol7ron
– vol7ron, Commented May 13, 2016 at 4:40

Nick Goodrum · Accepted Answer · 2016-05-13 04:52:58Z

2

It sounds like you want to wrap your work in a named function so you can call it on subsequent paging. Your code right now is most likely in a document ready which is only called on initial page load. Turning all of that work into a function now allows it to be called many times.

function myFunction () {
...
};


myFunction();

Then where your pagination code is set up ( I figure an anchor click binding ) just call myFunction() again.

$('.ipsPagination_next').click(function(){
  ...
  myFunction();
});

I would note that if these two areas are in different document ready functions or different files, ideas like scope and encapsulation might become problematic. We'd have to see more code to confirm if it would be an issue. If you are having problems you could put the function myFunction() onto the root which would be outside of any document ready, load, or whatever you might be using. Then it would be on the root or window level.

window.myFunction = function () {
   ...each(... your current work
};

This could be used if you aren't sure about encapsulation or how scope works.

edited May 13, 2016 at 4:52

answered May 13, 2016 at 4:46

Nick Goodrum

4012 silver badges7 bronze badges

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

1 Comment

Nippledisaster Over a year ago

Thank you so much sir :)

paulvs · Accepted Answer · 2016-05-13 04:33:43Z

1

Your $('.ltwitch') selector only captures the classes present in the first page. When a subsequent page is loaded, $('.ltwitch') is not executed again on the new classes.

I suggest that you somehow differentiate between classes corresponding to already loaded pages, and classes corresponding to new pages. You could do this by adding a class, e.g. .already-loaded to the classes as you load them.

$.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
    $(this).addClass('already-loaded'); // Mark as loaded.
    ...

This way, replace your first line with this:

$('.ltwitch').not('.already-loaded').each(function () {
    ...

Not tested, but could work.

edited May 13, 2016 at 4:33

answered May 13, 2016 at 4:18

paulvs

12.1k3 gold badges44 silver badges66 bronze badges

2 Comments

Nippledisaster Over a year ago

The rows are dynamic so im not adding anything manually I also had to say a quite newbie here :) maybe a little more info or modifying my code would be very good. Thanks for quick reply

paulvs Over a year ago

I added a bit more info, hope that helps.

Collectives™ on Stack Overflow

jQuery / javascript How to load Script when a css class presents in the page

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related