Search jQuery

jQuery Forum

ColorBox does not open after replacing <body> content

in Using jQuery Plugins • 12 years ago

Hello,
I'm using ColorBox to open a simple popup and it works fine. In the same page I have a link which sends an ajax request which return the entire <body> content that I then use to replace the body of the current page. After I do this replacement, the colorbox does not open anymore. I got no JS errors.

Here is a code which reproduces this behaviour

<html>
<head>
<script src="js/jquery-1.4.3.js"></script>
<script src="js/jquery.colorbox.js"></script>
<link href="css/colorbox.css" rel="stylesheet" type="text/css"/>
<script>
function openColorBox() {
$.fn.colorbox({href:"popup.html"});
}
function submitAjax(myAction) {
$('body').html($('body').html());
}
</script>
</head>
<body>
<div id="myContent">
<p> <a onclick="openColorBox()" href="#">Open color box</a></p>
<p><a onclick="submitAjax()" href="#">Sent ajax request</a></p>
</div>
</body>
</html>

In the submitAjax() function I simply replace the body of the current page with the same content.

Do you know what can be the problem ?

Thanks,Tex

Replies(8)

charlietfl

Re: ColorBox does not open after replacing <body> content

12 years ago

when you replace all your content you lose all the events that are bound, regardless of replacing with same id's classes and html structure. You need to rerun all the scripts again AFTER the new content is loaded

textwil

Re: ColorBox does not open after replacing <body> content

12 years ago

You need to rerun all the scripts again AFTER the new content is loaded

How can I do that ?

textwil

Re: ColorBox does not open after replacing <body> content

12 years ago

ok I found this FAQ: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

But in my case, after the replacement of the body DOM, the openColorBox() is being called and the $.fn.colorbox as well ! So it's not event handlers of my page which are not set.

charlietfl

Re: ColorBox does not open after replacing <body> content

12 years ago

is a guessing game on this end without seeing how you are calling script and ajax. Can you post link?

Kevin B

Re: ColorBox does not open after replacing <body> content

12 years ago

looking at the code you posted above, if you replace the content exactly, including the onclick handlers, it should work. However, .html does not get the onclick attributes, therefore they are never rebound. I recommend against using inline javascript such as onclick="method();"

$(document).ready(function(){
function setupHandlers() {
$('#myContent a:contains(Open color box)').click(function(){
openColorBox();
return false;
});
$('#myContent a:contains(Sent ajax request)').click(function(){
submitAjax();
return false;
});
}
function openColorBox() {
$.fn.colorbox({href:"popup.html"});
}
function submitAjax() {
$('body').html($('body').html());
setupHandlers();
}
setupHandlers();
});

and remove the onclick="" methods

another solution instead of having to use the setupHandlers function is to use .live http://api.jquery.com/live/
-- Kevin

textwil

Re: Re: ColorBox does not open after replacing <body> content

12 years ago

Kevin, I tried the code you posted but I'm getting exaclty the same behaviour as with the "onClick" events. I put a demo here : http://goo.gl/Jpv2H

If you debug the script, after clicking "Sent ajax request", you see that the handlers in the page are correctly called. It's the same behavior as the "onClick" version that you can test here http://goo.gl/FsdtW

Here is a 3rd version which uses the .live function but the behavior remains the same : goo.gl/kwK1W

Kevin B

Re: ColorBox does not open after replacing <body> content

12 years ago

i put it in jsbin so i can actually mess with it.

while it doesn't work complete, it does show that t he jquery code does work. i believe the issue is with the colorbox plugin, not the jquery code you are using.

http://jsbin.com/uhoce3

-- Kevin

textwil

Re: Re: ColorBox does not open after replacing <body> content

12 years ago

Yes, the jquery part seems to be fine and I also think the problem is in the library.

jack.jque..

Re: ColorBox does not open after replacing <body> content

12 years ago

When you copy the markup (using jQuery's $.html) that was added by the plugin, then replace the plugin's markup with that copy, you destroy all the JavaScript events that were bound to that markup.

Top Reply

Response title

Attachments

jQuery Forum

ColorBox does not open after replacing <body> content

Replies(8)

Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Re: Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Re: Re: ColorBox does not open after replacing <body> content

Re: ColorBox does not open after replacing <body> content

Statistics

Tags

Actions