Here is my situation. I have a DIV that contains some head and ordered
list tags in it. Upon initial load, I hide the contents of the lists
with slideUp() and use slideToggle(), and clicking on one of the links
in the lists populates the fields in a form.

This all works fine, until the form is submitted (via AJAX). Based on
the form submission, I need to redraw the contents of this DIV to
account for a new item in one of the lists, or reorganization of the
items. this is put in a function that uses AJAX to call a Coldfusion
CFC to create the HTML, and I use the html() function to overwrite the
existing code with this code.

The code is redrawn correctly and displays, but none of my click
actions (slideToggle() and filling out the form) works anymore. I have
to completely reload the page to get it to work

I'll post some code blocks below, can anyone point to me why this
might be occuring?

The DIV section:

<div id="listingsLeft">
        <h4><a href="#" id="newListing">Add a New Listing</a></h4>
        <h4>Homes for Sale</h4>

        <h5 class="Active"><a href="#">Active</a></h5>
        <ol>
                <li class="active ">
                        <a href="#" class="listing" rel="C6611F67-D067-4948-
CC7F43ABAADF5866">12345 Test Lane </a>
                        <span></span>
                </li>
                <li class="active ">
                        <a href="#" class="listing" rel="C663830E-B07A-
FB0C-6A60681C5D0DF180">23456 Test Lane </a>
                        <span></span>
                </li>
                <li class="active ">
                        <a href="#" class="listing" rel="C664D7F6-CD70-DA39-
EB4417DFD733B8BA">34567 Test Lane </a>
                        <span></span>
                </li>
        </ol>
</div>

The jQuery for the click functions:

// main functions on load
$(document).ready(function(){
        // hide the left side nav divs
        $("##listingsLeft ol").slideUp();
        // show a hidden left-side list
        $("##listingsLeft h5 a").click(function(e){
                e.preventDefault();
                $(this).parent().next("ol").slideToggle();
        });
        // New Listing link
        $("##newListing").click(function(e){
                e.preventDefault();
                clearFields();
        });
        // fill form with existing "for sale" listing information
        $("a.listing").click(function(e){
                e.preventDefault();
                clearFields();
                var listingID = $(this).attr("rel");
                // get listing information
                $.ajax({
                        type: "GET",
                        url: "admin.cfc?method=getListing&returnformat=json",
                        dataType: "json",
                        data: {
                                "listingID":listingID
                        },
                        success: loadListingForm,
                        error: function (XMLHttpRequest,textStatus,errorThrown) 
{
                                alert("There was an error with your request: " +
XMLHttpRequest.statusText);
                        }
                });
        });
});

The form submission sucess function that does the redraw:

function submitSuccess() {
        alert("The listing was entered successfully into the database.");
        // using base AJAX call for standard GET functions and small form
POST
        $.ajax({
                type: "GET",
                url: "#application.site.cfc#admin.cfc?method=redrawListings",
                dataType: "html",
                success: function(data){
                        $("##listingsLeft").html(data);
                },
                error: function (XMLHttpRequest,textStatus,errorThrown) {
                        alert("There was an error with your request: " +
XMLHttpRequest.statusText);
                }
        });

}

Reply via email to