PHP jQuery AJAX....reload a drop-down once data has been submitted to DB

Question

I am new to PHP and I am trying to learn how to re-populate a dropdown once a new category has been added.

Right now the user can create a new category and a message is sent back on success. I am lost on how to re-populate the drop-down on success.

Here is some related code:

//Handles the submit to DB
    $.post("addHourlyScheduleCB.php", {
            schedule: $("#schedule").val()
            },
        function(list){

        $("#message").removeClass().html(list);


        //inject the latest drop down info
        $("#scheduleSelect").load("scheduleSelect.php");


        $("html,body").animate({scrollTop:0},'slow');
        $.unblockUI()
            }
        );

On success I tried to inject the with a PHP page that pulls the updated data from the DB.

Here is the HTML

<select name="scheduleSelect" id="scheduleSelect">
        <?php 

        while ($row = $db->sql_fetchrow($rateScheduleSQLresult)) { 
        echo "<option  value=".$row['Rate_Schedule_ID'].">$row[schedule]</option>\n"; 
        } 
        ?>
        </select>

Here is the page that is called in the success function of the jQuery:

<?php 
require_once("models/config.php");
$rateScheduleSQL = "SELECT * FROM rateschedules ORDER BY schedule";
$rateScheduleSQLresult = $db->sql_query($rateScheduleSQL);

while ($row = $db->sql_fetchrow($rateScheduleSQLresult)) { 
echo "<option  value=".$row['Rate_Schedule_ID'].">$row[schedule]</option>\n"; 
} 
?>

*EDIT: The initial dropdown shows the expected results. It is one the success of the post that the dropdown shows no results. I believe this is an issue of how I am trying to update the dropdown. I believe there must be a much better way. *

the connection is found in the models/config.php. I don't believe this is the issue. — m_gunns
– m_gunns, Commented Aug 29, 2011 at 0:10

Mike · Accepted Answer · 2011-08-29 01:52:57Z

1

Within your callback, try seeing what is actually returned by the AJAX call. Add console.log(list) to make sure something is returned (this will show in your developer tools/firebug console).

The .load() function is an event handler, it acts when the called-upon element (#scheduleSelect) is loaded, it doesnt populate it with any info.

You want to make another $.post call to get the data from scheduleSelect.php, and populate the dropdown with the callback variable. (try to do a console.log(variable) with the 2nd post)

answered Aug 29, 2011 at 1:52

Mike

78310 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP jQuery AJAX....reload a drop-down once data has been submitted to DB

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related