I recently took over a web based product at my company. It was developed originally using an older version of Dojo running on top of Catalyst/Template Toolkit (so it's all being submitted to Perl on the backend). I have since taken steps to at least get up to date and went to Dojo 1.5
Specifically the problem I am trying to solve now has to do with div ids. It's a form page that at first has a combo box, a selection pulldown and a textbox. In the interest of brevity, I'll condense this..... The HTML looks like this....
<div id="actions">
<div id="prelim_actions_1_div">
Variable: <input type="text" value=""
class=lighttext size=50
id="prelim_actions_xvar_1"
name="prelim_actions_xvar_1"/>
<a href="javascript:void();" title="Delete"
onclick="delete_section('prelim_actions_1_div')">
<img src="http://localhost:3000/static/images/16-square-red-delete.png"/></a>
<a href="javascript:void();" title="Insert Below"
onclick="add_action_below('prelim_actions', 'prelim_actions_1_div')">
<img src="http://localhost:3000/static/images/16-em-down.png"/></a>
</div>
</div>
The first Javascript href allows you to delete the text box (title="Delete") and the second one allows you to add another text box that successfully increments the div ids. In the example above
<div id="actions">
would successfully nest within it...
<div id="prelim_actions_1_div">
........
........
</div>
<div id="prelim_actions_2_div">
....
....
</div>
Problem is that dang delete function in javascript. I have found it possible, through various combinations of adding and deleting like a real life user, to raise errors in Firebug by trying to register a div that's already registered, and to successfully write multiple div ids of the same name.
So my question, and I'm not looking for someone to type me out a solution (but I do need to try and learn this), is whether or not there is an easier way of accomplishing this. That is the ability to dynamically add and delete text boxes and be sure that each one has a unique div id (and name) before the Submit button is hit.
Any dojo/javascript pros out there have any words of wisdom or links that may help to point me in the right direction? Janie
A lot depends on how delete_section and add_action_below work now. I would suggest that you make delete_section very dumb - just blindly delete the div passed in. When doing your add_action_below function do something like this:
//figure out the next available spot
var i = 1;
while(dojo.query('#prelim_actions_'+i).length){
i++;
}
console.log('available id: prelim_actions_'+i);
//create div contents
//append after clicked section
I'm not sure how the backend of your app works, but most likely you can just go through the params and find the ones named prelim_actions_xvar_.* and it'll be fine.