How to get js(jQuery) to generate dynamic code

[amanda_]

Just checking to see if this is possible. I’ve created a demo of what’s going on in WordPress. The HTML is all dynamically generated by WordPress.

http://codepen.io/ald603/pen/dYoKNm/

I’ve got the filtering function working exactly as I like it in css and jQuery. But here’s the issue, once the client gets the theme, they could potentially have hundreds of categories. I don’t think they’ll have that many, but they could.

Is there a way that I can dynamically generate the code that will basically be the same, with the integer changing each time. Can anyone point me in the direction of a tutorial or something?

Basically what I need it to generate is the following:
(where N is going to be any integer)

$( "<button class='buttonN'>X</button>" ).insertAfter( ".list-N" );

and

$(".cat-N").addClass('displayN');

and

$('.buttonN').click(function() {
$(".cat-N").toggleClass('hide');
$(".cat-N").toggleClass('displayN');
$(this).toggleClass('grey');

});

and in css I need to generate:

.displayN { display: block; }

Is this possible?
Thanks!

[amanda_]

Ooh thanks! I’m going to be working on this tomorrow, but that looks good!

[amanda_]

So what I’m having issue with now is targeting the correct buttons.

I need to generate something like this (repeated for all values of N)

$('.buttonN').click(function() {
$(".cat-N").toggleClass('hide');
$(".cat-N").toggleClass('displayN');
$(this).toggleClass('grey');

});

I tried using a for loop as in the rest of the code with (i=1, i >100, i++) but no matter which way I tried it, it came up an error. Is this because you can’t have click function within a function? That would make sense. Is there a way to create a variable or some sort argument that is separate from the click function?

[nkrisc]

Are you trying to generate the buttons with JS or just add the click handler to each one generated by WP?

You could add the click handler to the parent element that contains all the categories and use the event object to figure out which one was clicked and what to do then.

[amanda_]

The buttons are generated with this code. I have added a function into wordpress to add a class to each category in WP by id. So if the category id is 5, it’s going to generate this

<li class=".list-5">Category Name</li>

Then with the jQuery

for (var i = 1; i < 1000; i++) {
  $('<button class="button' + i + '">X</button>').insertAfter('.list-' + i);
 $('.cat-' + i).addClass('display' + i);
}

it’s going to be

<li class=".list-5">Category Name</li><button class="button1">X</button>

And each button is going to trigger the toggling back and forth of a few different classes, which will target posts in each particular category. That is where I am stuck. Because I want to generate it for any integer, really. Or at least up until 500 or something.

[amanda_]

It’s not the creating of buttons that’s the issue. That bit is working just as I had hoped :) It’s the functionality of each individual button. Each one toggles different classes that correspond with their category (that has been generated by the other js)

$('.buttonN').click(function() {
$(".cat-N").toggleClass('hide');
$(".cat-N").toggleClass('displayN');
$(this).toggleClass('grey');

});

Is what I’m struggling with. I’m hoping to generate something like

$('.button1').click(function() {
$(".cat-1").toggleClass('hide');
$(".cat-1").toggleClass('display1');
$(this).toggleClass('grey');

});

$('.button2').click(function() {
$(".cat-2").toggleClass('hide');
$(".cat-2").toggleClass('display2');
$(this).toggleClass('grey');

});

etc. etc. until about 500 or so.

[amanda_]

Yes, that’s what I’m confused about, why the classes don’t respond. The <= makes sense. Thanks!

[amanda_]

When I look in the developer tools, I get this error. Which confuses me. I don’t have an “n” anywhere.

Uncaught ReferenceError: n is not defined

[amanda_]

Yes, it’s very curious. They are not toggling. Thank you for your assistance so far. I’ll look into each a little more and also seeing if I can find an example of something similar that I can copy over.

[amanda_]

THANK YOU!!!!

I’m going to try and understand why it works this way and not the other.

[amanda_]

That’s slightly confusing but I think I get why it works. AND…. I have a follow up question.

When I add the code to the WP theme, it doesn’t work :( At all. Though when I’d put the code in manually, it was working, so jQuery is definitely working. And the script is definitely loading. Any quick ideas on why this might be?

[amanda_]

I’m working locally and using Live Reload. I did wrap it in document ready, but perhaps I did it incorrectly. If I can’t figure it out I’ll make a dummy site and put it up online somewhere.

Thanks!

[amanda_]

The reason it’s not working in WordPress is because the category ID doesn’t necessary line up with the order in which they are listed.

Instead of being

   <li class="list-1">Category A</li>
   <li class="list-2">Category B</li>
   <li class="list-3">Category C</li>
   <li class="list-4">Category D</li>
   <li class="list-5">Category E</li>
   <li class="list-6">Category F</li>

like I put in the sample version, it could be anything, such as

   <li class="list-2">Category A</li>
   <li class="list-5">Category B</li>
   <li class="list-4">Category D</li>
   <li class="list-5">Category E</li>
   <li class="list-6">Category F</li>

as it’s impossible to control the id of the category. And the category won’t display if it’s empty. Hhhmm.

[amanda_]

Thank you!!

[amanda_]

It seems to be working, and I think I understand why this works and the other things didn’t. YAY!!!

When I get the whole thingy with WP working and all the other functionality I will put a proper demo up somewhere and explain everything in case someone else needs to do this particular combination of things.

[Author]

Posts