CODEWITHSUNDEEP
phpjquery
Mcherm
Mcherm

Reputation: 1

How to select the correct id for the specific button pressed in dynamic table

I'm relatively new to jquery and cannot for the life of me get this to return the proper youtube id it just always returns the first one in the table.

php. I load the youtube id from my database then display it in the table.

require_once 'library/Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
echo '<br/>';
echo '<table width="95%" cellpadding="0" cellspacing="0" align="center" border="0">'; 

while ($row = mysqli_fetch_assoc($videoquery))
{
$vidid = ($row['id']);
$vidtitle = ($row['title']);
$vidip = ($row['ip']);
$page2 = ($row['page']);
$q = ($row['youtubeid']);

$yt = new Zend_Gdata_YouTube();
$yt->setMajorProtocolVersion(2);
$videoEntry = $yt->getVideoEntry($q);
$thumbnail = '<img src="' . $videoEntry->mediaGroup->thumbnail[0]->url . '" width="100" height="92"';

echo '<tr bgcolor="#333">
 <td width="100px" rowspan="2" nowrap="nowrap" style="border:2px solid #999999">'.$thumbnail.'</td>
 <td colspan="2" align="left">' .$vidtitle. '
 </td></tr>
 <tr bgcolor="#3B3B3B"><td nowrap="nowrap">
 <form method="post">
 <input name="parse" type="hidden" value="playvid" /><input name="youtubeid" id="youtubeid" type="hidden" value="'.$q.'" />;
 <input type="button" name="play" id="play" value="Play Video" />
 </form></td>
 <td align="right">
 <form method="post" action="">
 <input type="hidden" name="page2" value="'.$_SERVER['REQUEST_URI'].'">
 <input name="parse" type="hidden" value="deletepost2" />
 <input name="postid2" type="hidden" value="'.$vidid.'"/>';
if ($topuserid == $_GET['id']){
 echo '<input type="submit" name="deletepost2" id="deletepost2" value="Delete Video" /';>
}  
echo  '</form></td></tr>';  
}  
echo   '</table>';  
}

Jquery code

<script type="text/javascript">
$(document).ready(function(){
$('#play').live('click', function() {
$('#video').empty()
var vidid = $('#youtubeid').val(); 
alert(vidid);
var playvid = '<object width="300" height="193">'+
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+
'<param name="allowFullScreen" value="true"></param>'+
'<param name="allowscriptaccess" value="always"></param>'+
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+
'</object>';
$('#video').append(playvid);    });
});
</script>

Upvotes: 0

Views: 120

Answers (2)

Mark Eirich
Mark Eirich

Reputation: 10114

Nathan had the right idea but had some errors in his code. Try this:

<script type="text/javascript">
$(document).ready(function(){
  $('#play').live('click', function() {
    var tr = $(this).closest('tr');
    tr.find('#video').empty();
    var vidid = tr.find('#youtubeid').val(); 
    alert(vidid);
  });
});
</script>

Upvotes: 1

nathan gonzalez
nathan gonzalez

Reputation: 11987

you need to give your selector some context. implementing no changes in your html you could change your js to 

$(document).ready(function(){
var $tr = $(this).closest('tr')
$('#play').live('click', function() {
tr.find('#video').empty()
var vidid = tr.find('#youtubeid').val(); 
alert(vidid);
var playvid = '<object width="300" height="193">'+
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+
'<param name="allowFullScreen" value="true"></param>'+
'<param name="allowscriptaccess" value="always"></param>'+
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+
'</object>';
tr.find('#video').append(playvid);    });
});

Upvotes: 0

Related Questions