• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 665
  • Last Modified:

Div's with unique id's in a php while loop

Hey All,

I currently have a php while loop and in that loop is a <div> this gets repeated per post on my wall and I want to give each div a unique id like the following (<div id="name_1">, <div id="name_2"> etc...

I have no idea how to give these divs unique id's. Each time I have tried I can generate a number but it just repeats that same number per post so my jquery always affects the first div only. and none of the other posts.

Thanks in advance,
0
piixeldesigns
Asked:
piixeldesigns
  • 13
  • 5
  • 3
  • +3
1 Solution
 
Marco GasiFreelancerCommented:
Post your code, please, so we can see what exactly are you doing.
0
 
piixeldesignsAuthor Commented:
while ($row = mysql_fetch_array($result)) {

<span>
								
								
								<?php
									
									$strArray1 = explode(' ', $row['post']);
									foreach($strArray1 as $word1) {
										if (substr($word1, 0, 7) == "http://" || substr($word1, 0, 8) == "https://") {
											$url1 = $word1;
										} else {
											if ($newString != '')
												$newString .= ' ';
												$newString .= $word1;
										}
									}
									
									$strArray = explode(' ', $row['post']);
									foreach($strArray as $word) {
										if (substr($word, 0, 7) == "http://" || substr($word, 0, 8) == "https://") {
											$url = $word;
										} else {
										
										}
											
									}
								
									$youtubeString = $row['post'];
									$findYouTube = 'youtube';
									$pos = strpos($youtubeString, $findYouTube);
									
									parse_str( parse_url( $url, PHP_URL_QUERY ));
									
									if(($pos !== false) && ($url != "")) {
										
										
										echo '"';
										echo clickable_link($row['post']);
										echo '"';
									
									
								?>
								<br /><br />

									<?php
										$i = 1; $i++;
									?>
								
									<div id="track_<?php echo $i; ?>">
								
									<object style="height: 143px; width: 200px" id="trackObject_<?php echo $i; ?>"><param name="movie" value="http://www.youtube.com/v/<?php echo $v; ?>fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/<?php echo $v; ?>?fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" wmode="transparent" width="200" height="143"></object>
								
								</div>
								
								<script type="text/javascript">
									function adjust() {
										var vid=document.getElementById('trackObject_<?php echo $i; ?>'); // ID of your embed tag
										vid.style.width='480px';
										vid.style.height='390px';
									}
									
									$("#track_<?php echo $i; ?>").live("click", function() {
            							adjust();
        							});
								</script>
								
								<br />
								
								<?php
									} else {
										echo clickable_link($row['post']);
									}
								?>
							</span>
<?php } ?>

Open in new window

0
 
piixeldesignsAuthor Commented:
My Code is there
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
What about :
echo '<div id="name_' . ($divid++) . '">';

Open in new window

0
 
piixeldesignsAuthor Commented:
The ID that I want to be unique is the id in the <object> "trackObject_<?php $i; ?>
0
 
Mohamed AbowardaSoftware EngineerCommented:
Here is the basic idea, you can use something similar to the following:
$i = 1;
while ($i <= 12)
{
         echo "<div id='name_$i'>"; 
         $i++;
}

Open in new window

0
 
piixeldesignsAuthor Commented:
Hey Leakim - yes that worked for the unique number however my javascript now does not work when it is in the loop as well using the same unique numbers:

Here is the javascript:
<script type="text/javascript">
										function adjust() {
											var vid=document.getElementById('trackObject_<?php echo $divNum; ?>'); // ID of your embed tag
											vid.style.width='480px';
											vid.style.height='390px';
										}
									
										$("#track_<?php echo $divNum; ?>").live("click", function() {
            								adjust();
        								});
									</script>

Open in new window


Thanks,
0
 
Amar BardoliwalaCommented:
Hello,

I think you need to change

var vid=document.getElementById('trackObject_<?php echo $divNum; ?>');

to following

var vid=document.getElementById('name_<?php echo $divNum; ?>');

Thanks.
0
 
piixeldesignsAuthor Commented:
Hi Amar,

I got the names mixed up above so the correct one is actually "trackObject".
So the above won't work.

I think it's something with executing javascript within a php while loop.

Cheers,
0
 
crazedsanityCommented:
Since this is coming out of a database, there should be a unique ID from the table the data is pulled from; I would use that if possible.  Just a thought.
0
 
piixeldesignsAuthor Commented:
My issue now is I already have the unique ID working now due to the solution above, however what is happening now is that my javascript that I have does not work yet if I move the javascript out of the while to the top of the page it works but only on my first result, please check my code I posted above.

Cheers,
0
 
crazedsanityCommented:
Don't create such specific javascript; create a javascript file for the page.  

Create a function called adjust() that accepts an argument to supplement the "$divNum" var; then it can be re-used and is a bit more efficient.  As for applying ".live()" to each ID, assuming you're using jQuery, you can just assign a class to all the affected rows, like "shouldBeLive"; the code to run it would be:
$(".shouldBeLive").live("click", function(){
   adjust($(this).attr("id"));
});

Open in new window

0
 
piixeldesignsAuthor Commented:
Thanks Crazedsanity,

From what your saying it sounds like it would work but I am not good at javascript at all and I am struggling to where to start with what your saying about create a javascript file that accepts an arguement to supplement the $divNum.

If you could supply any examples or help out with this to get me in the right direction that would be great.

Thanks,
0
 
Mohamed AbowardaSoftware EngineerCommented:
Create js file "ex: javascript.js", add the following HTML code between <head> tags:
<script type="text/javascript" src="javascript.js"></script>

Open in new window


Now you can create functions inside "javasceipt.js" and use at your page like the following:

function adjust()
{
      // Your code goes here...
}

Open in new window

0
 
crazedsanityCommented:
I would need an example of the HTML output in order to test this on, but the code should be:::
function adjust(divId) {
    $("#trackObject_"+ divId).css("width", "480px");
    $("#trackObject_"+ divId).css("height", "390px");
}

$(document).ready(function(){
    $(".shouldBeLive").live("click", function(){
        adjust($(this).attr("id"));
    });
});

Open in new window


In the PHP code, remove the parts that output the javascript.  Instead, after setting the "<div id=" part, add " class='shouldBeLive'".
0
 
piixeldesignsAuthor Commented:
Is the following function which I already have fine to use in the file and will it work? (I will test it out obviously):

function adjust() {
											var vid=document.getElementById('trackObject_<?php echo $divNum; ?>'); // ID of your embed tag
											vid.style.width='480px';
											vid.style.height='390px';
										}
									
										$("#track_<?php echo $divNum; ?>").live("click", function() {
            								adjust();
        								});

Open in new window

0
 
piixeldesignsAuthor Commented:
Also if I put this at the top of the page and in a new file how will this detect the unique divNum?

As I have put this javascript at the top of the page, it only worked for the first result instead of all of them.

Cheers,
0
 
piixeldesignsAuthor Commented:
Ok so with your code you just gave me - I should put this in a new javascript file and add to the top of the page?
0
 
piixeldesignsAuthor Commented:
Hmmm no luck with even adding from a file

0
 
crazedsanityCommented:
The code I gave should be put into a separate javascript file.  One part that may have been overlooked is that the syntax is for jQuery: you'd need to add the jQuery javascript file to the page as well; take a look at [ http://docs.jquery.com/Downloading_jQuery ] for information on that.
0
 
piixeldesignsAuthor Commented:
Ok I have the jquery files added at the top of my page.
0
 
leakim971PluritechnicianCommented:
>Hey Leakim - yes that worked for the unique number however my javascript now does not work when it is in the loop as well using the same unique numbers:

You may modify your functions to work with the right div :

function adjust(vid) {
		vid.css({ "width":"480px", "height":"390px" });
}

Open in new window


and you have :

$("#track_<?php echo $i; ?>").live("click", function() {
          adjust( $(this) );
});

Open in new window

0
 
crazedsanityCommented:
@piixeldesigns: does it work now?  You may want to check out your browser's javascript console to see if there are any syntax errors.
0
 
piixeldesignsAuthor Commented:
Works perfectly!!! Thanks
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 13
  • 5
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now