www.webdeveloper.com
Results 1 to 15 of 15

Thread: [RESOLVED] Onclick help

  1. #1
    Join Date
    Jul 2008
    Posts
    196

    resolved [RESOLVED] Onclick help

    I have a php script that connects to a database and makes a list or titles for games. now i want it to allow you to click one and it pull an summary from the database and hook display it.

    PHP Code:
    <?php

    $con 
    mysql_connect(//You don't need to see this.//);
    $id 0;
    if (!
    $con)
        {
        die(
    'Could not connect: ' .mysql_error());
        }

    mysql_select_db("main"$con);

    $result mysql_query("SELECT * FROM main.games");

    while(
    $row mysql_fetch_array($result))
        {
        
    $id 1;
        echo 
    "<div class=title onclick=#sum" $id "style=display: block;>";
        echo 
    "<div id=sum";
        echo 
    $id;
        echo 
    " style=display: none;>";
        echo 
    $row['Summary'];
        echo 
    "</div>";
        echo 
    $row['Name'];
        echo 
    "</div>";
        echo 
    "<br>";
        }
    mysql_close($con)

    ?>
    I don't think this will work but here it is.
    Resistance is futile if < 1Ω

  2. #2
    Join Date
    Aug 2007
    Location
    Leeds, Yorkshire, England
    Posts
    387
    I would create a list of hyperlinks in your while loop that will then pick up the full details from the database.

    If you want to use Javascripts onclick() you could use that in cinjunction with and AJAX call.

  3. #3
    Join Date
    Dec 2009
    Location
    Denmark
    Posts
    240
    This might work better.

    PHP Code:
    echo "<div class='title' onclick='document.getElementById(\"sum".$id."\").style.display=\"block\"'>"
    And it is a vary bad habit NOT to rap HTML in " or '

    For the summary, you could make a new request to the server where you parse an ID on the game selected.
    Last edited by dk_zero-cool; 01-11-2010 at 06:49 PM.

  4. #4
    Join Date
    Jan 2010
    Posts
    84
    The thing is that unless you use AJAX, you can't dynamically read from a MySQL database. I think if you really want to maintain the look, the easiest way would be to load the contents of the database into a JavaScript array, a deal with it from there. JavaScript certainly allows you to update the page dynamically.

    Unless you have a lot of data to load, I'm not sure the extra effort with AJAX would be all that much worth it. If you want to use the onclick="" event handler, then you have to use some kind of JavaScript, but just plain non-AJAX script should work fine for your purposes.

    Maybe something like this (assume we've already loaded the table into $result):

    PHP Code:
    <script type="text/javascript">
    var row_array = [<?php
    while($row mysql_fetch_array($result)) {
         echo 
    "'$row', ";
    }
    ?>''];
    </script>

  5. #5
    Join Date
    Jul 2008
    Posts
    196
    Good idea, dont tell my boss, but this is the first website ive used sql on...
    Resistance is futile if < 1Ω

  6. #6
    Join Date
    Jul 2008
    Posts
    196
    now its only working for the first one, i think i did something wrong with the $id variable, because both links point to the first one.
    Resistance is futile if < 1Ω

  7. #7
    Join Date
    Jan 2010
    Posts
    84
    Quote Originally Posted by Not to mention View Post
    now its only working for the first one, i think i did something wrong with the $id variable, because both links point to the first one.
    I notice that you use "$id + 1;". Did you mean to do "$id++", which increments $id by one? "$id=0; echo $id+1; echo $id;" would output "10", whereas "$id=0; echo $id++; echo $id;" would output "01". That's because "$id+1" simply returns the value of $id plus 1 and takes no further action, whereas $id++ first returns the value of $id, and then performs the operation "$id = $id+1".

  8. #8
    Join Date
    Jul 2008
    Posts
    196
    That worked great thx.
    Resistance is futile if < 1Ω

  9. #9
    Join Date
    Jul 2008
    Posts
    196
    Now i need it to select all divs that start with sum, like getelementbyid, but just as long as it starts with sum, so that i can set them all to display: none; when the user clicks another one.
    Resistance is futile if < 1Ω

  10. #10
    Join Date
    Jan 2010
    Posts
    84
    Not totally sure how to use wildcards in JavaScript, but I found somebody with a similar problem who seems to have gotten lots of advice: http://bytes.com/topic/javascript/an...getelementbyid

  11. #11
    Join Date
    Dec 2009
    Location
    Denmark
    Posts
    240
    Code:
    function changeView(id) {
          var elements = document.getElementsByTagName("div");
          for(var i=0; i<elements.length; i++) {
              if(elements.id.substring(0, 3) == "sum" && elements.id != "sum"+id) {
                   elements.style.display = "none";
    
              }else if(elements.id == "sum"+id) {
                   elements.style.display = "block";
              }
          }
    }
    Last edited by dk_zero-cool; 01-12-2010 at 02:34 AM.

  12. #12
    Join Date
    Jul 2008
    Posts
    196
    Man. This is getting fun. Zero cool, your code did not work, mut im only assuming i used it right.

    PHP Code:
    <?php 

    $con 
    mysql_connect"localhost""brian"""); 
    $id 0
    if (!
    $con
        { 
        die(
    'Could not connect: ' .mysql_error()); 
        } 

    mysql_select_db("main"$con); 

    $result mysql_query("SELECT * FROM main.games"); 

    while(
    $row mysql_fetch_array($result)) 
        { 
        
    $id++;
        echo 
    "<div class='title' onclick='changeView(".$id.")'>"
        echo 
    $row['Name']; 
        echo 
    "<div id=sum".$id." style=display:none>"
        echo 
    $row['Summary']; 
        echo 
    "</div>"
        echo 
    "</div>"
        echo 
    "<br>"
        } 
    mysql_close($con);

    ?>

    <script type=text/javascript>
    function changeView(id) {
          var elements = document.getElementsByTagName("div");
          for(var i=0; i<elements.length; i++) {
              if(elements.id.substring(0, 3) == "sum" && elements.id != "sum"+id) {
                   elements.style.display = "none";

              }else if(elements.id == "sum"+id) {
                   elements.style.display = "block";
              }
          }
    }
    </script>
    Resistance is futile if < 1Ω

  13. #13
    Join Date
    Dec 2009
    Location
    Denmark
    Posts
    240
    First of, please put ' in your HTML
    PHP Code:
    echo "<div id='sum".$id."' style='display:none'>"
    Second, I have made an error. All "elements", accept the declaration line "var elements", needs an array key.

    Code:
    function changeView(id) {
          var elements = document.getElementsByTagName("div");
          for(var i=0; i<elements.length; i++) {
              if(elements[i].id.substring(0, 3) == "sum" && elements[i].id != "sum"+id) {
                   elements[i].style.display = "none";
    
              }else if(elements[i].id == "sum"+id) {
                   elements[i].style.display = "block";
              }
          }
    }
    Third, it's not a demand, but JavaScript functions belongs in the head section of your document.

    In the future, open Firefox and go to "Tools->Error Console".
    Error messages often tells a lot about the problem, or at least where to look and what to look for. A great tool when working with JavaScript.

  14. #14
    Join Date
    Jul 2008
    Posts
    196
    what would i need to do to hide it when the user clicks it a second time?
    Resistance is futile if < 1Ω

  15. #15
    Join Date
    Dec 2009
    Location
    Denmark
    Posts
    240
    Code:
    function changeView(id) {
          var elements = document.getElementsByTagName("div");
          for(var i=0; i<elements.length; i++) {
              if(elements[i].id.substring(0, 3) == "sum" && elements[i].id != "sum"+id) {
                   elements[i].style.display = "none";
    
              }else if(elements[i].id == "sum"+id) {
                   if(elements[i].style.display == "none") {
                         elements[i].style.display = "block";
                   }else {
                         elements[i].style.display = "none";
                   }
              }
          }
    }
    You just add one more condition to the code
    Last edited by dk_zero-cool; 01-12-2010 at 06:17 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles