Variables in Modules

Hello,

I was trying to put all the top posters variables into one module (in this case, the overall top posters widget module) but it parsed me only the results of the top posters
Here's now my code looks like

Code:

<div class="module borderwrap">
   <div class="maintitle"><h3>{L_TOP_POSTERS}</h3></div>
   <div class="box-content">
   <div class="topposter">
    <div class="tptabs_container">
      <center>
        <ul>
            <li class="activetptab"><a rel="#weeklytp" class="tptab">Weekly</a></li>
            <li><a rel="#monthlytp">Monthly</a></li>
            <li><a rel="#overalltp">Overall</a></li>
        </ul>
      </center>
        <div class="tpcontent_container">
            <div id="weeklytp" class="activetpcontent">
            <table summary="{L_TOP_POST_USERS_WEEK}" width="100%">
         <!-- BEGIN POSTER -->
         <tr>
            <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" width="30%">{POSTER.NAME}</td>
            <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>
         </tr>
         <!-- END POSTER -->
      </table>
            </div>
            <div id="monthlytp">
            <table summary="{L_TOP_POST_USERS_MONTH}" width="100%">
         <!-- BEGIN POSTER -->
         <tr>
            <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" width="30%">{POSTER.NAME}</td>
            <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>
         </tr>
         <!-- END POSTER -->
      </table>
            </div>
            <div id="overalltp">
            <table summary="{L_TOP_POSTERS}" width="100%">
      <!-- BEGIN POSTER -->
      <tr>
         <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" width="1">{POSTER.NAME}</td>
         <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>
      </tr>
      <!-- END POSTER -->
   </table>
            </div>
        </div>
    </div>
</div>
   </div>
</div>

I was trying to put all of them together and use jQuery to separate them into tabs. Everything is working fine but then I notice that the results are wrongly parsed.
I checked on the variables itself and they are the same code in all three different intervals, which are

Code:

{POSTER.NAME}

Code:

{POSTER.BARRE}

which then prompts me to believe that because it's in the overall top posters template, it shows only the overall top posters statistics.

I may have been doing the wrong thing from the very beginning.
If so, what should be the right way of fetching the right statistics?

Ok, I've been toying with this the whole day now and I can finally load what I want from my statistics (I'm not very good with jQuery yet). But here's what I've gotten so far.

Code:

    $(document).ready(function(){
   $('.placestats').load('/statistics .borderwrap:nth-child(17)>.box-content>.ipbtable>tbody, .borderwrap:nth-child(20)>.box-content>.ipbtable>tbody, .borderwrap:nth-child(23)>.box-content>.ipbtable>tbody', function(){
          var weeklytp = $('.placestats>tbody:nth-child(1)>tr>td:nth-child(2)'),
             monthlytp = $('.placestats>tbody:nth-child(2)>tr>td:nth-child(2)'),
             overalltp = $('.placestats>tbody:nth-child(3)>tr>td:nth-child(2)'),
             weeklytpstring = weeklytp.html(),
             monthlytpstring = monthlytp.html(),
             overalltpstring = overalltp.html(),
             parseweeklytp = $.parseHTML(weeklytpstring);
        console.log(weeklytpstring);
        console.log(monthlytpstring);
        console.log(overalltpstring);
   });
});

Here's a link to the page that I'm testing this:
http://infinityhub.ace.st/h4-jquery-playground

For now, I'm only letting it to return the function in the console. Now if you open the console of your browser (hopefully you're using Chrome or Safari or any other browsers that has developer tools), you'll notice that this selector, ".placestats>tbody:nth-child(2)>tr>td:nth-child(2)" of any of the similar variables fetched me only the first tr child of each of the tbody.

I checked http://api.jquery.com/child-selector/ and the > symbol means all the children of the parent, not just the first child of the parent. So now I'm stumped. Any help in the codes please?

Hi,

Are you using variables from the Templates in Modules or HTML pages ? This will not work, unfortunately. To understand Selectors in jQuery you must first understand Selectors in Cascading Style Sheets.

">" Means your selecting the direct child of the parent. This means that you will not be able to select the same element inside that child. Your next problem is that you're using ::nth-child. In most cases this is unnecessary, especially when you can add an ID or Classname to these elements.

I would go through the templates and add an Id to the parts of the statistics that I want to fetch. This way you'll have a much more accurate selection.

I guess I should now rename the topic title as Fetching Statistics now, as I have now decided to use this method instead of using the variables used in the modules.

w3schools wrote:div>p - Selects all <p> elements where the parent is a <div> element

Does this not mean that this selector selects all the available <p> inside of the <div> element?

And I had to use the :nth-child selector as the templates for statistics is not available. I'm fetching my statistics from the /statistics page (Invision) by loading ( jQuery load() ) the selector that I've specified inside of a div that I've placed in my HTML page (this linked page is just a test).

Edit: Sorry that the topic name isn't changed cause I used the preview button and forget changing it back.

Second edit: I've solved it. Anyone interested in knowing how to solve can refer to that HTML page link I've posted previously.
To mods, you may now lock this topic. Thank you.