ansaurus

Question

Jquery prettyPhoto and star conflict....DOM not loading?

Answer 1

A:

could this work for you ?

$.noConflict();
$(function($) {
     //you jquery here
});

Puaka 2010-04-19 23:17:22

I'm quite the newbie....how exactly would I implement that? Would I put the script reference in there?

Dustin 2010-04-19 23:56:07

before execute your pretty photo script, just put $.noConflict(). something like this : eg.<script src="other script here e.g prototype"></script><script src="jquery"></script><script>$.noConflict();</script>im not sure this will solve your problem, you can try. read more here http://api.jquery.com/jQuery.noConflict/

Puaka 2010-04-20 00:13:15

I'm only using jquery on this....thanks though

Dustin 2010-04-20 00:20:29

Answer 2

A:

You labeled this as "ajax", is that because the star rating system is being pulled in via ajax? If so, then the problem would be the (most likely) click event bound to the stars. You would need to use jQuery's "live" or "delegate" functions.

This is also the case if you're using javascript to write the HTML of the star selection piece to the DOM any time after the page is initially loaded (or after the click event is initially bound).

Or the problem could be with the selector markup... if, for example, you're star rating system is something like:

<ul id="star-rating-system">
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
</ul>

Then there may be an issue with having 2 things on the page with the same ID, which would cause a problem.

Do you think you could provide a bit more information for more clarity? For example, the HTML for the star rating system, and any information about how or if you altered the original prettyPhoto javascript.

RussellUresti 2010-04-19 23:34:00

I have a foreach loop in php that queries a db. The image is an href with a link to a unique div. e.g. <a href="#inline_demo<?php echo $i?>" rel='prettyphoto'><img....></a><input name="star<?php echo $k; ?>" id="1" type="radio" class="star"/>....that div is hidden until I click on the image link, then I have the following displayed: <div id="inline_demo<?php echo $k?>" style="display:none; margin: auto;"> ....image here....<input name="star<?php echo $m; ?>" id="1" type="radio" class="star"/></div>

Dustin 2010-04-19 23:52:14

And what's the javascript code that controls the star rating?

RussellUresti 2010-04-20 01:05:13

$(window).load(function(){ $('.star').click(function() { id = $(this).attr('id'); ids = id.split('//'); rating = ids[0]; image = ids[1]; email = '<?php echo $_SESSION['email'];?>'; if (image != null){ $.post("<?php echo site_url('ordering/rate_pic') ?>", {imagename: image, rating:rating, email: email},function(data) { alert(data); }); } else { url = "<?php echo site_url('ordering/show_only_star'); ?>/" + rating + " #img_pic"; $('#img_pic').load(url, function(data) { $.getScript("<?php echo $url ?>star/jquery.rating.js"); }); } }); });

Dustin 2010-04-20 01:10:55

It doesn't seem like it should need it, but have you tried using $('.star').live('click',function(){ ...code here... }); instead of $('.star').click(function() { ...code here... }); It's worth a try, depending on how the modal is behaving. It seems like it may be removing the HTML and then reattaching it to the DOM at the time of execution. You'll need jQuery 1.4 or later, I believe.

RussellUresti 2010-04-20 02:03:52

Brilliant! Works like a charm now!...however, the star hovering isn't working. I'm not too picky, but is there any way to get that to work too?

Dustin 2010-04-20 02:45:16

Hovering is a bit trickier. You'll need to use the live() function again, but you can only pass it 1 function (instead of passing it 2 like you would a normal hover() function). So, you can use something like $('.star').live('hover',function(){ $(this).toggleClass('hovered');}); or you can specifically set live('mouseover',function()) and live('mouseout',function()) calls. The 2 separate ones will be most easiest.

RussellUresti 2010-04-20 03:02:35

ansaurus

tags:

views:

answers:

Jquery prettyPhoto and star conflict....DOM not loading?

related questions