CODEWITHSUNDEEP
phpjqueryhtmlajaxvariables
Yousuf Memon
Yousuf Memon

Reputation: 4798

Getting separate PHP variables using jQuery Ajax

My script.js performs a request to get_all.php which has three variables to output (echo) $all_categories, $all_brands and $all_filters. Now I want to manipulate these in three different areas in my index.html.

I want to place $all_categories in <div id="caregories">, $all_brands in <div id="vrands"> and $all_filtesr in <div id="filters">.

How can I place them separately in each div ? I know how to place all of them in one <div> but have no idea how to place each variable, received, separately.

index.php

<?php // Startup ?>

<?php 

    define('APP_PATH', '../');
    define('SYS_PATH', '../system/');
    define('STYLES', 'assets/styles/');
    define('SCRIPTS', 'assets/scripts/');

    require_once SYS_PATH . 'initializers/all.php'; 

?>

<?php // Controller ?>

<?php



?>

<?php // Viewer ?>

<?php template('header'); ?>

<body>

<div id="static_menu">
    <ul>
        <li><a href="#categories">Categories</a></li>
        <li><a href="#brands">Brands</a></li>
        <li><a href="#filters">Filters</a></li>
        <li><a href="#social">Social</a></li>
    </ul>
</div>
<hr>
<div id="categories">
    <ul></ul>
</div>
<hr>
<div id="brands">
    <ul></ul>
</div>
<hr>
<div id="filters">
    <ul></ul>
</div>
<hr>
<div id="social">
    <ul></ul>
</div>
<hr>

</body>

<?php template('footer'); ?>

script.js

// DOM ready
$(function(){

    // get categories, brands, filters and social
    $.ajax({
        type: "POST",
        url: "get_all.php"
    }).done(function(data){
        // manipulate recieved in three different divs
    })

});

get_all.php

<?php // Startup ?>

<?php 

    define('APP_PATH', '../');
    define('SYS_PATH', '../system/');
    define('STYLES', 'assets/styles/');
    define('SCRIPTS', 'assets/scripts/');

    require_once SYS_PATH . 'initializers/all.php'; 

?>

<?php // Controller ?>

<?php

$result_arr = $category->select_all();
$all_categories = $html->list_anchor_loop($result_arr, 'category');
echo $all_categories

$result_arr = $brand->select_all();
$all_brands = $html->list_anchor_loop($result_arr, 'brand');
echo $all_brands;

$result_arr = $filter->select_all();
$all_filters = $html->list_anchor_loop($result_arr, 'filter');
echo $all_filters;

Upvotes: 2

Views: 949

Answers (3)

pocesar
pocesar

Reputation: 7050

You may use a library that does that automatically, like http://phery-php-ajax.net you may pass JSON data directly from PHP while still manipulating the DOM in order. Phery doesn't work with URLs, but with function callbacks, and you may assign to the DIVs from inside PHP itself, like in your case:

<?php

Phery::instance()->set(array(
    'get_all' => function($data){
       /* globals, initialization, etc*/
       $r = new PheryResponse;
       $result_arr = $category->select_all();
       return 
         $r
         ->jquery('#categories')->html($html->list_anchor_loop($result_arr, 'category'))
         ->jquery('#filter')->html($html->list_anchor_loop($result_arr, 'filter'))
         ->jquery('#brand')->html($html->list_anchor_loop($result_arr, 'brand'));

    }
))->process();

Then call the get_all function from your DOMReady

$(function(){
  phery.remote('get_all');
});

Done, everything gets filled for you, without any extra client-side code.

Upvotes: 0

Samuel Cook
Samuel Cook

Reputation: 16828

If your ajax call returns through JSON, it is quiet easy to insert the data into the divs you need:

PHP

<?php
$return = array(
    'categories'=>$all_categories,
    'vrands'=>$all_brands,
    'filters'=>$all_filters
    );
echo $_GET['jsoncallback'].'('.json_encode($return).')';?>

JQuery:

<script type="text/javascript">
$.getJSON("URL_TO_PHP?jsoncallback=?",{
    /*DATA TO SEND*/
    },function(response){
        $('#categories').html(response.categories);
        $('#vrands').html(response.vrands);
        $('#filters').html(response.filters);

});
</script>

Upvotes: 1

Ayush
Ayush

Reputation: 42450

Have your PHP script send the result as a JSON object (see json_encode).

In your JS, you'll receive an object, say resp, which will have three properties, resp.categories, resp.filters and resp.brands

For more details and specificity, post some code.

In get_all.php :

$result = array(
  'categories' => $all_categories,
  'brands' => $all_brands,
  'filters' => $all_filters
);

echo json_encode($result);

In script.js

$.ajax({
    type: "POST",
    url: "get_all.php",
    dataType : 'json', //specify that data will be returned as JSON
}).done(function(data){
    // use data.categories, data.brands, data.filters here
    // manipulate recieved in three different divs
})

Upvotes: 7

Related Questions