JQuery Prototype bubbling with Ajax reload

Question

I've got a button that displays "HI" when clicked. The button is in a div called "Panel1", which I'm using AJAX to update. After clicking for the first time, when Panel1 is reloaded, the button's click even does not fire anymore. I guess this has to do with event bubbling... but I just can't seem to solve it for the last 3 days. Sample code is as follows:-

<script language="JavaScript" type="text/javascript">
document.observe("dom:loaded", function() { 
    $$("#ShowDialog").invoke('observe', 'click', function() {
        alert("HI");
        AjaxPanel.reload($("Panel1"));
    });
</script>
</head>
<body>
<div id="Panel1">
    .
    .
    .
    <input name="btnAdd" type="submit" value="Add" id="ShowDialog">
</div>
</body>
</html>

Any advice is deeply appreciated.

I'm not that familiar with Prototype, but my guess is you're attaching an event listener to `#ShowDialog`, but then the AJAX is changing `#Panel1`'s `innerHTML` or something, which means that technically `#ShowDialog` will actually be a new ``, with no event listener. Did that make any sense? Regardless, if that is the case, then the solution is to use event delegation instead of an event listener. But I *definitely* don't know enough about Prototype to tell you how that would be done. — sdleihssirhc, Aug 19 '11 at 04:21
Are you using `jQuery` or `Prototype`? Or both? Can't tell it from question header and code, and the answer depends on it. — J0HN, Aug 19 '11 at 06:36

Flambino · Accepted Answer · 2011-08-19T08:06:20.363

You're replacing the entire contents of Panel1, including the button that the event listener is attached to.

So when the window first loads, the event listener is correctly attached. But when the ajax request replaces the content of the div, the button disappears too. Even if the new content has a similar button, it (the new button) won't have an event listener attached.

I don't know the AjaxPanel "class" you're using, but here's how I'd do it with straight Prototype

function observeButton() {
    // The $$() function returns an array, but here we're looking for 1 specific
    // element, so the standard $() function is the one to use. No need to mess
    // with the invoke() method and all that
    $('ShowDialog').observe('click', function(event) {
        alert('Hi!');
        new Ajax.Updater('Panel1', url, { // you'll need to define "url"
            // onComplete is called after the element has been
            // updated so this new call to observeButton() will
            // attach a listener to the *new* button
            onComplete: observeButton 
        });
    });
}

document.observe('dom:loaded', function() {
    observeButton();
});

Alternatively, you can just put the button outside the panel, so it doesn't get replaced. Or you can use jQuery, and the .live() method.

I load both jquery and prototype. For some reason unknown to me, the .live does not work (...and all this while, I thought the .live was part of the "prototype"). The AjaxPanel that I am using was built for CodeCharge, and as such, I am unable to use the onComplete (or perhaps unaware). Your explanation and code above sparked off and idea. I found the answer in "http://stackoverflow.com/questions/1537926/is-there-any-prototype-javascript-function-similar-to-jquery-live-to-trace-dynami" — Dinesh, Aug 19 '11 at 17:31
@Dinesh: Alright. Feel free to click the checkmark by my answer, if you want — Flambino, Aug 19 '11 at 18:02

JQuery Prototype bubbling with Ajax reload

1 Answers1