How to do callback + update div tag in javascript

Question

Hi all,

I have an ASP.NET MVC application with pages where the content is loaded into divs from client via javascript/jquery/json. The loaded content contains a-tags with references to a function that updates server side vaules, then redirects to reload of entire page even though .

I wish to replace the a-tags with 'something' to still call a server-side function, then reload the div only.

What is the 'right' way of doing this?

Be gentle - I'm new to JS ;-)

All comments welcome,

Anders, Denmark

This is as far as I got so far. getResponseCell() returns a td-tag filled with a-tag. I've mangled Glens suggestion into the .click() addition, but it just calls the onClickedEvent...

Code sample:

    onClickedEvent=function()
    {
        return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.appendChild( document.createTextNode( label));
        link.setAttribute("href", "/EventResponse/"+ action + "/" + eventId);
        //link.setAttribute("href", "#divContentsEventList");
        //link.setAttribute("onclick", "onClickedEvent(); return false;");
        link.setAttribute("className", "eventResponseLink");


        link.click(onClickedEvent());

        // link=jQuery("<A>Kommer<A/>").attr("href", "/EventResponse/"+ action + "/" + eventId).addClass("eventResponseLink");
        // link.appendTo(tmpSubSubCell);
        tmpSubSubCell.appendChild(link);

        return tmpSubSubCell;
    }

---

And the solution that worked for me looks like this:

    onClickedEvent=function(event, actionLink)
    {
            event.preventDefault(); 

            $("eventListDisplay").load(actionLink);

            refreshEventList();                

            return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.setAttribute("id",action + eventId);
        link.appendChild( document.createTextNode( label));
        actionLink = "/EventResponse/"+ action + "/" + eventId;
        link.setAttribute("href", actionLink);
        className = "eventResponseLink"+ action + eventId;
        link.setAttribute("className", className);

        $('a.'+className).live('click', function (event)
            {
                onClickedEvent(event,$(this).attr('href'));
            });

        tmpSubSubCell.appendChild(link);

        return tmpSubSubCell;
    }

Answer 1

We need code to give you a proper answer, but the following code will catch the click of an a-tag, and reload the div that it's inside:

$(document).ready(function() {
    $("a").click(function() {
        //call server-side function
        var parentDiv = $(this).parents("div:first");
        $(parentDiv).load("getContentOfThisDiv.asp?id=" + $(parentDiv).attr("id"));
    });
});

In the above code, when a link is clicked, the div that this the link is inside will be loaded with the response of the call to the asp file. The id of the div is sent to the file as a parameter.

Answer 2

Without really seeing more information.....

If you're a's are being added to the DOM after the initial page load, you cannot use the usual click() or bind() methods in jQuery; this is because these methods only bind the events to those elements that are registered in the DOM at the time the methods are called. live() on the other hand, will register the event for all current, and future elements (using the event bubbling mechanism in Javascript).

$(document).ready(function () {
    $('a.eventResponseLink').live('click', function (event) {
        var self = $(this);

        self.closest('div').load('/callYourServerSideFunction.asp?clickedHref=' + self.attr('href'));

        event.preventDefault();
    });
});

We're using event.preventDefault() to prevent the default action of the a-tag being executed; e.g. reloading or changing page.

Edit: The issue won't be caused by that. That's the power of jQuery; being able to bind the same event to multiple elements. Check your HTML; maybe you're missing a closing </a> somewhere? Maybe your binding the event in a location that gets called multiple times? Each time .live() gets called, it will add ANOTHER event handler to all matched elements. It only needs to be bound once on page load.

jQuery provides loads of way for you to select the elements; check out the list. Looking at your link variable, it looks like all your links have a href starting with /EventResponse/; so you can use $('a[href^=/EventResponse/]') as the selector instead.