Getting separate PHP variables using jQuery Ajax

Question

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;

Ayush · Accepted Answer · 2012-11-11 07:34:05Z

7

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
})

answered Nov 11, 2012 at 7:34

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuel Cook · Accepted Answer · 2012-11-11 07:42:48Z

1

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>

edited Nov 11, 2012 at 7:42

answered Nov 11, 2012 at 7:37

Samuel Cook

16.9k7 gold badges56 silver badges65 bronze badges

Comments

pocesar · Accepted Answer · 2012-11-12 05:06:35Z

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.

Collectives™ on Stack Overflow

Getting separate PHP variables using jQuery Ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related