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>&nbsp;</th>
    <td><a class="toggle" id="type"><small>Add New Type</small></a></
td>
</tr>

Any thoughts or suggestions would help immensely.

Reply via email to