CODEWITHSUNDEEP
javascriptphpjquerydynamic
ZZZZZZZZZZ
ZZZZZZZZZZ

Reputation: 57

Problems with dynamic dropdown lists using JQuery and PHP

On my path of slowly learning PHP I've decided to work on a dynamic drop down box to create a little find-a-product application for the small company I work for. I took a day to read examples others have put out of their dynamic drop down boxes and decided the method posted on CSS-Tricks was clean and efficient enough.

The problem I'm having is that the Javascript I'm using doesn't seem to be parsing and returning what I want it to. The MySQL query its supposed to build works as expected when I query my database directly (through Heidi) as well as when I load the script directly (explained at the bottom), but using JQuery to pass options through the script doesn't seem to work.

This is the main page with dropdown I'm using to test/build the script

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $("#type").change(function() {
            $("#range").load("dynoptions.php?type=" + $("#type").val());
        }).trigger("change");
    </script>
</head>
<body>
    <select id="type">
        <option selected value="base">Please Select</option>
        <option value="FM800">FM800</option>
        <option value="FS100">FS100</option>
    </select>
    <br>
    <select id="range">
        <option>Please choose from above</option>
    </select>
</body>

When the state of my first dropdown changes the javascript should be sending information to my PHP and receiving html to inject into the second dropdown.

And this is the PHP:

    <?php
        //creates DB connection
        $dbHost = 'localhost';
        $dbUser = 'foxmeter'; 
        $dbPass = 'foxmeter';
        $dbDatabase = 'foxmeter';
        $con = mysql_connect($dbHost, $dbUser, $dbPass) or trigger_error("Failed to connect to MySQL Server. Error: " . mysql_error());

        $result = array;

        mysql_select_db($dbDatabase) or trigger_error("Failed to connect to database {$dbDatabase}. Error: " . mysql_error());

        //prevents injections
        $choice = mysql_real_escape_string($_GET['type']);

        //forms the query
        $query = "SELECT DISTINCT sio FROM meters WHERE series='$choice' ORDER BY sio";

        $result = mysql_query($query);

        while ($row = mysql_fetch_array($result)) {
            echo "<option>" . $row{'sio'} . "</option>";
        }
    ?>

You can test it live at new.foxmeter.com/dynamic.php Also, new.foxmeter.com/dynoptionswithselect.php?type=FM800 is a version of the PHP script with 

<select> and </select>

added before and after the script to test that the script is working (which it is).

Thanks!

Upvotes: 0

Views: 1095

Answers (1)

Ed_
Ed_

Reputation: 19098

The change() listener is never being called, probably because you're trying to register it before the DOM is ready.

What you need to do (and what is generally good practise with javascript) is make sure that the DOM is ready before you execute any script that relies on it.

There are a couple of ways of doing this - one is putting the script at the bottom of the page, but a better (safer) option is to use jQuery's document ready event handler:

$(document).ready(function(){
  //your code here
});

The shorthand for which is:

$(
  function(){
    //your code here
  }
);

So in your case:

<script>
    $(function(){
        $("#type").change(function() {
            $("#range").load("dynoptions.php?type=" + $("#type").val());
        }).trigger("change");
    });
</script>

Upvotes: 1

Related Questions