I'm trying to make a Chat Room using PHP ( It is working BTW ), but only the messages are displaying, not their usernames. I have created the Databases for them, username and msg. I don't know why their usernames aren't displaying
<? php
//$uname = $_REQUEST['uname'];
//$msg = $_REQUEST['msg'];
$uname = (isset($_REQUEST['uname']) ? $_REQUEST['uname'] : '');
$msg = (isset($_REQUEST['msg']) ? $_REQUEST['msg'] : null);
$con = mysql_connect('localhost', 'root', '');
mysql_select_db('chatbox', $con);
mysql_query("INSERT INTO logs (`username` , `msg`) VALUES ('$uname', '$msg')");
$result1 = mysql_query("SELECT * FROM logs ORDER by id DESC");
while ($extract = mysql_fetch_array($result1)) {
echo "<span class = 'uname'>".$extract['username'].
"</span>: <span class = 'msg'> ".$extract['msg'].
"</span><br/>";
}
?>
<?php $con=mysql_connect('localhost',
'root',
'');
mysql_select_db('chatbox',
$con);
$result1=mysql_query("SELECT * FROM logs ORDER by id DESC");
while($extract=mysql_fetch_array($result1)) {
echo"<span class = 'uname'>" . $extract['username'] ."</span>: <span class = 'msg'> " . $extract['msg'] ."</span><br/>";
}
?>
<?php ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style>
* {
margin: 0;
}
body {
padding-right: 250px;
padding-left: 250px;
margin: 0;
background-color: darkkhaki;
}
textarea {
resize: none;
width: 100%;
height: 300px;
background-color: #efefef;
}
a {
background-color: cadetblue;
padding: 15px 25px 15px 25px;
text-decoration: none;
color: white;
}
a:hover {
background-color: chartreuse;
}
</style>
</head>
<body>
<form name="form1">
Enter your Username
<input type="text" name="uname">
<br/>Enter your Message
<br/>
<textarea name="msg"></textarea>
<br/>
<br/>
Send
<br/>
<br/>
<div id="chatlogs">
Loading Chat...
</div>
</form>
<script>
function submitChat() {
if (form1.uname.value == '' || form1.msg.value == '') {
alert('Please Input Username and Message');
return;
}
var uname = form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'insert.php?uname' + uname + '&msg=' + msg, true);
xmlhttp.send();
}
</script>
</body>
</html>
. Feel free to point out the mistakes.
Replace
insert.php?uname
with
insert.php?uname=
Updated Code:
xmlhttp.open('GET', 'insert.php?uname=' + uname + '&msg=' + msg, true);
You are not inserting uname
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
}
}
?>
This question already has answers here:
Why shouldn't I use mysql_* functions in PHP?
(14 answers)
Closed 3 years ago.
I have a little problem with Ajax and MySQL in my application.
My application it is a some thing like user manager. I have MySQL database with ID, USERNAME, PASSWORD, FIRST_NAME, LAST_NAME and EMAIL field.
I made list of users pagination 10 records per page. And now I'm trying to make functionality for adding new users, editing existing users and to delete users one by one.
I have next code:
Config.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "password";
$mysql_database = "mybase";
$con = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps error! occurred");
mysql_select_db($mysql_database, $con) or die("Opps error! occurred");
?>
This is database connection
**
index.php
**
<?php
include('config.php');
$per_page = 3;
//getting number of rows and calculating no of pages
$sql = "select count(*) from users";
$result = mysql_query($sql);
$count = mysql_fetch_row($result);
$pages = ceil($count[0]/$per_page);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Users Manager</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="pagination.js"></script>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading {
width: 100%;
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div align="center">
<div style="margin-top:50px;"><b>Title</b>: users Manager</div>
<div id="content" ></div>
<table width="800px">
<tr><Td>
<ul id="pagination">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</Td>
</tr></table>
<div id="loading" ></div>
</div>
</body>
</html>
**
data.php
**
<?php
include('config.php');
$per_page = 10;
if($_GET)
{
$page=$_GET['page'];
}
//getting table contents
$start = ($page-1)*$per_page;
$sql = "select * from users order by id limit $start,$per_page";
$rsd = mysql_query($sql);
if(isset($_POST['buttonsave'])){
$query_sql = "INSERT INTO users (username,firstname,lastname,email) VALUES ('{$_POST[username]}','{$_POST[firstname]}','{$_POST[lastname]}','{$_POST[email]}')";
$result = mysql_query($query_sql);
if($result){
echo "Successful insert";
}
}
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<table id="tbl">
<th>User Name:<input type="text" id="username" name="username" placeholder="User"></th>
<th>First Name:<input type="text" id="firstname" name="firstname" placeholder="First Name"></th>
<th>Last Name:<input type="text" id="lastname" name="lastname" placeholder="Last Name"></th>
<th>E-mail:<input type="email" id="email" name="email" placeholder="Email"></th>
</table>
<input type="button" value="Insert" id="save">
<script type="text/javascript">
$(function(){
$("#save").click(function(){
var uname = $("#username").val();
var fname = $("#firstname").val();
var lname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url: "data.php",
type: "POST",
async: true,
data: {
buttonsave: 1,
username: uname,
firstname: fname,
lastname: lname,
email: email
},
success: function(result){
alert("OK! Good!");
}
});
});
});
</script>
<table id="tbl">
<th><b>Id</b></th>
<th><b>User Name</b></th>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th><b>E-mail</b></th>
<?php
while($row = mysql_fetch_array($rsd))
{
$id = $row['id'];
$uname = $row['username'];
$fname = $row['first_name'];
$lname = $row['last_name'];
$email = $row['email'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $uname; ?></td>
<td><?php echo $fname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $email; ?></td>
</tr>
<?php
} //End while
?>
</table>
<style>
#tbl
{
width:800px;
border:1px solid #2E8AE6;
margin-top:50px;
}
#tbl tr:nth-child(odd) {
background: #C2E0FF;
}
#tbl td{
border:1px solid #2E8AE6;
padding: 5px;
}
#tbl th
{
background: #2E8AE6;
border:1px solid #2E8AE6;
padding: 5px;
}
</style>
and my jQuery file:
**
pagination.js
**
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("data.php?page=" + pageNum, Hide_Load());
});
});
So the problem is in my data.php.
I tried to insert data using ajax, but it does't work!
And it insert nothing to database.
But it alerts me
alert("OK! Good!");
I can't understand that is wrong. Please help.
if(isset($_POST['buttonsave'])){
$query_sql = "INSERT INTO users (id,username,first_name,last_name,email) VALUES ('','$_POST[username]','$_POST[firstname]','$_POST[lastname]','$_POST[email]')";
$result = mysql_query($query_sql);
if($result){
echo "Successful insert";
}
what i want is when a user clicks a link it should automatically create two text box's at a time and from which we can click and create unlimited numbers of textboxs which when submitted it should save all the dynamically created textbox two text box's in a row.
meaning textboxA textboxB
in this manner......
I found a code on net which works very similar to that how i wanted...but instead of two textboxs it creates only one textbox at a time when clicked the link First i'll give u the full original code...
1) index.php
<?php
//Include the database class
require("classes/db.class.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<strong>Link #' + count + '</strong><br />'
+ '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
});
});
</script>
<body>
<?php
//If form was submitted
if (isset($_POST['btnSubmit'])) {
//create instance of database class
$db = new mysqldb();
$db->select_db();
//Insert static values into users table
$sql_user = sprintf("INSERT INTO users (Username, Password) VALUES ('%s','%s')",
mysql_real_escape_string($_POST['name']),
mysql_real_escape_string($_POST['password']) );
$result_user = $db->query($sql_user);
//Check if user has actually added additional fields to prevent a php error
if ($_POST['fields']) {
//get last inserted userid
$inserted_user_id = $db->last_insert_id();
//Loop through added fields
foreach ( $_POST['fields'] as $key=>$value ) {
//Insert into websites table
$sql_website = sprintf("INSERT INTO websites (Website_URL) VALUES ('%s')",
mysql_real_escape_string($value) );
$result_website = $db->query($sql_website);
$inserted_website_id = $db->last_insert_id();
//Insert into users_websites_link table
$sql_users_website = sprintf("INSERT INTO users_websites_link (UserID, WebsiteID) VALUES ('%s','%s')",
mysql_real_escape_string($inserted_user_id),
mysql_real_escape_string($inserted_website_id) );
$result_users_website = $db->query($sql_users_website);
}
} else {
//No additional fields added by user
}
echo "<h1>User Added, <strong>" . count($_POST['fields']) . "</strong> website(s) added for this user!</h1>";
//disconnect mysql connection
$db->kill();
}
?>
<?php if (!isset($_POST['btnSubmit'])) { ?>
<h1>New User Signup</h1>
<form name="test" method="post" action="">
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<div class="spacer"></div>
<label for="name">Password:</label>
<input type="text" name="password" id="password" />
<div class="spacer"></div>
<div id="container">
<p id="add_field"><span>» Add your favourite links.....</span></p>
</div>
<div class="spacer"></div>
<input id="go" name="btnSubmit" type="submit" value="Signup" class="btn" />
</form>
<?php } ?>
</body>
</html>
2) db.class.php
<?php
class mysqldb {
/*
FILL IN YOUR DATABASE DETAILS BEFORE RUNNING THE EXAMPLE
*/
var $hostname = "localhost";
var $username = "root";
var $password = "mypassword";
var $database = "unlimited";
function db_connect() {
$result = mysql_connect($this->hostname,$this->username,$this->password);
if (!$result) {
echo 'Connection to database server at: '.$this->hostname.' failed.';
return false;
}
return $result;
}
function select_db() {
$this->db_connect();
if (!mysql_select_db($this->database)) {
echo 'Selection of database: '.$this->database.' failed.';
return false;
}
}
function query($query) {
$result = mysql_query($query) or die("Query failed: $query<br><br>" . mysql_error());
return $result;
mysql_free_result($result);
}
function fetch_array($result) {
return mysql_fetch_array($result);
}
function num_rows($result) {
return mysql_num_rows($result);
}
function last_insert_id() {
return mysql_insert_id();
}
function kill() {
mysql_close();
}
}
?>
3) css.css
html, input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em;}
body { width: 500px; margin: 50px auto 0 auto; display: block;}
h1 { font-size: 1.5em; color: #333; }
input { font-size: 0.9em; padding: 5px; border: 1px solid #ccc; margin: 0; display: block;}
a { text-decoration: none; color: #666; font-weight: bold; }
a:hover { color: #ff0000; }
#divTxt { width:400px; padding: 5px; }
p a img { border: none; vertical-align: middle; }
.spacer {clear: both; height: 10px; }
.btn { width: 90px; font-weight: bold; }
#container { border: 1px solid #ccc; padding: 2px; }
.clear {overflow: hidden;width: 100%;
}
4) JQUERY.js
With this code i am only allowed to dynamically create one textbox when clicked the link as i said earlier, so to make it for my use as i wanted to have two textbox's i have edited the jquery part in the index.php page as below...
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<strong>Link #' + count + '</strong><br />'
+ '<label for="fields[]' + '">Colour</label><input id="field_' + count + '" name="fields[]' + '" type="text" /><label for="fields2[]' + '">Quantity</label><input id="field2_' + count + '" name="fields2[]' + '" type="text" /><br />');
});
});
</script>
Till here i am successfull... but the main problem is I cannot save them both the two textbox's in a row in mysql table..
Please review this code and reply me if u get any answers.....
I'll surely click the green arrow for the working answer as accepted answer..
Please HELP guys......
Try this
jQuery
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<strong>Link #' + count + '</strong><br />'
+ '<label for="field_'+count+'_1">Name</label><input id="field_'+count+'_1" name="fields[]['name']" type="text" /><label for="field2_'+count+'_2">URL</label><input id="field2_'+count+'_2" name="fields[]['url']" type="text" /><br />');
});
});
</script>
PHP
//Insert into websites table
$sql_website = sprintf("INSERT INTO websites (Website_Name,Website_URL) VALUES ('%s','%s')",
mysql_real_escape_string($value['name']),
mysql_real_escape_string($value['url']) );
$result_website = $db->query($sql_website);
$inserted_website_id = $db->last_insert_id();
I am assuming that the 1st column is Website_Name and the 2nd column is Website_URL
P.S. : You've said it creates two text boxes, which means there should be two table fields where you want to add those two values. But in your MySQL query, there is only one column insert.
"INSERT INTO websites (Website_URL) VALUES ('%s')"
Specify the 2nd column name to answer your question correctly.
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.