JQuery & PHP problem

[son.of.the.morning]

I have a while loop fucntion displaying a list of records, each while records contains a hidden div with additional infomation and a button that will call JQuery slideToggle() function. each button on each record toggles alll the hidden divs. Does anyone have any ideas on how to sort this issue?

[gristoi]

without seeing any code it is going to be extremely hard to tell you what the problem is. but the fact that you are generating this via a loop i would say that you are assigning the click event to the same id every time.

[son.of.the.morning]

Yea thats it exacly, do you know a way around this?

[gristoi]

have a look at jquery's .each() function. this will do what you need

[imperium2335]

You could use a counter in your script to add 1 to each id, e.g. myItem0, myItem1 etc, and have your jquery do the same for the reference like $('#myItem'+counter)

[AyKay47]

are you using a singular class for your hidden div? you will want to use unique id's for this and associate each button id with the correct div id. and I recommend using .each as well.

[gristoi]

example:

 

<div class="wibble"></div>
<div class="wibble"></div>
<div class="wibble"></div>
<div class="wibble"></div>

$(".wibble").each(function(){
  $(this).toggle();
});

[son.of.the.morning]

I am actauly mind blank on this one...

 

PHP & HTML

<?php 
				$rowNum = "0";
				while($record_rows = mysql_fetch_array($records_returned)){
					if(++$rowNum % 2 == 1 ) {


			?>
                <div class="Record">
                     <div id="VeiwRecord">More Details</div>
               </div>
                </div>
                 //THE HIDDEN DIV
                <div id="ViewMoreHidden"><?php echo substr($record_rows['post'], 0,500)."..."; ?></div>
                <?php } else {?>
                <div class="Record_i">
                    <div id="VeiwRecord">More Details</div>
               </div>
                //THE HIDDEN DIV
                <div id="ViewMoreHidden"><?php echo substr($record_rows['post'], 0,500)."..."; ?></div>
                <?php }} mysql_close();?>

 

JQUERY

$('document').ready(function() {

	$('#VeiwRecord').click(function() {
		$('#ViewMoreHidden').slideToggle(2000);

	});

});

[gristoi]

$('document').ready(function() {

	$('#VeiwRecord').each(function() {
                               $(this).click(function(){
                                               $('#ViewMoreHidden', this).slideToggle(2000);
                                                      }):


	});

});

 

havent tested it, but should point you in the right direction

[son.of.the.morning]

would i have to change any of the php/html?

[son.of.the.morning]

Just tryied that but it didnt work.

[gristoi]

sorry, didnt look at your code properly. iterating over the worng thing:

 

$('document').ready(function() {

	$('.Record').each(function() {
                               $('#VeiwRecord',this).click(function(){
                                               $('#ViewMoreHidden', this).slideToggle(2000);
                                                      }):


	});

});

 

have a play round with that

[KevinM1]

Remember that ids are supposed to be unique.  If you have multiple ViewRecords or ViewMoreHiddens, JavaScript will only 'see' the first one.

[son.of.the.morning]

Still nothing at all :S

[son.of.the.morning]

Here is the full php/html code

 

<?php 
				$rowNum = "0";
				while($record_rows = mysql_fetch_array($records_returned)){
					if(++$rowNum % 2 == 1 ) {


			?>
                <div class="Record">
                	<div class="Thumbnail"><img src="../img/articles/thums/<?php echo $record_rows['img_url']; ?>" class="RecordThumbnail"/></div>
                    <div class="RecordContent">
                    	<div class="PostTitle"><?php echo $record_rows['title']; ?></div>
                        <div class="PostSnipit"><?php echo substr($record_rows['post'], 0,50)."..."; ?></div>
                    </div>
                    <div class="SelectOptions">
                        <div class="DeleteRecord">Delete Article</div>
                        <div id="VeiwRecord">More Details</div>
                    </div>
                </div>
                <div id="ViewMoreHidden"><?php echo substr($record_rows['post'], 0,500)."..."; ?></div>
                <?php } else {?>
                <div class="Record_i">
                	<div class="Thumbnail"><img src="../img/articles/thums/<?php echo $record_rows['img_url']; ?>" class="RecordThumbnail"/></div>
                    <div class="RecordContent">
                    	<div class="PostTitle"><?php echo $record_rows['title']; ?></div>
                        <div class="PostSnipit"><?php echo substr($record_rows['post'], 0,50)."..."; ?></div>
                    </div>
                    <div class="SelectOptions">
                        <div class="DeleteRecord">Delete Article</div>
                        <div id="VeiwRecord">More Details</div>
                    </div>
                </div>
                <div id="ViewMoreHidden"><?php echo substr($record_rows['post'], 0,500)."..."; ?></div>
                <?php }} mysql_close();?>
            </div>

[gristoi]

he is correct, id's are meant to be unique, am javascript will only execute the first instance it finds, but using the each function correctly in jquery means you can refer to the Record divs child elements within a local scope. i have tried this locally and it works fine. treating each one individually:

<div class="Record">
<div id="VeiwRecord">click me</div>
<div id="ViewMoreHidden">Im hidden</div>
</div>

<div class="Record">
<div id="VeiwRecord">click me</div>
<div id="ViewMoreHidden">Im hidden</div>
</div>

<div class="Record">
<div id="VeiwRecord">click me</div>
<div id="ViewMoreHidden">Im hidden</div>
</div>

<div class="Record">
<div id="VeiwRecord">click me</div>
<div id="ViewMoreHidden">Im hidden</div>
</div>

$('document').ready(function() {

	$('.Record').each(function() {
		var obj = $(this);
                               $('#VeiwRecord',obj).click(function(){
                                               $('#ViewMoreHidden',obj).slideToggle(2000);
                                                     });


	});

});

[AyKay47]

yes in order for this to work correctly and to avoid some ugly coding, both your button and your hidden div should be included in the same parent div.

[son.of.the.morning]

Got it sorted, thanks everyone for your help.

[KevinM1]

gristoi, it may work, but it's semantically wrong.  IDs are supposed to be unique for the entire HTML document.

[son.of.the.morning]

Yes your correct, however the same method works fine with class's.

[AyKay47]

Yes your correct, however the same method works fine with class's.

as it is meant for classes