...

View Full Version : Resolved img tag and onclick event



tommycahir
05-04-2009, 03:51 PM
Hi All

Please be gentle on me if this is a silly question but can somebody see any issues with the below:

I am using php to generate a table and its contents from a DN which are then out putted into a div. The issue is when I output an IMG file with an onclick event it doesn't actually do anything when i try click on it.

The PHP code is

echo "<td><img src='images/cancel.png' id = ". $row['Item_No'] . " onClick = 'javascript:deleterecord(this)'></td>";

This outputs the following HTML code

<td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(this)"></td>

Can anybody see why the onclick event is not being called\working with the img tag?

Regards
Tommy

abduraooft
05-04-2009, 04:04 PM
Validate your html markup first using http://validator.w3.org
I don't see any big issues in your output,

<td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(this)"></td> though javascript: is not required.

Are you getting any errors? Get a copy of firebug for your firefox (http://getfirebug.com) (if you haven't one), which will help you to solve the errors in your script, if any.

Bill Posters
05-04-2009, 04:05 PM
The problem may lay in the fact that class names and id values which start with a numeral aren't valid. It may be messing with the browser's perception of the DOM.

Are you referencing the img element's id value after you've passed back the element/object in the js?

Without seeing the js, it's not easy to get where the problem lays.

Link to the page online and those willing/able to help will be able to get a better idea where the problem might stem from.

tommycahir
05-04-2009, 04:10 PM
I am currently developing the page on a wamp server on my machine so I am not able to give an online link.

I have even gone as far as removing all the JS actions and just putting in the following

function deleterecord(value)
{
alert("ppp");
}

I have tried it with and without the javascript: item but it doesnt seem to make a difference.

abduraooft
05-04-2009, 04:20 PM
function deleterecord(value)
{
alert("ppp");
}

I have tried it with and without the javascript: item but it doesnt seem to make a difference. Then there must be some error somewhere in your code. have you tried my other suggestion? Could you post your complete code(html+javascript)?

tommycahir
05-04-2009, 04:28 PM
OK here goes and forgive me for the length of this.

Here is the PHP file that generates the table


<?php
//Start session
session_start();

//Include database connection details
require_once('config.php');

//Array to store validation errors
$errmsg_arr = array();

//Validation error flag
$errflag = false;

//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}

//Select database
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}

//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) {
$str = @trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return mysql_real_escape_string($str);
}

//Sanitize the POST values
$type = clean($_GET['Type']);
$make = clean($_GET['Make']);
$model = clean($_GET['Model']);
$Quantity = clean($_GET['Quantity']);
$comments = clean($_GET['Comments']);
$member = $_GET['Member_ID'];


//Input Validations
if($type == '') {
$errmsg_arr[] = 'Please select a Type';
$errflag = true;
}
if($make == '') {
$errmsg_arr[] = 'Make name missing';
$errflag = true;
}
if($model == '') {
$errmsg_arr[] = 'Model name missing';
$errflag = true;
}
if($Quantity == '') {
$errmsg_arr[] = 'Quantity is Missing';
$errflag = true;
}
if($member == '') {
$errmsg_arr[] = 'Unique Member ID is Missing';
$errflag = true;
}

//Check for valid Member ID
if($member != '')
{
$qry = "SELECT * FROM members WHERE member_id='$member'";
$result = mysql_query($qry);

if($result)
{
if(mysql_num_rows($result) == 0)
{
$errmsg_arr[] = 'Unique Member ID is not Valid, Please Log-out and Try again';
$errflag = true;
}
@mysql_free_result($result);
}
else
{
die("Query failed");
}
}

//If there are input validations, redirect back to the registration form
if($errflag) {
$_SESSION['ERRMSG_ARR'] = $errmsg_arr;
session_write_close();
exit();
}


//Check whether the session variable SESS_ORDERID is EMPTY or not
if(!isset($_SESSION['SESS_ORDERID']))
{
$mysqldate = date('Y-m-d');
$batchqry = "INSERT INTO batch( Member_ID, Date) VALUES('$member', '$mysqldate')";
$batchresult = @mysql_query($batchqry);
$Query_no = mysql_insert_id();
$_SESSION['SESS_ORDERID'] = $Query_no;
}else
{
$Query_no = $_SESSION['SESS_ORDERID'];
}

//Create INSERT query
$qry = "INSERT INTO orders(Type, Make, Model, Quantity, Comments, member_id, Query_No) VALUES('$type','$make','$model','$Quantity','$comments','$member','$Query_no')";
$result = @mysql_query($qry);

$sql="SELECT * FROM orders WHERE member_id = '$member'AND Query_No = '$Query_no' ORDER BY Item_No";
$result2 = mysql_query($sql);

