使用jQuery Ajax和PHP进行单Div刷新

Question

Okay So I have a div on my page that has some code for display option groups in a select input. And then on the other side displaying the options in that group after the selection is made. My html/php code for this is below:

<div class="row">
    <div class="col-lg-6">
        <label class="control-label" for="productOptions">Select your
        product options</label> <select class="form-control" id=
        "productOptions">
            <option>
                Select an Option Group
            </option><?php foreach($DefaultOptions as $option): ?>

            <option value="<?php echo $option['GroupID']; ?>">
                <?php echo $option['GroupName']; ?>
            </option><?php endforeach; ?>
        </select>
    </div>

    <div class="col-lg-6" id="groupOptions">
        <label class="control-label">Group Options</label>
        <?php if($GroupOptions): ?>
        <?php foreach ($GroupOptions as $optionValue): ?>
        <?php echo $optionValue['optionName']; ?> <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

By default on the original page load, $GroupOptions does not exist in the form, because it is set after the user selects the Group they wish to choose from. I call the php script by using ajax to avoid page reload

$("#productOptions").change(function(){

    var GroupID = $(this).val();
    var dataString = 'GroupID=' + GroupID;
    //alert (dataString);return false;
    $.ajax({
      type: "POST",
      url: "#",
      data: dataString,
      success: function() {
        $("#groupOptions").html(dataString);
      }
    });
    return false;
});

Then the ajax goes to a php call that gets the options that match the groups id in the database.

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);
}

Now I want to refresh the div #GroupOptions to display the results from the query above, and make <?php if($GroupOptions): ?> set to true.

I managed to refresh the div with $("#groupOptions").html(dataString); in the success function of the ajax call. But that only returns well the dataString. (obviously). Is there a way to truly refresh just the div. Or a way to pass the info from the php call into the success function?

Answer 1

UPDATE:

You have 4 problems in your current code:

Problem #1 and Problem #2 - In your separate PHP script you are not echoing anything back to the Ajax. Anything you echo will go back as a variable to the success function. Simply the add echo statement(s) according to the format you want. Your 2nd problem is that you are trying to echo it in the HTML part, where $GroupOptions does not even exist (the Ajax simply returns an output from the PHP script, it's not an include statement so your variables are not in the same scope).

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);

    //this is where you want to iterate through the result and echo it (will be sent as it to the success function as a variable)
    if($GroupOptions): 
      foreach ($GroupOptions as $optionValue): 
        echo $optionValue['optionName'];
      endforeach; 
    endif; 
}

In your Ajax, add a variable named data to the success function, which will receive the output from the PHP script. Also notice that your url is incorrect, you need to post to an actual external file such as my_custom_script.php .:

$.ajax({
      type: "POST",
      url: "your_external_script.php",
      data: dataString,
      success: function(data) {
       if (data && data !== '') {
         //data will equal anything that you echo in the PHP script
         //we're adding the label to the html so you don't override it with the new output
         var output = '<label class="control-label">Group Options</label>';
         output += data;
         $("#groupOptions").html(output);
       } else {//nothing came back from the PHP script
         alert('no data received!');
       }
      }
    });

Problem #4 - And on your HTML, no need to run any PHP. Simply change:

<div class="col-lg-6" id="groupOptions">
        <label class="control-label">Group Options</label>
        <?php if($GroupOptions): ?>
        <?php foreach ($GroupOptions as $optionValue): ?>
        <?php echo $optionValue['optionName']; ?> <?php endforeach; ?>
        <?php endif; ?>
    </div>

to

<div class="col-lg-6" id="groupOptions">

</div>

Hope this helps

Answer 2

You have to take the response in yout success callback function and actually give a response in your oho function

$("#productOptions").change(function(){

    var GroupID = $(this).val();
    var dataString = 'GroupID=' + GroupID;
    //alert (dataString);return false;
    $.ajax({
      type: "POST",
      url: "#",
      data: dataString,
      success: function(dataString) {        //take the response here
        // convert dataString to html...
        $("#groupOptions").html(newHtml);
      }
    });
    return false;
});

PHP:

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);
    echo json_encode($GroupOptions );         //give a response here using json
}