select data from php fetch array to javascript popup div

[funbinod]

I have columns from some rows of a MySQL table using php.

while ($qr = $qq->fetch_assoc()) {    echo '<a id="email">'.$qr['email'].'</a>';}

there are multiple rows. but when I click and any of the derived emails, I want that email to be displayed on the popuped div

	$("#email").click(function(e) {		$("body").append("<div id=pop><div id=popin><br /><br /><input id=emaill type=text value='<?php echo $aemail; ?>' /><br /><br /><input type=button id=close value=CLOSE /></div></div>");		$('#popin').effect('slide', {easing:'easeInOutElastic'},3000);		$('#emaill').focus();   	});

I don't what exactly I've to do for this but I've kept the javascript outside the while loop and its not working.

 

can anyone guide me for this????

 

 

thanks in advance...

[justsomeguy]

You're giving all of the elements the same ID, every element needs a unique ID. You should use a class to refer to them instead of an ID.

[funbinod]

thank u for the quick reply. I've tried using class also. but its not working either...

 

edit:

moreover using class opens popup div for all the emails...

Edited March 9, 2015 by funbinod

[justsomeguy]

It should work if you do it right, I'm not sure what you did. You shouldn't have PHP write out the email address in that Javascript code though, unless you want to use the same email address for every pop up. If you're trying to fill in the email address associated with the link then put the email address as a data attribute on the anchor tag and get it in the click handler to fill in. I'm not sure exactly what you're trying to accomplish or what the HTML ends up looking like though. If you run that click handler multiple times then it's also going to end up appending elements with the same ID to the page.

[funbinod]

 

If you're trying to fill in the email address associated with the link then put the email address as a data attribute on the anchor tag and get it in the click handler to fill in

 

i'm doing this. but the problem is that I want the email address on a "div" on the "same page" that is appended on click event, not on a "new popup window". I know how to use "data attribute on the anchor tag" to a new window, as u suggested. but I don't know how to do that on the same page.. will u please guide me to this...???

[justsomeguy]

It's exactly the same, I don't know what your confusion is. You get the value from the data attribute a single way. Once you get the value you can do whatever you want with it.

[funbinod]

if I use "id" it selects email from first row and if I use "class" it selects all emails from all row and appends popup div for all rows... and I wish one by one selection...

[justsomeguy]

Are you printing that click handler multiple times on the page?

[funbinod]

using 'id' yes for emails on all rows.

using 'class' no....

[justsomeguy]

It's not going to work at all if you have multiple elements with the same ID. That's not even an option. What does your code look like now?

[funbinod]

  $n = 0;  while ($qr = $qq->fetch_assoc()) {	  $n++;          <a class="email" id="email'.$n.'">'.$aemail.'</a>;}

		<script>		$("#email<?php echo $n; ?>").click(function(e) {			$("body").append("<div id=pop><div id=popin><br /><br /><input id=emaill type=text value='<?php echo $aemail; ?>' /><br /><br /><input type=button id='close' value=CLOSE /></div></div>");			$("#popin").effect("slide", {easing:"easeInOutElastic"},3000);			$("#emaill").focus();   		});		</script>

the javascript inside while loop

 

and this worked now...