echo "<table border='1' align='center' cellpadding='2' cellspacing='0'>
<tr>
<th>Item No</th>
<th>Type</th>
<th>Make</th>
<th>Model</th>
<th>Quantity</th>
<th>Comments</th>
<th>Action</th>
</tr>";

while($row = mysql_fetch_array($result2))
{
echo "<tr>";
echo "<td>" . $row['Item_No'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "<td>" . $row['Make'] . "</td>";
echo "<td>" . $row['Model'] . "</td>";
echo "<td>" . $row['Quantity'] . "</td>";
echo "<td>" . $row['Comments'] . "</td>";
echo "<td><img src='images/cancel.png' id = ". $row['Item_No'] . " onClick = 'javascript:deleterecord(id)'></td>";
echo "</tr>";
}
echo "</table>";

//Check whether the query was successful or not
if($result) {
exit();
}else {
die("Query failed");
}
mysql_close($link);
?>

here is the HTML form that is used to enter the data into the DB and contains the div "insert_response" where the table is generated


<?php
session_start();

//Check whether the session variable SESS_MEMBER_ID is present or not
if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) {
header("location: access-denied.php");
exit();
}

?>
<!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>Order Form</title>
<link href="loginmodule.css" rel="stylesheet" type="text/css" />
<!-- Include AJAX Framework -->
<script src="ajax/ajax_framework.js" language="javascript"></script>
</head>
<body>
<p>&nbsp;</p>
<?php
if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
echo '<ul class="err">';
foreach($_SESSION['ERRMSG_ARR'] as $msg) {
echo '<li>',$msg,'</li>';
}
echo '</ul>';
unset($_SESSION['ERRMSG_ARR']);
}
?>
<form id="orderform" name="orderform" action="javascript:insert()">
<table width="900" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td><b>*Type</b></td>
<td><SELECT name="Type" id="Type" />
<OPTION value=Sensor>Sensor</OPTION>
<OPTION value=Valve>Valve</OPTION>
<OPTION value=Pump>Pump</OPTION>
<OPTION value=circuit_board>Circuit Board</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td><b>*Make</b></td>
<td><input name="Make" type="text" class="textfield" id="Make" /></td>
</tr>
<tr>
<td><b>*Model</b></td>
<td><input name="Model" type="text" class="textfield" id="Model" /></td>
</tr>
<tr>
<td><b>*Quantity</b></td>
<td><input name="Quantity" type="text" class="textfield" id="Quantity" /></td>
</tr>
<tr>
<td><b>Additional Comments</b></td>
<td><textarea name="Comments" rows="5" cols="40" id="Comments"></textarea></td>
</tr>
<tr>
<td><b>*Unique Member ID</b></td>
<td><input name="Member_ID" type="text" class="textfield" id="Member_ID" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit"/> <input type="reset" value="Clear fields"></td>
</tr>

<tr>
<td COLSPAN=2><br><br><!-- Show Message for AJAX response --> <div id="insert_response"></div></td>
<tr>
<td><br><button type="button" OnClick="parent.location='sendorder-exec.php'">Send completed Order</button></td>
</tr>

</table>
</form>
<br>
<br>
</body>
</html>


and finally here is the ajax file that is called to add entries to the DB\process other DB items in future


/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* -------------------------- */
/* INSERT */
/* -------------------------- */

/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;

