We Keep Coding

jQuery Show/Hide Multiple Comment Sections on One Page

Presently, I am using a script to show/hide comments on a number of WordPress-based sites. The script works as expected on essentially every site. However, I've run into an issue with a site using the Hero theme. On the index pages, the theme pulls the content from X number of posts. Unfortunately, this has the effect of calling the script multiple times and resulting in the first post getting X number of show/hide buttons and the other posts being unaffected.
I'm uncertain as to how to modify the script in order to target each of the comment sections individually. Naturally, the task would be easier if the theme author had not assigned all comment sections on index pages the same id (#commentBox). I've looked at limiting the scope of the script (i.e., to have each instance of the script affect only the post content within which it's contained) and changing the actual functionality of the script to account for the multiple comment sections. Unfortunately, I've not yet been able to get it working as intended.
Here is a link an index page displaying the issue: http://www.sitestyling.ca/abbyphotography/blog/. The first link (i.e., the one to the script) leads to a page which has the script implemented and functioning as expected.
Any help or suggestions would be greatly appreciated.

So to state the obvious here, having multiple elements with the same ID is very bad mojo. To whatever extent that you can control how these WP sites are loaded I would encourage you to work to modify the repeated injection of your script into the page since even after making a change, your script would be run repeatedly since you have multiple blocks defining document.ready functions. You could ameliorate that with a global to tell if your script had already fired but that's getting a bit hackish...
What I would suggest in principle is that you add logic to your script to do the following:
Find the offending duplicate ID items and rename them to something unique
Add a class that you can reference rather than an ID
Refactor your code to loop through the collection of items returned from the class selector
If really, really necessary you could also then have kept track of your renamed IDs, go retrieve them individually and reset them to the offending original duplicate ID name thus incriminating yourself for future page user
The first couple of points here could be done pretty simply with something like this:
var uniqueAppend = 1;
var tempName = 'commentBox';
while(jQuery("#commentBox").length > 0 ){
jQuery("#commentBox").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
}
Now you can find all your comment DIVs at once with jQuery(".commentContainer") and then iterate through that collection to take whatever actions you need.

How to keep track of a list of values associated to an HTML input text (dynamically created)

I have a page in which almost all of the controls are created dynamically.
When I send the page I have no problem retrieving the data from those controls.
The problem comes when I have to retrieve the data of the "returns"(see buttons inside the blue frames), because since they are not inside any control I have to use an array to keep track of them.
This is the pop-up that is used to enter the returns for each expression (IF,ELSE IF,ELSE)
My question is, what would you do if you had to keep track of those returns??
Would you create an js array of returns for every expression(IF,ELSE IF,ELSE) knowing that you would have to create arrays of arrays since each structure can have several instructions,which in turn can have several expression, which in turn can have several returns?? What would you do to keep the solution as simple as possible, considering that the only thing I don't have inside controls is the returns.
At present I'm using the js array approach but , I have to do a lot of things so that when I remove a structure of all the returns associated with the expressions inside that structure, get removed too.
EDIT:
==============
The code I use to create all the controls in my page is too large to be posted it here, but here's an image showing the structure of the js array I use to store all the returns for each expresion(IF,ELSE IF,ELSE) and that I later submit as a json object.
Considering that structure, do you think it would be possible to simplified that structure so that while I am still editing the page I only have to have the returns in a array??
To make a long story short, I want to create the whole structure shown in the image just before I summit the form, NOT while I'm still editing the page.
Just a couple of extra things to consider:
structures : Structure #1,Structure #2
instructions: All the frames with a dropdown list showing "Multiple IF"
expressions : All the IF's,ELSE IF's and ELSE's
==============
P.S. I'm not asking for any working code, I only want to hear your suggestions of what you would you do if you had to deal with a situation like the one described above.

Use the form element's onsubmit event.
<form action="" onsubmit="this['returns'].value = createReturnsArray();">
<input type="hidden" name="returns" />
</form>
When the form is submitted, the function createReturnsArray is called and its return value send along with the form as returns. Of course, you would change all these things to suit your needs.

Is there a way to use JS or jQuery to manipulate a JavaScript form?

I am with affiliate programs that give you little forms to put on your website, but often times they're entirely composed of javascript (so, no HTML tags , ID's or classes are inside of them).

These probably pull in forms using AJAX. JS or JQuery cannot display page elements by themselves, for that they need HTML. What you can do is use the Chrome Developer Tools to find the IDs or classes in the form they load in, and then after the AJAX call edit the form from there.

If there's a form then it has to ultimately draw elements into the DOM for the page to render. There's always a way to get at those nodes if you really need to, but if they don't include IDs or names then you'll have to walk the tree and look for specific relationships based on what you see in the finished page. It will definitely be a PITA, but it's doable.

Javascript best practices - Hide element in DOM or Generate DOM element

I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.

It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.

it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.

Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.

Creating a self updating form

I'm creating a form on a web page, but I want that form to change as a user inputs values.
Example: If we have a drop down menu: ObjectType
And someone chooses Cars when that selected I'd want new options below to show up. Say, Make, Model, Year, & Notes.
Whereas, if that person chooses Vegetables then maybe all I want is a checkbox for Root Vegetables.
My question is what is the best way to do this. My form is pretty intricate and is going to have perhaps 20 different possible set ups, but I want those set ups to be sorted. I used appendChild() with AJAX requests, but I just ended up with out of order fields. And on top of that, the occasional slow connection keeps an individual waiting for a field to show up.
Rather than loading HTML pages with these form objects (technically part of a table), should I be keeping all of this stuff in an array? Is it possible to just load one HTML page or XML object and use selectElementById() on that result after it has been saved?
The objects I'm loading are rows, here's an example of one and what it would need to be able to do:
<td>
<strong>Abilities:</strong>
</td>
<td>
<textarea
id ='abilities'
name="abilities"
style="width:100%" rows="4"
onchange='userCreation.updateAbilities()'
onkeyup='userCreation.updateAbilities()'>
</textarea>
</td>
I have a table in my page, I was creating a new tr element with JavaScript, setting this as the innerHTML and then appending the child. Is there a better way to do this?

I would just put all of the form elements in a page, and hide the ones you're not using with CSS. That way you maintain order, and don't have to wait for fields to show up. It will slightly slow down page load time, but make your life a lot simpler.
Otherwise, I'd store the name (or whatever) of each field in an array or object, and when it comes time to AJAX load it, look up its position first and put it there.

Just have the entire for in the page and just change the visibility of different sections, based on user interaction instead of dynamically loading elements via AJAX.