this line threw me for a loop............. var aIndex =
$("a#type").index(this);
reason: ID's have to be unique so indexing $("a#type") can only
return 0 as there can only be one of them
therein lies a big part of your problem, your select and a tag use same
ID
didn't look a lot further but is always good practice to use var for
something like var toggle= function (){.........
would also take the "" out of the eq() as it requires an integer
......eq(aIndex) will work fine assuming all other issues correct
Jason wrote:
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" /
</td>
</tr>
<tr>
<th> </th>
<td><a class="toggle" id="type"><small>Add New Type</small></a></
td>
</tr>
Any thoughts or suggestions would help immensely.
|
