Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    39
    Thanks
    12
    Thanked 0 Times in 0 Posts

    About to punch a hole in the wall aka onmouseover help plz!

    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
    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
    Code:
    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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:
    Code:
    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.
    Last edited by VIPStephan; 07-27-2009 at 11:58 PM.

  • Users who have thanked VIPStephan for this post:

    JustinC474 (07-28-2009)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    39
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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!).
    Code:
                  echo '<td onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="changeInfo(this)">';
    Though I would personally be SORELY tempted to write that as:
    Code:
            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:
    Code:
    function changeInfo(what)
    {
        var newInfo = prompt('What do you wish to change the data to?');
        if( newInfo != "" ) what.innerHTML = newInfo;
    }

  • Users who have thanked Old Pedant for this post:

    JustinC474 (07-28-2009)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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/>

  • Users who have thanked Old Pedant for this post:

    JustinC474 (07-28-2009)

  • #6
    New Coder
    Join Date
    Jul 2009
    Posts
    39
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Haha yes i am very used to using 'this' from Java and C++ but something im pondering...

    so here is changeInfo(id) function
    Code:
    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
    Code:
    echo '<td id = "'.$counter.'" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)" onclick = "changeInfo(id)">';
    it works

    however, if i replace it with this
    Code:
    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

  • #7
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    The fact you're referencing an id which no longer exists in your source?
    Last edited by MattF; 07-28-2009 at 05:58 PM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    First of all, if you *MUST* pass the id, then you SHOULD pass it thus:
    Code:
    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.

  • Users who have thanked Old Pedant for this post:

    JustinC474 (07-28-2009)

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by Old Pedant View Post
    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. What else can you ask for?

  • #10
    New Coder
    Join Date
    Jul 2009
    Posts
    39
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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
    Code:
    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
    Code:
    echo '<script type = "text/javascript">';
    echo 'changeCell();';
    echo '<script>';
    and
    Code:
    echo 'changeCell();';
    and
    Code:
    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

  • #11
    New Coder
    Join Date
    Jul 2009
    Posts
    39
    Thanks
    12
    Thanked 0 Times in 0 Posts
    and all those ends scripts are supposed to be

    </script>

    just forgot to type it in on here

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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:
    PHP Code:
    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.

  • Users who have thanked VIPStephan for this post:

    JustinC474 (07-28-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •