CODEWITHSUNDEEP
phpjqueryhtmlajaxjson
Akira Dawson
Akira Dawson

Reputation: 1267

How to update dynamically populated content with AJAX

I have some code which populates like so:

<select class="form-control" name="accommodation_ID" id="accommodation_ID">
    <option value="-1">-- Please Select --</option>
    <?php
        $AccomodationID = 13; //For testing purposes
        $accommodation_query = mysqli_query($conn,"SELECT ENTITIES.LastName, 
                               ACCOMMODATION.AccomodationID, ACCOMMODATION.PUPoint 
                               FROM ACCOMMODATION, ENTITIES WHERE ENTITIES.Entity_ID = 
                               ACCOMMODATION.Entity_ID")
                                    or die("Error: ".mysqli_error($conn));  
        while($accommodation_Results = mysqli_fetch_array($accommodation_query)){
            if($accommodation_Results['AccomodationID'] == $AccomodationID){
                echo '<option selected value="'.$AccomodationID.'">'.$accommodation_Results['LastName'].'</option>';
                $PUPoint = $accommodation_Results['PUPoint'];
            }
            else{
                echo '<option value="'.$AccomodationID.'">'.$accommodation_Results['LastName'].'</option>';
            }
        }
   ?>
   </select>
   <label>Pick Up Point</label>
   <input type="text" name="PUPoint" readonly value="<?php echo $PUPoint; ?>">

This code works no problem, it checks the database and looks for a match, if it does, set is as the selected option, grab the PUPoint (Pickup point) variable and store it in the input field.

My problem now, is when I go to select a different option from the dropdown list, the pickup point input field doesn't update anymore. This is what I had, working before I implemented the above:

j$('select[name=accommodation_ID]').change(function(event) {
    event.preventDefault();
    var accommodationID = j$(this).val();
    post_data = {'accommodation_ID':accommodationID};
    var data = {
        "action": "Accommodation_Details"
    };
    data = j$(this).serialize() + "&" + j$.param(data);

    j$.ajax({
      type: "POST",
      dataType: "json",
      url: "../include/booking_Modify.php", 
      data: data,
      success: function(data) {
          j$('input[name=PUPoint]').val( data["PUPoint"] );
      },
      error: function (request) {
          console.log(request.responseText);
      }   
    });
});

booking_Modify.php

//checks and switch statement related code

$return = $_POST;
$return["accommodation_ID"] = $_POST["accommodation_ID"];
$return["SQL"] = "SELECT * FROM ACCOMMODATION WHERE AccommodationID = ".$_POST["accommodation_ID"]."";
$query = mysqli_query($conn,"SELECT * FROM ACCOMMODATION WHERE AccomodationID = ".$_POST["accommodation_ID"]."")
    or die("Error: ".mysqli_error($conn));
$row = mysqli_fetch_array($query);
$return["PUPoint"] = $row["PUPoint"];
$return["json"] = json_encode($return);
echo json_encode($return);

I've done some echoing/console.log and noticed that it's always passing the same Accommodation ID number (13) into booking_Modify.php. It doesn't change when I select a different option now. I don't know if it's because of the "selected" attribute applied to the option element now. Any ideas would be greatly appreciated

Upvotes: 0

Views: 49

Answers (1)

Œlrim
Œlrim

Reputation: 545

You have defined your $AccomodationID = 13; //For testing purposes before which is printed in every iteration of the while loop instead of the current ID. Probably you want to write $accommodation_Results['AccomodationID'] as the option value.

Upvotes: 1

Related Questions