Question about how to get affiliates?

[Alan Vende]

I apologize, I'm unsure if this is the correct place to put this. If it is not, please feel free to move it.

Forum URL: here

Hello!

I have these two functions:

// get and display number of affiliates
function get_the_number_of_affiliates() {
return $('.affiliateaffcodes li').length;
}

function add_the_number_of_affiliates_to_dialog_box_span(number_of_affiliates) {
$('.ppafftotal > p > span#total-affiliates').html(number_of_affiliates);
}

They are functions written by Ulises , but for some reason, now that I have changed my approach to how I am going about this particular project, they are not working correctly (e.g. Not displaying where they should be). I have a piece of my plugin where it says "Total Affiliates:..." and that's where the number is supposed to go. From the looks of the code above, it should output the number of affiliates wherever the span id of "total-affiliates" is, shouldn't it?

This is how the piece is coded within the plugin itself, where I want the number to go:

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong>&nbsp;<span id="total-affiliates"></span></div>
I feel like I'm missing something obvious here... I've had this code for a while now, and it's baffled me how it doesn't function now that I have changed my approach of the plugin.

Thank you for your insight and guidance. I'm completely baffled here.

PS: I wasn't sure which piece of my code was needed in addition to this, so if you require any additional code that is within the plugin, please let me know. I didn't want to put any unnecessary code into this post.

[Peter]

Here is a hint to what the problem is...

.ppafftotal > p > span#total-affiliates

[Alan Vende]

Dec 11, 2017 13:04:45 GMT -8 Peter said:

Here is a hint to what the problem is...

.ppafftotal > p > span#total-affiliates

*facepalm* there's no paragraph there anymore... so the p shouldn't be there. That I understand, but how is the .ppafftotal a problem?

(Asking so I can learn, as removing that didn't fix the problem either. I had removed the .ppafftotal as it's no longer in the HTML for the JS to utilize. Neither is the p, so I removed that as well. The only thing that is there is the span id, and that's not the problem...

Would it not be enough to remove the bold that you have, because it's no longer needed and pretty much "dead" anyway?

Thank you for the hint, Peter

[Peter]

Alan Vende,

Can you post your updated lines of code so we can see what you have changed. All it really comes down to is getting that selector correct.

[Alan Vende]

Peter,

JS

// get and display number of affiliates
function get_the_number_of_affiliates() {
return $('.affiliateaffcodes li').length;
}

function add_the_number_of_affiliates_to_dialog_box_span(number_of_affiliates) {
$('span#total-affiliates').html(number_of_affiliates);
}
HTML

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong>&nbsp;<span id="total-affiliates"></span></div
           </div>
Also, now I have a new problem that I cannot seem to figure out: all of the divs are closed, but one of them is red. I don't understand why, though, as it closes the div with the class ppafftotalcontainer. I don't see anything that could be causing the problem. I don't think that that has anything to do with the selector not being right, though, since you said that all that needs to happen is getting the selector correct...

[Lynx]

You have a </div> missing the right angle bracket, which may be why it's red:

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong> <span id="total-affiliates"></span></div>
</div>

[Alan Vende]

Thanks, Lynx ! I really should stop trying to code late into the night. Nothing good comes from it... If there was no right angle bracket on a div, though, wouldn't that throw everything else off? I ask because I'm wondering why it took me so long to figure this out... I didn't see any indication of this until I posted the HTML above to Peter ... It's rather interesting how I didn't see it, but also how it didn't cause a problem.

[Peter]

Alan Vende,

Can you link us to the forum where you have that code on so we can take a closer look.

[Alan Vende]

Peter,

I put my Forum URL into my first post (Forum URL: here), but when I went to click on the link, it brought me back to this thread... I don't know what happened there. Sorry about that.

The forum is here.

[Peter]

You have 2 functions, get_the_number_of_affiliates and add_the_number_of_affiliates_to_dialog_box_span, neither are being called.

[Alan Vende]

Dec 12, 2017 12:19:32 GMT -8 Peter said:

You have 2 functions, get_the_number_of_affiliates and add_the_number_of_affiliates_to_dialog_box_span, neither are being called.

Do you call them within the JS or would you do that within the HTML, so they go where they are supposed to (after the words "Total affiliates:"?

I also have these two variable that, when I was going about this another way, worked with the functions:

var number_of_affiliates = get_the_number_of_affiliates();

add_the_number_of_affiliates_to_dialog_box_span(number_of_affiliates);
So, would those two variables call the functions successfully? I ask because when I put them into the JS, they do nothing. When I put them into the HTML next to the Total Affiliates: area, they output in text form.

[Peter]

The way you are calling them is correct. You need to make sure you call them when the DOM is ready. You are using 2 DOM ready events. So throw them into one of those, and it should work for you.

[Alan Vende]

Is DOM ready the same as this? It's document ready, but it's the closest I could find to see an example of how to correctly write one, as I've never done that before. If it's not the same, then what is the difference? How can I learn more about them?

Also (1) I'm guessing that it goes into the JS component, correct?

Also (2), how can you tell when an event is a DOM ready event?

Thanks for your help with this, Peter . It is greatly appreciated!

EDIT (1): Fixed the Also (1) and got it working. Thank you for that guidance! I'd forgotten variables like that go into the JS component.

[Peter]

I suggest having a read over DOMContentLoaded, this is what most modern libraries use now days, they just wrap around it, because back in the day when that event was not supported cross browser, we had to do horrible hacks to work out when the DOM was ready.

developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

You are likely used to reading the ready method from jQuery, which can be called a few different ways...

// handler is your function

$(handler)
$(document).ready(handler)
$("document").ready(handler)
$().ready(handler)


api.jquery.com/ready/

[Alan Vende]

I am definitely used to reading the $(document).ready(handler) method. In fact, that's what I thought to use, but I couldn't think of the name of it, how to do it, or anything of that nature. I knew of it, but not how to write it or anything like that--so, I guess you could say that I was close, if not plain, clueless.

The $(document).ready(handler) isn't becoming deprecated, is it?