I am generating dynamic id's based on the results from MySQL and this is working ok. However, I need to get value of id and whatever i try, it either comes back undefined or blank. I would appreciate any help if someone could point out my error. Thanks
<?php
while ($inboxrow = mysqli_fetch_assoc($inboxresult)) {
$id = $inboxrow["id_frm"];
$message = $inboxrow["message_frm"];
$date = $inboxrow["date_frm"];
$date = strtotime( $date );
$date = date( 'd/m/Y H:i:s', $date );
$from = $inboxrow["from_frm"];
$subject = $inboxrow["subject_frm"];
echo '<div class="msgHdr" style="font-size: 13px; margin-right: 20px; margin-bottom: 10px; padding: 7px; border: 1px solid #ccc; height: auto; background: #fcfaf7">';
echo '<span style="font-weight: bold;">' . $from . '</span>';
echo '<br />';
echo "<a class='dynid' href='#' id='" .$id. "'>" .$subject. "</a>" . '<span style="float: right; font-size: 12px;">' .$date. '</span>';
echo '</div>';
?>
js
$(function() {
$(document).on('click', '.msgHdr', function() {
//console.log(id);
var anc = $(".dynid").find("#id").text();
console.log(anc);
});
});
Looking at your code you need
$(document).on('click', '.msgHdr', function() {
var $link = $(this).find(".dynid");
var subject = $link.text();
var id = $link.attr("id");
});
You should probably do something like:
$(function() {
$( ".msgHdr" ).click(function() {
var anc = $(this).find(".dynid").text();
console.log(anc);
});
});
Related
I have a small question: I created a dynamic search bar until now it's ok. But the problem I have is that when I type the beginning of a letter or a number, I don't have a display limit it takes all the page someone already have a solution?
Thanks a lot
Here is the jQuery code:
$(document).ready(function () {
$('#search-stock').keyup(function (){
$('#result-search').html('');
var stock = $(this).val();
if (stock != "") {
$.ajax({
type: 'GET',
url: '../ajax/stock_search.php',
data: 'stocks=' + encodeURIComponent(stock),
success: function (data) {
if (data != "")
{
$('#result-search').append(data);
} else {
document.getElementById('result-search').innerHTML = "" + "<div style='font-size: 20px; text-align: center; margin-top: 10px'> Aucun élement trouver</div>"
}
}
});
}
});
});
Here is the php
<?php
session_start();
include('../include/bdd.php');
if(isset($_GET['stocks'])){
$stock_aema = (string) trim($_GET['stocks']);
$req = $bdd->prepare("SELECT * FROM stock_aema WHERE model LIKE :model LIMIT 10");
$req2 = $bdd->prepare("SELECT * FROM stock_aema WHERE id LIKE :id LIMIT 10");
$req3 = $bdd->prepare("SELECT * FROM stock_aema WHERE aema LIKE :aema LIMIT 10");
$req->execute(array('model' => "%$stock_aema%"));
$req = $req->fetchAll();
foreach ($req as $r){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $r['id'] . " " . $r['model']. " " . $r['aema']?>
</div>
<?php
}
$req2->execute(array('id' => "%$stock_aema%"));
$req2 = $req2->fetchAll();
foreach ($req2 as $s){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $s['id'] . " " . $s['model']. " " . $s['aema']?>
</div>
<?php
}
$req3->execute(array('aema' => strval("%$stock_aema%")));
$req3 = $req3->fetchAll();
foreach ($req3 as $x){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $x['id'] . " " . $x['model']. " " . $x['aema']?>
</div>
<?php
}
}
?>
A couple of months ago, I asked a similar question like this and the answer that where given worked for me. I now have another change I would like to add to my page. I would like that each post I create has its own unique div. My page currently looks like this:
the previous question helped me break the div each 3 post, so what I tried was within the if statement that creates a new dive each 3 div was to add another if which would break each 1 div so that each post has its own div and it still breaks to a new div section each 3, maybe I just complicated everything with my description, but I want to get something like:
Here is my code
CSS:
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
}
PHP:
else {
$break = 0;
$nRows = $connection->prepare("SELECT post_id, post_title,
post_author, post_file, post_time
FROM posts
ORDER BY post_id DESC");
$nRows->execute();
if($nRows->rowCount() > 0) {
while ($row = $nRows->fetch()) {
$post_title = str_replace('_', ' ', $row['post_title']);
$post_author = $ed->encrypt_decrypt('decrypt',$row['post_author']);
$post_file = $row['post_file'];
$post_date = $row['post_time'];
// Create a new div each 3 columns
if ($break % 3 === 0) {
echo '<br><div class="column"><br>';
}
$break++;
?>
<!-- Blog Content BEGIN Display-->
<div class="box"><?php
// Display the content
$file_parts = pathinfo($post_file);
if(isset($file_parts['extension'])) {
switch ($file_parts['extension']) {
case "jpg":
if(!empty($post_file)) { ?>
<img src="post/postFiles/<?php echo $post_file;?>"><?php
}
break;
case "mp4":?>
<div class="thumbnail">
<video preload="auto" loop muted>
<source src="post/postFiles/<?php echo $post_file;?>">
</video>
</div>
<!-- Preview video on hover -->
<script>
$(document).ready(function () {
$(".thumbnail").hover(function () {
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
el.currentTime = 0;
});
});
</script><?php
break;
case "": // Handle file extension for files ending in '.'
case NULL: // Handle no file extension
break;
}
}
// Title URL Variable
$urlFetchPostId = '<h2><a href="post/postFetch/fetchByTitle/fetchByPT.php?post_id=';
$urlFetchPostTitle = '&post_title=';
$urlFetchPostAuthor = '&post_author=';
echo $urlFetchPostId . $row['post_id'] . $urlFetchPostAuthor. $row['post_author']. $urlFetchPostTitle . $row['post_title'] . '"' . 'class="link-post-title" style="font-family: Arial">' . " ". $post_title . '</a></h2>';
// Author/User URL Variable
$urlFetchPostUser = '<a href="post/postFetch/fetchByAuthor/fetchByPA.php?post_author=';
echo $urlFetchPostUser . $row['post_author'] . '"' . 'class="link-post-author" style="font-family: Arial">' . " ". strtoupper($post_author) . '</a>';
// Posted Date
echo '<br><p style="font-family: Arial">Posted on ' . $post_date . '</p>';
?>
</div><?php
if ($break % 3 === 0) {
echo '<br></div><br>';
}?>
<!-- Blog Content END Display --><?php
}
} else { ?>
<p style="color: darkgoldenrod" class="mssgAlign"><u>NO RECORDS</u></p><?php
}
$nRows = null;
}
Any help, tip or improvement suggestion is welcomed
You want to use margins. Margins specify a buffer around the outside of your container. As opposed to padding, which specifies buffer inside the container. Add this to your css
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
margin-left: 20px;
margin-right: 20px;
}
I have the following code that is supposed to be a list of "facilities" and I made a div acting as a popUp that contain information that should change depending on the Lab I click info, I already made the popUp appear and dissapear playing with adding a hide and show class to it using Js.
But I don´t really know how should I write that each li element has to retrive information from a database I made in wamp for practice purposes, should I use a label? Or perhaps create a table instead of a list?
In short I need that when I click Lab 1 the popUp says Name: Lab1, if the clicks Lab 2, then Lab2 and so on. The code I was going to use in PHP is below as well.
HTML
<div class="box">
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<ul>
<li>Nombre: Lab #1</li>
<li>Carrera: Desarrollo</li>
<li>Capacidad: 20</li>
<li>Ubicación:Abajo</li>
<li><a href='horarios.html'>Ver horarios</a></li>
</ul>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="window.location='labEliminado.html';" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
PHP
function displayLab(){
$query = "SELECT bk.idLab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs";
$result = do_query($query);
return $result;
}
function displayBooks(){
$books = getBooks();
while($row = mysql_fetch_assoc($books)){
echo '<tr>' .
'<td>' . $row['idLab'] . '</td>' .
'<td>' . $row['carrera'] . '</td>' .
'<td>' . $row['capacidad'] . '</td>' .
'<td>' . $row['ubicación'] . '</td>' .
'</tr>';
}
}
Gonna add the box CSS just in case:
.box {
color: #ecf0f1;
background-color: #34495e;
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid white;
}
JS for PopUp
var elementoVerInfo = document.getElementById('lnkInfo'),
elementoBotonCerrar = document.getElementById('btnCerrar');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrecto1');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrecto1');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
That is if I decide to use a table...and if the code runs >.>
Anyway thanks a lot in advance
Best Wishes
If anyone else wants to do something similar I came with a solution:
function displayLabs(){
$labs = getLabs();
while($row = mysql_fetch_assoc($labs)){
echo '<ul>' .
'<li>"Nombre: "'. $row['idlab'] . '</li>' .
'<li>"Capacidad: "'. $row['capacidad'] . '</li' .
'<li>"Carrera: "'. $row['carrera'] . '</li>' .
'<li>"Ubicación: "'. $row['ubicacion'] . '</li>' .
'</ul>';
}
}
JAVASCRIPT
function ShowContent(id) {
if(id.length < 1) { return; }
document.getElementById(id).style.display = "block";
}
PHP
$test = mysql_query('SELECT userid,testid,testname FROM test_table WHERE userid = 9 ORDER BY name');
TestName : <select>
while($row=mysql_fetch_array($test))
{
$testname = $row['testname'];
$testid = $row['testid'];
echo '<option value='.$testid.'>'.$testname.'</option>
}
</select>
echo '<div id="testid" style="display:none;">
echo '<table>
<tr><th>USERID</th</tr>
<tr><th>TESTNAME</th></tr>
<tr><th>MARKS</th></tr>
publishtest = mysql_query('SELECT id,userid,publishtest,marks FROM publish_table WHERE userid= 9 GROUP BY id');
while($row=mysql_fetch_array($publishtest))
{
$userid = $row['userid'];
$testid = $row['id']; /*This is test id*/
$testname = $row['publishtest']; /* This is test name*/
$marks = $row['marks'];
echo '<tr><td>'.$userid.'</td>
<td>'.testid.'</td>
<td>'.testname.'</td>
<td>'.$marks.'</td>
</tr>
}
echo '</table>';
echo '</div>';
I need when I select test from select tag, then div should be displayed of that testid. I want either in javascript, jquery
You can try this:
JavaScript
$('#showDivSelect').change(function (e) {
var divId = $(this).children('option:selected').val();
$('#' + divId).css('display', 'block');
});
HTML
<select id="showDivSelect">
<option id="o1">Div1</option>
<option id="o2">Div2</option>
</select>
<div id="Div1"></div>
<div id="Div2"></div>
CSS
#Div1 {
width: 30px;
height: 30px;
background-color: red;
display: none;
}
#Div2 {
width: 30px;
height: 30px;
background-color: blue;
display: none;
}
Here is working example: http://jsfiddle.net/ePSDu/
I have a form with a button which opens a javascript/css popup window. On the popup window I have a textarea which will be used to add a comment to a database field. The problem is that I need to pass it a value from the main page (the one that calls the popup) which will identify which entry in the database to update. But I am stuck trying to get it to work. Here is my code. I need to have the variable sent to the update.php page. Please help.
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
if(isset($_GET['sort']) && isset($_GET['col']) ){
$order = $_GET['sort'];
$column = $_GET['col'];
}
else{
$order = 'ASC';
$column = 'cron_id';
}
$page = 'Testing Site';
require_once('includes/head.php');
require_once('includes/mysql.php');
require_once('includes/class.tdcron.php');
require_once('includes/class.tdcron.entry.php');
date_default_timezone_set('America/Los_Angeles');
$result = mysql_query("SELECT * FROM cron WHERE active=1 ORDER BY $column $order") or die (mysql_error());
mysql_close();
$pass = "<img src='images/Checked.png' alt='Pass' width='16' height='16'/>";
$fail = "<img src='images/Stop.png' alt='Failed' width='16' height='16'/>";
$warn = "<img src='images/Warning.png' alt='Warning' width='16' height='16' />";
$com = "<img src='images/pencil.png' alt='Warning' width='16' height='16' />";
echo "<div id='tableContainer' class='tableContainer'>";
echo "<table width='100%' border='0' padding='0' cellpadding='0' cellspacing='0' class='scrollTable'>";
echo "<thead class='fixedHeader'>";
echo "<tr>";
if ($order=="ASC") { echo "<th>Status</th>"; }
else { echo "<th>Status</th>"; }
echo '<th>Schedule</th>';
if ($order=="ASC") { echo "<th>Job</th>"; }
else { echo "<th>Job</th>"; }
echo '<th>Description</th>';
if ($order=="ASC") { echo "<th>Destination</th>"; }
else { echo "<th>Destination</th>"; }
echo '<th>Errors</th>';
if ($order=="ASC") { echo "<th>Job Type</th>"; }
else { echo "<th>Job Type</th>"; }
if ($order=="ASC") { echo "<th>Category</th>"; }
else { echo "<th>Category</th>"; }
if ($order=="ASC") { echo "<th>Last Ran</th>"; }
else { echo "<th>Last Ran</th>"; }
echo '<th>Next Run</th>';
echo '<th>Log</th>';
echo '</tr></thead><tbody class="scrollContent">';
while($row = mysql_fetch_array($result)){
if($row['ok'] == 1){$status = $pass;}
elseif($row['ok'] == 0){$status = $fail;}
else{$status = $warn;}
echo '<tr>';
echo
'<td>
**<form name="frm_comment" action="" onsubmit="return false;" >' . $status . ' ' .
'<input type="image" src="images/pencil.png" onclick="popup_show(\'popup\', \'popup_drag\', \'popup_exit\', \'mouse\', -10, -5);" width=\'16\' height=\'16\' />
</form>**
</td>';
echo '<td>' . $row['schedule'] . '</td>';
echo '<td>' . $row['job'] . '</td>';
echo '<td>' . $row['description'] . '</td>';
echo '<td>' . $row['destination'] . '</td>';
echo '<td>' . $row['errormsgs'] . '</td>';
echo '<td>' . $row['jobtype'] . '</td>';
echo '<td>' . $row['catagory'] . '</td>';
echo '<td>' . date('D M d # g:i A', $row['ran_at']) . '</td>';
echo '<td>' . date('D M d # g:i A', tdCron::getNextOccurrence($row['mhdmd'])) . '</td>';
echo "<td><a href='log/" . $row['log'] . "' target='_blank' >View Log</a></td>";
echo '</tr>';
}
echo '</tbody>';
echo "</table>";
echo "</div>";
// ***** Popup Window ****************************************************
echo'<div class="sample_popup" id="popup" style="display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit" src="images/form_exit.png" alt="Close Form" /> Comments
</div>
<div class="menu_form_body">
<form name="up" action="update.php" onsubmit="return validateForm()" method="post" >
<input type="hidden" name="' . $row['job'] . '" />
<table>
<tr>
<td><textarea class="field" onfucus="select();" name="comment" rows="8" cols="44"></textarea>
</tr>
<tr>
<td align="right" ><br /><input class="btn" type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</div>';
require_once('includes/footer.php');
?>
Javascript code start
// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
// Instead, you may link to the homepage of this code:
// http://www.php-development.ru/javascripts/popup-window.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.
// USAGE
//
// function popup_show(id, drag_id, exit_id, position, x, y, position_id)
//
// id - id of a popup window;
// drag_id - id of an element within popup window intended for dragging it
// exit_id - id of an element within popup window intended for hiding it
// position - positioning type:
// "element", "element-right", "element-bottom", "mouse",
// "screen-top-left", "screen-center", "screen-bottom-right"
// x, y - offset
// position_id - id of an element relative to which popup window will be positioned
// ***** Variables *************************************************************
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
// ***** popup_mousedown *******************************************************
function popup_mousedown(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ***** popup_mousedown_window ************************************************
function popup_mousedown_window(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
if ( ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
// ***** popup_mousemove *******************************************************
function popup_mousemove(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
if (!popup_dragging) return;
element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ***** popup_mouseup *********************************************************
function popup_mouseup(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (!popup_dragging) return;
popup_dragging = false;
if (ie)
document.onselectstart = popup_oldfunction;
else document.onmousedown = popup_oldfunction;
}
// ***** popup_exit ************************************************************
function popup_exit(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.display = 'none';
}
// ***** popup_show ************************************************************
function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
var element = document.getElementById(id);
var drag_element = document.getElementById(drag_id);
var exit_element = document.getElementById(exit_id);
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
element.style.position = "absolute";
element.style.display = "block";
if (position == "element" || position == "element-right" || position == "element-bottom")
{
var position_element = document.getElementById(position_id);
for (var p = position_element; p; p = p.offsetParent)
if (p.style.position != 'absolute')
{
x += p.offsetLeft;
y += p.offsetTop;
}
if (position == "element-right" ) x += position_element.clientWidth;
if (position == "element-bottom") y += position_element.clientHeight;
element.style.left = x+'px';
element.style.top = y+'px';
}
if (position == "mouse")
{
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
element.style.top = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
}
if (position == "screen-top-left")
{
element.style.left = (document.documentElement.scrollLeft+x)+'px';
element.style.top = (document.documentElement.scrollTop +y)+'px';
}
if (position == "screen-center")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
}
if (position == "screen-bottom-right")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth ) +x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight) +y)+'px';
}
drag_element['target'] = id;
drag_element.onmousedown = popup_mousedown_window;
exit_element.onclick = popup_exit;
}
// ***** Attach Events *********************************************************
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
END Javascript CODE
CSS Code Start
div.sample_popup { z-index: 1; }
div.sample_popup div.menu_form_header
{
border: 1px solid black;
border-bottom: none;
width: 400px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('../images/form_header.png') no-repeat;
text-decoration: none;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #FFFFFF; /*#206040;*/
cursor: default;
}
div.sample_popup div.menu_form_body
{
width: 400px;
height: 200px;
border: 1px solid black;
background: url('../images/form.png') no-repeat left bottom;
}
div.sample_popup img.menu_form_exit
{
float: right;
margin: 4px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup table
{
width: 100%;
border-collapse: collapse;
}
div.sample_popup th
{
width: 1%;
padding: 0px 5px 1px 0px;
text-align: left;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #004060;
}
div.sample_popup td
{
width: 99%;
padding: 0px 0px 1px 0px;
}
div.sample_popup form
{
margin: 0px;
padding: 8px 10px 10px 10px;
}
div.sample_popup input.field
{
width: 95%;
border: 1px solid #808080;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
div.sample_popup input.btn
{
margin-top: 2px;
border: 1px solid #808080;
background-color: #DDFFDD;
font-family: Verdana, Sans-Serif;
font-size: 11px;
}
CSS CODE END
You're using a JS/CSS popup, so just pass $row['job'] in your call to popup_show() (assuming you are able to modify or overload that JS function), and then populate it in the hidden field of your popup HTML with Javascript. The way you're doing it now, you'd have to duplicate the block of Popup HTML once for each row in your resultset for it to work.