SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery how can I populate a list from a PHP loop that writes HTML options from a db?

    The following PHP code populates a dropdown list of Projects. I would like to be able to click on a Project Name in the list and have its corresponding list of Characters appear beside it. How can I tie jquery into this as it's running? All the jquery examples I see are for hard coded HTML data instead of a PHP loop grabbing from a database.

    Code:
    //creates the Project dropdown list
    while ($proj = mysql_fetch_array($project)){
      $id_proj = $proj['projid'];
      $name_proj = htmlspecialchars($proj['projectName']);
      echo "<option name='$id_proj' value='$id_proj'>$name_proj</option>\n";
    }	
    
    //creates the Characters list
    while ($character = mysql_fetch_array($characters)){
     $id_char = $character['id'];
     $name_char = htmlspecialchars($character['charactersName']);
     echo "<div>$name_char</div>";		
    }
    I don't care if it's a clickable list of anchors instead of a dropdown. Also, I don't care whether people have javascript enabled as this is for my personal use.

    Thanks
    Charles

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charles_i View Post
    All the jquery examples I see are for hard coded HTML data instead of a PHP loop grabbing from a database.
    That's due to PHP running on the server, and JavaScript running on the client.
    The PHP code is completely executed and the page is sent to the client. The client then loads up the page at which point JavaScript can be run,

    The two cannot not intermix.

    That being said, what can we help you with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand that's the problem. Is there a way to accomplish this? Have a clickable list on one side (doesn't have to be a dropdown) that populates a list on the other side? Problem is the data is in a database for both lists.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charles_i View Post
    I understand that's the problem. Is there a way to accomplish this? Have a clickable list on one side (doesn't have to be a dropdown) that populates a list on the other side? Problem is the data is in a database for both lists.
    One way is by using the .post() method, where you request the data from a PHP script and once it arrives, update part of the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but Post requires a Submit button and I was trying to be fancy and avoid that. I might just go that way anyway.

  6. #6
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anyone else trying to do this, found it! Scroll down to:

    Allow different bits of HTML to dynamically execute according to which dropdown menu is selected


    Send, pass, get variables with PHP, Form, HTML & JavaScript code

  7. #7
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well almost, here's their code:

    Code:
    <script type="text/javascript">
       function SetHTML2(type) {
       document.getElementById("a2").style.display = "none"
       document.getElementById("b2").style.display = "none"
       document.getElementById("c2").style.display = "none"
       // Using style.display="block" instead of style.display="" leaves a carriage return
      document.getElementById(type).style.display = ""
    }
    </script>
    
    <select onchange="SetHTML2(this.value)">
       <option value="a2">Select 1st</option>
       <option value="b2">Select 2nd</option>
       <option value="c2">Select 3rd</option>
    </select>
    
    <span id="a2" style="display:none">Anything can go here</span>
    <span id="b2" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"></span>
    <span id="c2" style="display:none">...<a href="http://www.skytopia.com">or a link</a>...</span>
    Now I just need to loop through the data in my database with a PHP query put it in a PHP array, pass it to a JS array and then use a PHP query to loop through and write the <span> section.

    Thanks to this code for passing a PHP array to a JS array from Convert PHP array to Javascript array Blog Archive Amoeba Solution Kiosk.

    Code:
    <?php
    $arr = array("a","b","c");
    ?>
    <script>
    var jsArray = ["<?php echo join("\", \"", $arr); ?>"];
    alert(jsArray);
    </script>


Bookmarks

Posting Permissions

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