...

View Full Version : About to punch a hole in the wall aka onmouseover help plz!



JustinC474
07-28-2009, 12:16 AM
Ok I have no idea what happened, this code was working, brilliantly, and now it just isnt. And it was generating errors for a while (cannot find variable mouseOver/mouseOut) but now it seems as the PHP is ignoring my onmouseover and onclick.

I know this is PHP as well as Javascript but theres more ppl in this forum so i figrue more overall intelligence.

Here is the PHP code


function printJSTable()
{
echo '<script src = "java_script.js"></script>';
echo '<table contentEditable = "true" id = "myTable" class = "halloween" border = "1">';
echo '<tr>';
foreach($this->columns as $header => $order)
{
echo '<th>';
echo $header;
echo '</th>';
}
echo '</tr>';
$counter = 0;
for($i = 0; $i < $this->numRows; $i++)
{
echo '<tr >';
foreach($this->data[$i] as $key => $value)
{
//HERES THE PROBLEM LINE
echo '<td id ="'.$counter.'" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)" onclick = "changeInfo(id\
)">';
//ABOVE THIS COMMENT
if($value!="")
echo $value;
else
{
echo '';
}
$counter++;
echo '</td>';

}
echo '</tr>';
}
echo '</table>';
}


this is the JS it is supposed to be running


function mouseOver(CaoPhong)
{
CaoPhong.style.backgroundColor = "white";
}

function mouseOut(CaoPhong)
{
CaoPhong.style.backgroundColor = "transparent";
}

function changeInfo(id)
{
var x = document.getElementById(id);
var newInfo = prompt('What do you wish to change the data to?');
if(newInfo!="")
x.innerHTML = newInfo;
}


i have no idea, and im about to loose it. actually im guna go buy a pack of cigarettes before i break any of my bosses stuff.

please if u have any idea whats up id be eternally grateful

VIPStephan
07-28-2009, 12:23 AM
OK, well, it seems to be working for me. It’s maybe the slash in the changeInfo(id\) function?

However, I would really suggest to change the JS a bit. At first you can change the backround color of the cells with CSS (i. e you don’t need JS for that). You’d only need JS for IE 6 which doesn’t support the :hover pseudo class on elements other than links. But anyway, you can still do it with JS but do it like this:


function changeCell() {
var table = document.getElementById('myTable');
var cell = table.getElementsByTagName('td');
for(i=0;i<cell.length;i++) {
cell[i].onmouseover = function() {this.style.background = 'white';}
cell[i].onmouseout = function() {this.style.background = 'none';}
cell[i].onclick = function() {
var newInfo = prompt('What do you wish to change the data to?');
if(newInfo != '') {
this.innerHTML = newInfo;
}
}
}
}
changeCell();

You can now remove all inline event handlers from the table cells (and the IDs if you don’t need them for anything else). You’d probably want to include that script after the table (and don’t forget to set the type to “text/javascript”) so it will be executed only after the table has been created (otherwise it may not find the cells because they haven’t been created yet).

Also your header cell doesn’t match the number of data cells. You should set a colspan to as many columns there are.

JustinC474
07-28-2009, 12:50 AM
no unfortunately not, this isnt on a server yet I'm still running it locally (http://localhost)

boss hasnt had time to set me up on the server yet

Old Pedant
07-28-2009, 02:57 AM
Even if you leave the onmouseover and onmouseout the same, you need to change the onclick. It's silly to pass the id when you could just pass this (as you correctly do for the onmouserover/out!).


echo '<td onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="changeInfo(this)">';

Though I would personally be SORELY tempted to write that as:


for($i = 0; $i < $this->numRows; $i++)
{
echo "<tr>\n";
foreach($this->data[$i] as $key => $value)
{
?>
<td onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="changeInfo(this)">
<?= $value?>
</td>
<?php
}
echo "</tr>\n";
}


In either case, then just rewrite the changeInfo function:


function changeInfo(what)
{
var newInfo = prompt('What do you wish to change the data to?');
if( newInfo != "" ) what.innerHTML = newInfo;
}

Old Pedant
07-28-2009, 02:58 AM
And you can't claim that this is weird and obscure! You said you coded in Java and C++ and surely you would have used this with those languages, no? <snicker/>

JustinC474
07-28-2009, 05:36 PM
Haha yes i am very used to using 'this' from Java and C++ but something im pondering...

so here is changeInfo(id) function


function changeInfo(id)
{
var x = document.getElementById(id);
var newInfo = prompt('What do you wish to change the data to?');
if(newInfo!="")
x.innerHTML = newInfo;
}


