Single Div Refresh With Jquery Ajax And Php

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

Solution 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 ($GroupOptionsas$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 outputvar 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:

<divclass="col-lg-6"id="groupOptions"><labelclass="control-label">Group Options</label><?phpif($GroupOptions): ?><?phpforeach ($GroupOptionsas$optionValue): ?><?phpecho$optionValue['optionName']; ?><?phpendforeach; ?><?phpendif; ?></div>

to

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

</div>

Hope this helps

Solution 2:

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

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

varGroupID = $(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);
      }
    });
    returnfalse;
});

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
}