CODEWITHSUNDEEP
phpmysqlajax
xo.
xo.

Reputation: 485

With this AJAX request is it possible to post data to different id's

I currently have an AJAX request which posts data from the database into a <div> tag with the id of result. Within my PHP query I return * the data from my db table module and then return the specific values to a <div> with the id of result. However, is there any way that I can post other data from my PHP statement and fill out various id's within my html?

For example the with the id of result shows the module ID and name, however I wanted to also have another with the id tag of content and return the content data from my db and just send to that id of content Is it possible to fill different with different data with the same AJAX request?

module.php

<div>
    <h1>Welcome to this module</h1>
        <div id="result"> 
        <!-- This is where I currently return the ID and the module name -->
        </div>

        <div id="content">
        <!-- This is where I would like to return other data via the AJAX -->
        </div>
</div>

moduleTestingAJAX.php:

<?php

require 'scripts/db.php';

$moduleID = $_POST['moduleID'];

if(isset($_POST['moduleID']))
{
    $stmt = $conn->prepare ("SELECT * FROM `module` WHERE moduleID = ?");    
    $stmt->bind_param("i", $moduleID);
    $stmt->execute();
    $result = $stmt->get_result();

    while($row = $result -> fetch_assoc()) {

        echo $row['moduleID'].' '.$row['moduleName'];
        }
    }
     ?>
    </div>

script.js:

function getModuleData(moduleID){
    console.log(moduleID);
    $.ajax({  
        url: "moduleTestingAJAX.php",  
        method: "post",   
        data: {moduleID:moduleID},
        success: function(data){  
              $('#result').html(data);    
        }  
    });  

  console.log('test');
}

Screenshot after using Nabil's answer as you can see the returned data is in one line, whereas the content data should be returned to the line below: output

Upvotes: 1

Views: 86

Answers (1)

Nabil
Nabil

Reputation: 355

Send back a json response with key as div id and value as the data need to be populated.

<?php

require 'scripts/db.php';

$moduleID = $_POST['moduleID'];

if(isset($_POST['moduleID']))
{
$stmt = $conn->prepare ("SELECT * FROM `module` WHERE moduleID = ?");    
$stmt->bind_param("i", $moduleID);
$stmt->execute();
$result = $stmt->get_result();
$output = [];
while($row = $result -> fetch_assoc()) {
    $output["result"] = $row['moduleID'].' '.$row['moduleName'];
    $output["content"] = $row["content"];
    }

echo json_encode($output);

}
 ?>
</div>

Using jquery you can populated different divs from the reponse

function getModuleData(moduleID){
    console.log(moduleID);
    $.ajax({  
        url: "moduleTestingAJAX.php",  
        method: "post",   
        data: {moduleID:moduleID},
        success: function(data){  
              $('#result').html(data.result);    
              $('#content').html(data.content);    
        }  
    });  


}

Upvotes: 1

Related Questions