if i make the code


echo '<td id = "'.$counter.'" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)" onclick = "changeInfo(id)">';

it works

however, if i replace it with this


echo '<td onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)" onclick = "changeInfo(this)">';

it doesnt replace the cell with the new data (but onclick a prompt window does come up)

This is just quizical, because Its working now, but anyone know why it does that? Id like to understand javascript more instead of just guess and checking everything

MattF
07-28-2009, 06:50 PM
The fact you're referencing an id which no longer exists in your source?

Old Pedant
07-28-2009, 07:43 PM
First of all, if you *MUST* pass the id, then you SHOULD pass it thus:


onclick="changeInfo(this.id)"

When you just pass the bare id value, that's a JavaScript *global* variable and who knows what it might contain at the point in time that the click occurs.

Second of all, if you look at my code, I do *NOT* call getElementById( ) in my version of changeInfo( ). Completely different situation. I rely on you passing me a reference to the actual object, which just using changeInfo(this) does nicely.

Not sure which of those points you missed, so pardon me if I'm being redundant.

VIPStephan
07-28-2009, 08:03 PM
Not sure which of those points you missed, so pardon me if I'm being redundant.

And not sure if y’all missed my contribution but it should do everything you asked for plus it is completely unobtrusive (http://onlinetools.org/articles/unobtrusivejavascript/). What else can you ask for? :D

JustinC474
07-28-2009, 08:42 PM
Stephan I actually did miss your post, which is very helpful. One question tho, which is probably a rookie question but...

where, in my PHP code, would I place the function call to changeCell()? thats something I've been having one of the hardest times with, especially since Ive only programmed straight OOP so its weird for me making a file that isn't necissarily a class but just a collection of functions.

anyways currently I have


function printTable()
{
echo '<script src = "java_script.js"></script>';
echo '<table id = "myTable" class = "halloween" border = "1">';
echo '<tr>';
foreach($this->columns as $header => $order)
{
echo '<th>';
echo $header;
echo '</th>';
}
echo '</tr>';
$counter = 0;
for($i = 0; $i < $this->numRows; $i++)
{
echo '<tr >';
foreach($this->data[$i] as $key => $value)
{
echo '<td id = "'.$counter.'" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)" onclick = "changeInfo(this.id)">';
if($value!="")
echo $value;
else
{
echo '';
}
$counter++;
echo '</td>';

}
echo '</tr>';
}
echo '</table>';
}


where and how would I place the function call to changeCell()? ive tried a couple diffrent things immediately after

echo '</table>';

like


echo '<script type = "text/javascript">';
echo 'changeCell();';
echo '<script>';

and


echo 'changeCell();';

and


echo '<script type = "text/javascript">';
changeCell();
echo '<script>';


anyways, none of those work. any suggestions?

and thnx everybody for the really in-depth responses, its very very very helpful

JustinC474
07-28-2009, 08:47 PM
and all those ends scripts are supposed to be

</script>

just forgot to type it in on here :D

VIPStephan
07-28-2009, 09:02 PM
Well, I assumed the JS you had was in the file java_script.js which you are echoing out before the table. You’d put my code in that file and move the script reference to after the table (yes, right after the closing table tag). The way I’ve written it at first the function is defined (with all the stuff that’s supposed to be executed) and at the bottom the function itself is executed so if you take that code, put it into a file, and put the reference to that file after the table then you shouldn’t have to do anything else.

Something like:


function printJSTable()
{
echo '<table contentEditable = "true" id = "myTable" class = "halloween">';
echo '<tr>';
foreach($this->columns as $header => $order)
{
echo '<th>';
echo $header;
echo '</th>';
}
echo '</tr>';
$counter = 0;
for($i = 0; $i < $this->numRows; $i++)
{
echo '<tr >';
foreach($this->data[$i] as $key => $value)
{
echo '<td>';
if($value!="")
echo $value;
else
{
echo '';
}
$counter++;
echo '</td>';

}
echo '</tr>';
}
echo '</table>';
echo '<script src="java_script.js" type="text/javascript"></script>';
}


(please note that you have to add a colspan to the header cell(s) as much as there are data cells in a row, otherwise the table isn’t complete)

Of course, since this is completely unobtrusive JavaScript you could as well put the script tag in the head of the document. You just need to change it then that the functions are only executed after the page has finished loading (window.onload), and also you should check whether the element with the ID “myTable” actually exists (if(document.getElementById('myTable')) {…}), otherwise you’d get an error if the script is included on a page without that table.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum