Jquery not working in new div-content

[Bogey]

hey folks, I have for example a MAIN_PAGE, with different div's inside it... example:

<A href='images/test/00004000000404.jpg' rel='prettyPhoto'><img src='images/test/thumbs/00004000000404_thumb.jpg' alt='Cover CD 1' height='200em' width='200em' /></A>

So when photo is clicked, then it appears in the nice prettyPhoto window.... BUT when I change the content of the div (useing JS/AJAX) with something new, and this something new also has

<A href='images/test/00004000000404.jpg' rel='prettyPhoto'><img src='images/test/thumbs/00004000000404_thumb.jpg' alt='Cover CD 1' height='200em' width='200em' /></A>

inside it, then after clicking the photo, it isn't opening in the nice prettyPhoto window, but instead it opens in a new window! How can I manage to get around that? I guess somehow the JQuery(prettyPhoto) has to been reloaded in the div, so the page knows that the <a> still has to behave prettyPhoto like...

[Bogey]

Still busy on this one, but hope to can get it right bit by bit This gives NO error!

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT>

This gives a error:

<script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT>

Error:-Uncaught ReferenceError: jQuery is not defined-Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function This gives a error:

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT>

Error:-Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function But I guess loading jquery.js two times is not the right way? So why is that line needed twice? Before and after the prettyPhoto part?

[dsonesuk]

normally jquery is written as

$(document).ready(function(){   });

but sometimes using $, causes a conflict with other scripts (mootools is one), so jQuery.noConflict(); was created, you now replace $ with jQuery

jQuery.noConflict();  jQuery(document).ready(function(){  });

if you use without first declaring 'jQuery.noConflict();' it does not recognise it as being used in place of '$' and it gives a undefined error.

[thescientist]

Still busy on this one, but hope to can get it right bit by bit This gives NO error!

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT>

This gives a error:

<script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT>

Error:-Uncaught ReferenceError: jQuery is not defined-Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function This gives a error:

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT>

Error:-Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function But I guess loading jquery.js two times is not the right way? So why is that line needed twice? Before and after the prettyPhoto part?

it's simple. for some reason in the first one you are adding jquery twice. before and after prettyPhoto. I'm sure that prettyPhoto mentions that it requires jQuery, thus you need to include jquery first.

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT>

[Bogey]

I thougth I was going crazy!!! hehehe But I figured out, what was wrong... in 1 .php file I was having 2 pages (if bla bla then page1, else page2).... pppfffff... I come back to it, to mention I got it working how I want, or to ask more questions Thnx!

[Bogey]

Oke, here I am again!!! This I in my template gives no errors:

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT>

This in my template does give error:

<script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT>

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function(anonymous function) So I use the add JQuery twice for now... hope you can tell me, why I need it twice? So what must I have been doing wrong?When I use it once, then I also don't get the PrettyPhoto pop-up window.... then it opens in a new window instead.... when I add JQuery twice, then the PrettyPhoto window pops-up... The other thing I can't get right:This is in my template:

<LINK rel="stylesheet" href="jscript/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/prettyPhoto/js/jquery.prettyPhoto.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="jscript/jquery.js" charset="utf-8"></SCRIPT><script type="text/javascript" src="js/basicfunctions.js"></SCRIPT>  <DIV id='test'><DIV id='test1'><A href='images/test/00004000000404.jpg' rel='prettyPhoto'><img src='images/test/thumbs/00004000000404_thumb.jpg' alt='SamplePic' height='100em' width='100em' /></A><A href="javascript:void()" onclick="fillContent('test.php','test2')">ToDIV</A><BR /></DIV><DIV id='test2'></DIV></DIV>

test.php:

<H1>Testing</H1><A href='images/test/00004000000404.jpg' rel='prettyPhoto'><img src='images/test/thumbs/00004000000404_thumb.jpg' alt='SamplePic' height='100em' width='100em' /></A>

basicfunctions:

var xmlhttp;function run_xmlhttp() {if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}}function fillContent(content, targetDiv){run_xmlhttp();xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;}}xmlhttp.open('GET', content, true);xmlhttp.send();}

when I open template, then DIV1 gives the picture, and when clicking the picture opens in PrettyPhoto popup window.when I click 'ToDIV' link in the DIV1, then DIV2 is filled with the 'test.php', and I see the picture there, but when clicking, then it opens not in the PrettyPhoto popup, but it opens in a new page... Any clues on the 2 things above? ;)1.) The double insert op JQuery2.) JQuery not working in newly filled div The second one has something to do I think about PrettyPhoto has to be reloaded, cause of the new php.page in div, so the items in DIV2 didn't get the events... but cant get it right...

[justsomeguy]

It sounds like the first issue may be due to the PrettyPhoto script being written poorly, it sounds like it is overwriting the jQuery object. For the second one, if you load in new content via ajax then you'll need to run the code to initialize PrettyPhoto again. You would need to check inside the source code for that to see how it initializes itself.

[thescientist]

did you read all the directions?http://www.no-margin.../documentation/ Did you initialize prettyPhoto?

 <script type="text/javascript" charset="utf-8">  $(document).ready(function(){	$("a[rel^='prettyPhoto']").prettyPhoto();  });</script>

I would make sure you've gone over all the documentation and FAQ's first before you start trying to hack around. I haven't used prettyPhoto personally, but it's only logical you explore all their options first, to make sure you are following their suggestions for implementation. edit:You also didn't state which version of jQuery you are using, but you can try using live() (<v1.7) or on() (>=1.7) to handle events for elements loaded asychronously.

Edited May 7, 2012 by thescientist

[Bogey]

Hmz.... difficult problem though :S I read the PrettyPhoto documentation yes... and I am doing it their way, for as far I can see... I did initialize also

<script type="text/javascript" charset="utf-8">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});</SCRIPT>

If I didn't, then it would not run also right in the template I Guess? JQuery version:

/*!* jQuery JavaScript Library v1.4.1* http://jquery.com/** Copyright 2010, John Resig* Dual licensed under the MIT or GPL Version 2 licenses.* http://jquery.org/license** Includes Sizzle.js* http://sizzlejs.com/* Copyright 2010, The Dojo Foundation* Released under the MIT, BSD, and GPL Licenses.** Date: Mon Jan 25 19:43:33 2010 -0500*/

Hasn't it nothing to do with the issue between JS and PHP (user- and serverside)??? Maybe I have to update JQuery... (I thought I was using v1.7.2 uncompressed, but think I erased it, when resetting PrettyPhoto up from start again) PrettyPhoto script written poorly? I downloaded it from "http://www.no-margin-for-errors.com/", so I did not get it from a strange place... I thought no-margins-for-errors was a well educated neat script website, you can trust on?

[dsonesuk]

When the ajax places the new content into the required div, reapply the reinitialization of the prettyphoto function if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;$("a[rel^=prettyPhoto]").prettyPhoto();}

[justsomeguy]

The code for the script looks fine at first glance, I'm not sure how the $ object is getting overwritten or replaced.

[Bogey]

A quick try, before I go to work... adding "$("a[rel^=prettyPhoto]").prettyPhoto();" did not do the trick Any suggestions on getting info about the $ object overwritten/replaced?

Edited May 8, 2012 by Bogey

[Bogey]

Got it working with lightBox.... so I threw prettyPhoto aside :S