function insert()
{
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."

// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var Type = encodeURI(document.getElementById('Type').value);
var Make = encodeURI(document.getElementById('Make').value);
var Model = encodeURI(document.getElementById('Model').value);
var Quantity = encodeURI(document.getElementById('Quantity').value);
var Comments = encodeURI(document.getElementById('Comments').value);
var Member_ID = encodeURI(document.getElementById('Member_ID').value);

// Set te random number to add to URL request
nocache = Math.random();

// Pass the login variables like URL variable
http.open('get', 'order-exec.php?Type='+Type+'&Make='+Make+'&Model='+Model+'&Quantity='+Quantity+'&Comments='+Comments+'&Member_ID='+Member_ID+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}

function checkname()
{
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var login = encodeURI(document.getElementById('login').value);

// Set te random number to add to URL request
nocache = Math.random();

// Pass the login variables like URL variable
http.open('get', 'exisitinguser.php?login='+login+'&nocache = '+nocache);
http.onreadystatechange = insertReplyname;
http.send(null);
}

function deleterecord(value)
{
alert("ppp");
}

function insertReply()
{
if(http.readyState == 4)
{
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = response;
}
}

function insertReplyname()
{
if(http.readyState == 4)
{
var response = http.responseText;
document.getElementById('insert_img').innerHTML = response;
document.getElementById("login").select();
document.getElementById("login").focus();
}
}

There is quiet possibly a better and easier way of achiving what I am looking to do above and if so I would like to get your advice on it.

Regards
Tommy

abduraooft
05-04-2009, 04:31 PM
We can't execute that code at our end. Post the parsed output taken from your browsers' view source option.

tommycahir
05-04-2009, 04:35 PM
here is the output once the table has been generated


<!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>Order Form</title>
<link href="order-form.php_files/loginmodule.css" rel="stylesheet" type="text/css">
<!-- Include AJAX Framework -->
<script src="order-form.php_files/ajax_framework.js" language="javascript"></script>
</head><body>
<p>&nbsp;</p>
<form id="orderform" name="orderform" action="javascript:insert()">
<table align="center" border="0" cellpadding="2" cellspacing="0" width="900">
<tbody><tr>

<td><b>*Type</b></td>
<td><select name="Type" id="Type">
<option value="Sensor">Sensor</option>
<option value="Valve">Valve</option>
<option value="Pump">Pump</option>
<option value="circuit_board">Circuit Board</option>

</select>
</td>
</tr>
<tr>
<td><b>*Make</b></td>
<td><input name="Make" class="textfield" id="Make" type="text"></td>
</tr>
<tr>

<td><b>*Model</b></td>
<td><input name="Model" class="textfield" id="Model" type="text"></td>
</tr>
<tr>
<td><b>*Quantity</b></td>
<td><input name="Quantity" class="textfield" id="Quantity" type="text"></td>
</tr>
<tr>

<td><b>Additional Comments</b></td>
<td><textarea name="Comments" rows="5" cols="40" id="Comments"></textarea></td>
</tr>
<tr>
<td><b>*Unique Member ID</b></td>
<td><input name="Member_ID" class="textfield" id="Member_ID" type="text"></td>
</tr>
<tr>

<td>&nbsp;</td>
<td><input name="Submit" value="Submit" type="submit"> <input value="Clear fields" type="reset"></td>
</tr>

<tr>
<td colspan="2"><br><br><!-- Show Message for AJAX response --> <div id="insert_response"><table align="center" border="1" cellpadding="2" cellspacing="0">
<tbody><tr>
<th>Item No</th>
<th>Type</th>

<th>Make</th>
<th>Model</th>
<th>Quantity</th>
<th>Comments</th>
<th>Action</th>
</tr><tr><td>72</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(id)"></td></tr><tr><td>73</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="73" onclick="javascript:deleterecord(id)"></td></tr><tr><td>74</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="74" onclick="javascript:deleterecord(id)"></td></tr></tbody></table></div></td>
</tr><tr>

<td><br><button type="button" onclick="parent.location='sendorder-exec.php'">Send completed Order</button></td>
</tr>

</tbody></table>
</form>
<br>

<br>



</body><script type="text/javascript"><!--
function __RP_Callback_Helper(str, strCallbackEvent, splitSize, func){var event = null;if (strCallbackEvent){event = document.createEvent('Events');event.initEvent(strCallbackEvent, true, true);}if (str && str.length > 0){var splitList = str.split('|');var strCompare = str;if (splitList.length == splitSize)strCompare = splitList[splitSize-1];var pluginList = document.plugins;for (var count = 0; count < pluginList.length; count++){var sSrc = '';if (pluginList[count] && pluginList[count].src)sSrc = pluginList[count].src;if (strCompare.length >= sSrc.length){if (strCompare.indexOf(sSrc) != -1){func(str, count, pluginList, splitList);break;}}}}if (strCallbackEvent)document.body.dispatchEvent(event);}function __RP_Coord_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Coord_Callback = str;pluginList[index].__RP_Coord_Callback_Left = splitList[0];pluginList[index].__RP_Coord_Callback_Top = splitList[1];pluginList[index].__RP_Coord_Callback_Right = splitList[2];pluginList[index].__RP_Coord_Callback_Bottom = splitList[3];};__RP_Callback_Helper(str, 'rp-js-coord-callback', 5, func);}function __RP_Url_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Url_Callback = str;pluginList[index].__RP_Url_Callback_Vid = splitList[0];pluginList[index].__RP_Url_Callback_Parent = splitList[1];};__RP_Callback_Helper(str, 'rp-js-url-callback', 3, func);}function __RP_TotalBytes_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_TotalBytes_Callback = str;pluginList[index].__RP_TotalBytes_Callback_Bytes = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}function __RP_Connection_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Connection_Callback = str;pluginList[index].__RP_Connection_Callback_Url = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}
//--></script></html>

Not sure where all the stuff after the </body> came from.

Regards
Tommy

tommycahir
05-04-2009, 08:37 PM
Oh good god, I am beginning to hate javascript, ajax and php combo!

I have no idea how but it seems to be running ok now! :eek:

Thanks for all your responses and suggestions, your help is always greatly appreciated

Regards
Tommy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum