I have a loop in php and I'm using a js function onclick to get the id from the php loop. I do loop in js to recognize a php dynamic id, but it recognizes the wrong order of the loop item.
Sample php code:
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name=']' id='dm_slider_img_url_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='meta-image-button-$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
Sample js code:
var send_attachment_bkp = wp.media.editor.send.attachment;
for (let ids=1; ids<8; ids++) {
if ($('#meta-image-button-'+ids).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+ids).val(attachment.url);
$('#dm_slider_img_preview_'+ids).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
}
What am I doing wrong?
After looking other questions related to getting id, I figured it out. After calling click function using button class, I stored it as variable and added this variable.
$(document).ready(function() {
var $ = jQuery;
// var ids = 1;
// $(«.set_custom_images»).onclick = function(t) {t.attr(«id»)}
var send_attachment_bkp = wp.media.editor.send.attachment;
if ($("[id^='meta-image-button-']" ).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
var clickedID = this.id;
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+clickedID).val(attachment.url);
$('#dm_slider_img_preview_'+clickedID).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
});
And in php make some changes
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name='' id='dm_slider_img_url_m_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='m_$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_m_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
I hope this will help for someone who searches solution like this
Related
enter image description hereI have a table that displays a list of recipes from a database. Each recipe stores a rating out of 5. If no ratings has been submitted 'Not yet rated' will display. If a recipe has a rating, for example, 3, I would like 3 stars to appear. I have wrote jquery to try to achieve this but it works for the first recipe and not for the rest. For each recipe, more stars are printed. Any ideas where I'm going wrong?
if ($avg !=0)
{
define('RATE_RECIPE_MAX_STAR_RATING', 5);
$contentitems1 = "<form><div class='stars'>";
for ($i = 1; $i <= RATE_RECIPE_MAX_STAR_RATING; $i++)
{
//$contentitems1 .= '<input type="radio" style= "display:none;"
//$contentitems1 .= '<img class="rate_recipe_star" name="star_' . $i . '" id="star_' . $i . '" src="fadedstar.png" width="25" />';
$contentitems1 .= '<span class="fa fa-star-o star" name="star_' . $i . '" id="star_' . $i . '"></span>';
}
"</div></form>";
echo $contentitems1 .="<script type='text/javascript'> paint_the_stars($avg)
</script>";}
echo '<div class="star_' . $avg . '"></div>'?>
function paint_the_stars(howmany) {
var items = new Array();
$(".star").each(function() {
//var star = jQuery(this)
var star = $(this);
console.log(star);
var starno = $(star).attr('id').substring(5);
console.log(starno);
//console.log("Star:"+star);
if (starno <= howmany) {
//console.log("TRUE PRINT A STAR"+starno);
//$(this).attr('src', 'yellowstar.png');
var item = $(this).removeClass("fa-star-o").addClass("fa-star");
items.push(item);
} else {
//return true;
var item = $(this).removeClass("fa-star").addClass("fa-star-o");
items.push(item);
}
if (starno == 5) {
$.each(items, function(){
console.log(this);
$('.star_'+howmany).append(this);
});
return false;
}
})
}
I am attempting to build a website to assist with recording times of events during ems calls. I have replicated our protocols and am using localstorage to record when and what event happens. When the incident is over, all the events that have been clicked are displayed on a report page where the information can be sent via email.
Everything seems to work, however, if another page is opened, the localstorage seem to clear and only the buttons clicked on the most recent page appear. I need every button clicked recorded for the report.
This is my JS:
//GO BACK BUTTON
function goBack() {
window.history.back();
}
// DATE FORMATER
function convertDate() {
var d = new Date();
var a = [(d.getMonth() + 1),
(d.getDate()),
(d.getFullYear()),
].join('-');
var b = [(d.getHours()),
(d.getMinutes()),
(d.getSeconds()),
].join(':');
return (b + ' ' + a);
}
///////////////////button////////////////////////
$(document).ready(function () {
var report = {};
var myItem = [];
$('button').click(function () {
var itemTime = convertDate() + " ___ " ;
var clickedBtnID = $(this).text() + " # " ;
item = {
ITEM: clickedBtnID,
TIME: itemTime ,
};
myItem.push(item);
localStorage.report = JSON.stringify(myItem);
});
});
And this is part of the report page:
<script>
window.onload = function () {
var areport = JSON.stringify(localStorage.report);
console.log(areport);
areport = areport.replace(/\\"/g, "");
areport = areport.replace(/{/g, "");
areport = areport.replace(/}/g, "");
areport = areport.replace(/[\[\]']+/g, "");
areport = areport.replace(/,/g, "");
areport = areport.replace(/"/g, "");
console.log(areport);
document.getElementById('result').innerHTML = areport;
};
</script>
<body>
<div class="container-fluid">
<h1>Report</h1>
<?php
if (isset($_POST["send"])) {
$incident = $_POST['incident'];
$name = $_POST['name'];
$address = $_POST['address'];
$dob = $_POST['dob'];
$gender = $_POST['gender'];
$reportData = $_POST['reportData'];
if ($incident == '') {
echo $incident = 'No incident number entered.';
echo '<br>';
} else {
echo $incident . '<br>';
}
if ($name == '') {
echo $name = 'No name entered.';
echo '<br>';
} else {
echo $name . '<br>';
}
if ($address == '') {
echo $address = 'No address entered.';
echo '<br>';
} else {
echo $address . '<br>';
}
if ($dob == '') {
echo $dob = 'No birthdate entered.';
echo '<br>';
} else {
echo $dob . '<br>';
}
if ($gender == '') {
echo $gender = 'No gender entered.';
echo '<br>';
} else {
echo $gender . '<br>';
}
if ($reportData == null) {
echo $reportData = 'No report entered.';
echo '<br>';
} else {
echo $reportData . '<br>';
}
//mail
$headers = "From: CCEMP.info <ccemlbaw#server237.web-hosting.com> \r\n";
$reEmail = $_POST['reEmail'];
$reEmail1 = $_POST['reEmail1'];
//$areport = json_decode($_POST['localStorage.report']);
$msg = "Incident: " . $incident . "\n" . "Name: " . $name . "\n" . "Address:
". $address . "\n" . "DOB: " . $dob . "\n" . "Gender: " . $gender . "\n" .
$reportData;
mail($reEmail, 'Incident:' . $incident, $msg, $headers);
mail($reEmail1, 'Incident:' . $incident, $msg, $headers);
}//end of submit
?>
Here is a sample button:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">General Truama</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" >Continue Assessment</a>
<a class="dropdown-item" href="GATA.php">Go to Truama</a>
</div>
</div>
Thanks.
You are not using localStorage, just setting .report on global localStorage variable. You would see this issue if you used strict mode ("use strict"; at top of the js file).
instead use:
localStorage.setItem("report", JSON.stringify(myItem));
and to get the item
localStorage.getItem("report");
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
This does not set the item to localStorage. In fact, localStorage.report is undefined.
localStorage.report = JSON.stringify(myItem);
This does.
localStorage.setItem('report', JSON.stringify(myItem));
I wasn't adding the localStorage from the previous page to the new one.
var myItem = [];
$(document).ready(function () {
$('button').click(function () {
var itemTime = convertDate() + " ___ " ;
var clickedBtnID = $(this).text() + " # " ;
var item = {
ITEM: clickedBtnID,
TIME: itemTime ,
};
myItem.push(item);
localStorage.setItem('report', JSON.stringify(myItem));
console.log(myItem);
});
var areport = localStorage.getItem("report");
myItem.push(areport);
});
I have some checkboxes (101) which labels should change based on a select input. The JS I have only runs for one, which is logical. Though I'm not very familiar with jquery functions, I don't know how to proceed for all the 101 checkboxes.
the inputs :
<?php
for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
echo '<div class="each_checkboxes">';
// $j = sprintf('%04u', $i);
echo '<label id="contact" for="checkbox"></label>';
echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';
echo '</div>';
endfor;
?>
the select :
<select id="method" name="server" class="custom-dropdown__select custom-dropdown__select--white" required>
<option value="0" default>Choose server</option>
<option value="server1">server 1</option>
<option value="server2">server 2</option>
</select>
the js :
$(document).ready(function () {
$('#method').change(function () {
var method = $('option:selected').val();
if (method == "server1") {
$('#contact').text("MA" + i);
} else if (method == "server2") {
$('#contact').text("SAS" + i);
}
});
});
You need to use class instead of id, because id should be unique for each element. Try like following.
PHP:
<?php
for ($i = 1; $i < 102; $i++):
echo '<div class="each_checkboxes">';
echo '<label class="contact" for="checkbox'.$i.'"></label>';
echo '<input type="checkbox" name="tape[]" id="checkbox'.$i.'" value=""/>';
echo '</div>';
endfor;
?>
jQuery:
$(document).ready(function () {
$('#method').change(function () {
var method = $('option:selected').val(),
text = "";
if (method == "server1") {
text = "MA";
} else if (method == "server2") {
text = "SAS";
}
$('.contact').each(function (i) {
var value = text + (++i);
$(this).text(value);
$('#' + $(this).attr('for')).val(value);
});
});
});
You are referencing to id attribute in your jQuery selector which will only look for first match in your dom You need to assign a class to your label and reference to that when changing you label text then this will work.
<?php
for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
echo '<div class="each_checkboxes">';
// $j = sprintf('%04u', $i);
echo '<label id="contact" class="contact" for="checkbox"></label>';
echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';
echo '</div>';
endfor;
?>
and in jQuery just use class selector like this;
$(document).ready(function () {
$('#method').change(
function () {
var method = $('option:selected').val();
if (method == "server1") {
$('.contact').text("MA" + i);
} else if (method == "server2") {
$('.contact').text("SAS" + i);
}
});
});
That's it.
Use label class instead of id
<?php
for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
echo '<div class="each_checkboxes">';
// $j = sprintf('%04u', $i);
echo '<label class="contact" for="checkbox"></label>';
echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';
echo '</div>';
endfor;
?>
js code is
$(document).ready(function () {
$('#method').change(
function () {
var method = $('option:selected',this).val();
if (method == "server1") {
$('.each_checkboxes label.contact').html("MA" + i);
} else if (method == "server2") {
$('.each_checkboxes label.contact').html("SAS" + i);
}
});
});
Use "class" for your checkbox's label instead of "id". Basically, "id" of an element should be unique. But class, more than one elements can have the same class.
So, the label should be like this:
<label class="contact" for="checkbox"></label>
Then your onchange method should be like this:
$('#method').change(
function () {
var method = $('option:selected').val();
if (method == "server1") {
$('.contact').text("MA" + i);
} else if (method == "server2") {
$('.contact').text("SAS" + i);
}
});
Can't seem to figure out why I keep getting this ReferenceError: OnLoad is not defined error.
Since the time of my previous commit, I have changed lines 28-30 and that is all.
How can this cause my javascript to not be loaded properly? I have only changed these three lines. I'm certain these lines shouldn't really be related. The Javascript file is identical to the one in the previous commit.
What am I missing?
UserInterface.php - Current Commit
class UserInterface {
var $ParentAppInstance;
function __construct($AppInstance){
$this->ParentAppInstance = $AppInstance;
$this->DrawPageHTML();
$this->DrawDBSetDropdown();
$this->DrawQueryForm();
}
//Override thjis function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){
$CurrDB_Obj = $this->ParentAppInstance->CurrentDBObj; //Line 28
$EncodedFields = json_encode($CurrDB_Obj->GetFields()); //Line 29
echo "<body onload='OnLoad($EncodedFields);'>"; // Line 30
echo '
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./CSS/UserInterface.css">
<div id="DebugOutput"></div>
</body>
';
}
protected function DrawDBSetDropdown(){
echo '<div align="right">';
echo '<select onchange="SwitchDatabaseSet();" name="DBSetList" form="DBSetSelector" id="DBSetSelector">';
$i = 0;
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){/* DO NOTHING. IE. IGNORE IT*/}
else if ($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
else{
//Add the DBSet to the dropdown list.
$i++;
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
echo '</select>';
echo '</div>';
}
protected function DrawQueryForm(){
echo '<form action="DatabaseSearch.php" method="post" accept-charset="UTF-8">';
echo '<div id="QFormBody">';
$NumActiveQBoxes = $this->ParentAppInstance->Config['ApplicationSettings']['NumberDefaultQueryOptions'];
for ($i = 1; $i <= $NumActiveQBoxes; $i++){
echo '<div class="QueryBox" name="QBox_' . $i . '">';
echo '<select name=Field_' . $i . '">';
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT);
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num];
foreach($CurrDBSet_Obj->GetDBSetFields() as $Field){
//echo $Field;
echo '<option>' . $Field . '</option>';
}
echo '</select>';
echo '<input type="text" name="Query_' . $i . '"></input>';
echo '<button class= "RMButton" type="button">-</button>';
echo '</div>';
}
echo '<button type="button" id="add" onclick="AddQueryBox();">+</button>';
echo '<button type="submit" id="submit">SEARCH</button>';
echo '</Form>';
echo '<script src=/GLS_DBSearchProject/JavaScript/UserInterface.js></script>';
}
UserInterface.php - Previous Commit
class UserInterface {
var $ParentAppInstance;
function __construct($AppInstance){
$this->ParentAppInstance = $AppInstance;
$this->DrawPageHTML();
$this->DrawDBSetDropdown();
$this->DrawQueryForm();
}
//Override thjis function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT); //Line 28
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num]; //Line 29
$EncodedFields = json_encode($CurrDBSet_Obj->GetDBSetFields()); //Line 30
echo "<body onload='OnLoad($EncodedFields);'>";
echo '
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./CSS/UserInterface.css">
<div id="DebugOutput"></div>
</body>
';
}
protected function DrawDBSetDropdown(){
echo '<div align="right">';
echo '<select onchange="SwitchDatabaseSet();" name="DBSetList" form="DBSetSelector" id="DBSetSelector">';
$i = 0;
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){/* DO NOTHING. IE. IGNORE IT*/}
else if ($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
else{
//Add the DBSet to the dropdown list.
$i++;
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
echo '</select>';
echo '</div>';
}
protected function DrawQueryForm(){
echo '<form action="DatabaseSearch.php" method="post" accept-charset="UTF-8">';
echo '<div id="QFormBody">';
$NumActiveQBoxes = $this->ParentAppInstance->Config['ApplicationSettings']['NumberDefaultQueryOptions'];
for ($i = 1; $i <= $NumActiveQBoxes; $i++){
echo '<div class="QueryBox" name="QBox_' . $i . '">';
echo '<select name=Field_' . $i . '">';
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT);
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num];
foreach($CurrDBSet_Obj->GetDBSetFields() as $Field){
//echo $Field;
echo '<option>' . $Field . '</option>';
}
echo '</select>';
echo '<input type="text" name="Query_' . $i . '"></input>';
echo '<button class= "RMButton" type="button">-</button>';
echo '</div>';
}
echo '<button type="button" id="add" onclick="AddQueryBox();">+</button>';
echo '<button type="submit" id="submit">SEARCH</button>';
echo '</Form>';
echo '<script src=/GLS_DBSearchProject/JavaScript/UserInterface.js></script>';
}
UserInterface.js
var DBSetFields = [];
var NumQBoxes = 3;
//window.onload = OnLoad();
function OnLoad(Fields){
console.log("OnLoad called");
CloneDBSetFields(Fields);
var RMNodeList = document.getElementsByClassName('RMButton');
for (var i = 0; i < RMNodeList.length; ++i) {
console.log(RMNodeList[i]);
RMNodeList[i].onclick = RemoveQBox; // Calling myNodeList.item(i) isn't necessary in JavaScript
}
}
function JSTEST(){
window.alert("JS Called Successfully!!");
}
function CloneDBSetFields(Fields){
console.log("CloneDBSetFields");
DBSetFields = Fields;
}
function SwitchDatabaseSet(MainPageDoc){
document.getElementById("DebugOutput").innerHTML = "Test";
window.location.replace('/GLS_DBSearchProject/index.php?DBSet=' + document.getElementById("DBSetSelector").value);
console.log(document.getElementById("DBSetSelector").value);
//console.log(document.)
}
function Fields_FOREACH(ELEMENT, INDEX, ARRAY){
console.log("TEST");
var FieldOption = document.createElement('option');
FieldOption.setAttribute('value', ARRAY[INDEX]);
FieldOption.innerHTML = ARRAY[INDEX];
this.appendChild(FieldOption);
}
function AddQueryBox(){
NumQBoxes += 1;
var NewQBox = document.createElement('div');
NewQBox.setAttribute('class', 'QueryBox');
//Create and fill Field Selector dropdown "select" element
var FieldSelector = document.createElement('select');
FieldSelector.setAttribute('name', 'Field_' + NumQBoxes);
//foreach element in Fields
console.log(DBSetFields);
DBSetFields.forEach(Fields_FOREACH, FieldSelector);
//Create and fill
var QueryText = document.createElement('input');
QueryText.setAttribute('type', 'text');
QueryText.setAttribute('name', 'Query_' + NumQBoxes);
//Create "-" Remove button for removing query lines.
var RemoveButton = document.createElement('button');
RemoveButton.innerHTML = "-";
RemoveButton.setAttribute('type', 'button');
RemoveButton.setAttribute('class', 'RMButton');
RemoveButton.addEventListener("click", RemoveQBox);
//Combine the individual elements into a new query box and insert the new query box into the HTML Document
NewQBox.appendChild(FieldSelector);
NewQBox.appendChild(QueryText);
NewQBox.appendChild(RemoveButton);
document.getElementById("QFormBody").insertBefore(NewQBox, document.getElementById("add"));
}
function RemoveQBox(e){
console.log("Remove");
var RemoveButton = this; //this == e.currentTarget
console.log(RemoveButton);
var QBox = RemoveButton.parentNode;
QBox.remove();
NumQBoxes -= 1;
}
EDIT: My Javascript file is not being loaded on the client side (ie. it doesn't show up under "Sources", so I'm not really not sure: Why wouldn't my javascript be loading on the client side?
Hi I have a php script that draws a table subject to certain conditions. When the table is drawn it is inside a div called ‘window’ and the table is called ‘visi’ I then want to use the code below to get the id’s of each cell in the table. I can get the class name no problem but get absolutely nothing from the id. Can anyone give me an idea of what i am doing wrong?. I have tried a similar peice of code on a table that is not inside a div and it works fine. Any help would be great and I hope the code makes sense.
function confirm_allocate() {
var msg = ""
var tab = document.getElementById('visi');
var r = tab.rows.length
for (i=0; i<r; i++){
cc = tab.rows.cells.length
for (col=0; col<cc; col++){
x=document.getElementById('visi').rows.cells;
iden = x[col].className
ref = x[col].id
msg += "Class =" + iden + " /// Id =" + ref + "\r"
}
}
alert (msg )
}
If it helps this is the code to draw the table (but this is called using js/ ajax after getting the information for the table )
<?php
$table = "" ;
include '../database_sql/dbconnect.php' ;
include '../functions/job_details.php';
include '../functions/check_date.php';
include '../functions/stock_list.php' ;
include '../functions/allocated_on_date.php' ;
$jobdate = $_GET['jobdate'] ;
$jobnumber = $_GET['jobnumber'] ;
$jobname = $_GET['jobname'] ;
$screens = screens_per_job($jobnumber,$size) ;
$table = "<h2 align= 'center' > $jobname (Job Number $jobnumber) : Screens required : $screens </h2>" ;
$table .= "<table id='visi' width='480px' align='center' cellspacing='1' cellpadding='1' border='1' ><tr>" ;
// get stock list from DB
stock_list() ;
$len = count( $stock);
$evresult = mysql_query("SELECT * FROM event WHERE jobnumber = '$jobnumber' ") ;
$event_row = mysql_fetch_array($evresult);
for ($counter = 0; $counter < $len; $counter++) {
$item = $stock[$counter] ;
$items = $item . "s" ;
$booked_for_job = $event_row[$items] ;
$result = mysql_query("SELECT * FROM $item ") ;
allocated_on_date($jobdate) ; // function
if ($booked_for_job) {
$count = 1 ;
$table .= "<td >$item<br> [$booked_for_job to Allocate] </td> " ;
WHILE ($row = mysql_fetch_array($result)) { ;
$booked_job = $screens[$item][$count]["job"] ; // from the allocated_on_date($jobdate) function
$description = $row['trailer_id'];
$class = $items ;
$id_items = $items . $count ;
$count ++ ;
if ($booked_job == $jobnumber) { // allocated to current job
$table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")' > " ;
$table .= "$num </div> </td>" ;
} ELSEIF ($booked_job === 0 ) { // available to allocated
$class .= "g" ;
$table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")' > " ;
$table .= "$num </div> </td>" ;
} ELSE { // allocated to ANOTHER job
$class .= "a" ;
$table .= "<td class='truckbox' > <div class='$class' id='$items' > " ;
$table .= "</td> " ;
}
} // while
$table .= "</tr>" ;
} ; // if
}; //for
$table .= "</table> " ;
$table .= "<table width='200px' align='center' cellspacing='12' cellpadding='1' ><tr>" ; // draw table buttons close and allocate
$table .= "</tr><tr>" ;
$table .= "<td class='truckbox' <div class='yesbutton' id='yes' onClick='confirm_allocate()' ; return false ; > ";
$table .= "<td class='truckbox' <div class='nobutton' id='no' onClick='hide()' > ";
$table .= "</tr></table> ";
echo $table ; // finally draw table
include '../database_sql/dbclose.php' ;
?>
I don't see any id attributes on the table cells (td elements) that are being generated. So ref is just going to be blank or undefined.
If that's not the problem then it could be the .rows.cells. Try .getElementsByTagName('td') instead. I think that line should be outside the loop, since it's not changing on each iteration.
Also, the latter part of your HTML is wrong - you don't close the td tag. Instead of <td class='truckbox' <div class... it should be <td class='truckbox'><div class...
You forgot to access the array elements:
...
for (i=0; i<r; i++) {
var row = tab.rows[i];
var cc = row.cells.length;
for (col=0; col<cc; col++){
var x = row.cells[col];
...