CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
tabia
tabia

Reputation: 635

pass AJAX response to different divs in html through json encode

I am trying to send AJAX response in 2 different <divs> to display data. This is what i have tried. ANy suggestion please where am i doing wrong?

script 

 $("document").ready(function(){
        $("#search_form").on("submit",function(e) {
            e.preventDefault();
            $.post("result.php?query="+encodeURIComponent($("#list_search").val()),function(data) {
                //$('.coupons').html(data);
                $('.coupons').html($('#inner1' , data).html());
                $('.coupons_im').html($('#inner2' , data).html());
            });
        });

divs

<div class="coupons"></div>
<div class="coupon_im"></div>

php

$res=$row['c_name'];
$res1=$row['c_desription'];
echo json_encode("<div id='inner1'> $res </div> <div id='inner2'>$res1</div>");

Upvotes: 1

Views: 808

Answers (4)

ubm
ubm

Reputation: 636

I hope this changes will helps you

     $("document").ready(function() {
            $("#search_form").on("submit", function (e) {
                e.preventDefault();
                $.post("result.php?query=" + encodeURIComponent($("#list_search").val()), 

function (data) {

                    $('.coupons').html(data.inner1);
                    $('.coupon_im ').html(data.inner2);
                }, "json");
            });
        })

then in PHP

 $res=$row['c_name'];
$res1=$row['c_desription'];
$data['inner1'] = "<div id='inner1'>". $res." </div>";
$data['inner2'] = "<div id='inner1'>". $res1." </div>"
echo json_encode($data);

Upvotes: 0

JazZ
JazZ

Reputation: 4579

You'll have to send an array from php, and then, from JS select the object you want.

PHP :

$res=$row['c_name'];
$res1=$row['c_desription'];
echo json_encode([
    "inner_1" => "<div id='inner1'> $res </div>",
    "inner_2" => "<div id='inner2'>$res1</div>"
]);

JS :

$.post(
    "result.php?query="+encodeURIComponent($("#list_search").val()),
    function(data) {
        $('.coupons').html(data.inner_1);
        $('.coupon_im').html(data.inner_2);
    },
    'json' // tell JS that the php response is json formated
);

Hope it helps.

Upvotes: 2

Junius L
Junius L

Reputation: 16132

Change your json_encode() in PHP to and you have misspelled class in your AJAX coupons_im needs to be coupon_im

echo json_encode(['inner1' => "<div id='inner1'> $res </div>", 'inner2' => "<div id='inner2'>$res1</div>"]);

And Javascript

$("document").ready(function() {
    $("#search_form").on("submit", function (e) {
        e.preventDefault();
        $.post("result.php?query=" + encodeURIComponent($("#list_search").val()), function (data) {
            var res = JSON.parse(data);
            $('.coupons').html(res.inner1);
            $('.coupon_im ').html(res.inner2);
        });
    });
})

Upvotes: 2

dawnfly
dawnfly

Reputation: 93

If I do not misunderstand you. The answer is:
$('.coupons').html(data); $('.coupons_im').html(data);

Upvotes: 0

Related Questions