pass AJAX response to different divs in html through json encode

Question

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>");

Junius L · Accepted Answer · 2017-05-21 15:57:58Z

2

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

edited May 21, 2017 at 15:57

answered May 21, 2017 at 15:49

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

4 Comments

tabia Over a year ago

@2by2 How it will know that inner1 is a class or id in line $('.coupons').html(res.inner1);

tabia Over a year ago

no error! But not displaying response in divs. I am not sure but i think when i type "off" in my search form. It should return 4 rows with following data. c_description and c_name in 2 divs mentioned above. Is it because i am trying to send multiple rows within 2 divs?

Junius L Over a year ago

how do you get this values in your PHP?

tabia Over a year ago

Let us continue this discussion in chat.

JazZ · Accepted Answer · 2017-05-21 15:59:37Z

2

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.

edited May 21, 2017 at 15:59

answered May 21, 2017 at 15:49

JazZ

4,5792 gold badges24 silver badges43 bronze badges

Comments

dawnfly · Accepted Answer · 2017-05-21 15:42:34Z

0

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

answered May 21, 2017 at 15:42

dawnfly

932 bronze badges

1 Comment

tabia Over a year ago

i want to display inner1 div into coupons div and inner2 div into coupon_im div.

ubm · Accepted Answer · 2017-05-21 16:28:48Z

0

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

edited May 21, 2017 at 16:28

answered May 21, 2017 at 16:08

ubm

63611 silver badges21 bronze badges

Collectives™ on Stack Overflow

pass AJAX response to different divs in html through json encode

4 Answers 4

4 Comments

PHP :

JS :

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

PHP :

JS :

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related