[jQuery] Index, .load issues
Hi Gang,
I've been wasting time trying to figure this out to no avail. Here's
my function:
//Toggle
$("#type_new").hide();
toggle = function(){
$("a.toggle").unbind('click').click(function(){
var aIndex = $("a#type").index(this);
if($("#type_new:eq("+aIndex+")").is(':visible')==true) $("a#type
small:eq("+aIndex+")").html("Add New Type"); else $("a#type small:eq
("+aIndex+")").html("Choose From Exisiting Types");
$("#type:input:eq("+aIndex+")").toggle();
$("#type_new:eq("+aIndex+")").toggle().val("");
});
}; toggle();
//Add Contact
$(".addItem").click(function(){
$("#addContact").load("ajax/addContact.php", '', function(){
$.thisIndex = $("tbody").index(this);
$(this).find("#type_new").hide();
$(this).attr("id", "newContact" + $("tbody").index(this)).addClass
("highlight").after('<tbody id="addContact"></tbody>');
$("tbody:not('#newContact"+$.thisIndex+"')").removeClass
("highlight");
toggle();
})
});
It's a toggle between a select box and a text input for users to
select from the list or create a new type. When I load a new section
into the table it then has another (new) type select and input. On
the newly created set the index comes up at 1 (rather than zero) but
that's when I get stuck. The Text changes in the <small> tag to
"Choose from existing types" but the inputs don't toggle.
Here's what my HTML looks like. Imagine two of these after the load
event:
<tr>
<th>Type of Organization</th>
<td>
<select name="type" id="type">
<option>Church</option>
<option>College</option>
<option>Theatre</option>
</select>
<input name="type_new" id="type_new" type="text" /