Jump to content

Jquery not working in new div-content


Bogey
 Share

Recommended Posts

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...

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by thescientist
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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();}

Link to comment
Share on other sites

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 by Bogey
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...