How to use jquery to show an element after JSON data is sent back to page

Question

On page 1, user clicks an image and a pop-up window allows an image file upload. The PHP page running this echo's back a json_encoded string that will include a variable called 'id'.

Here is an example of the response string:

"{"state":200,"message":null,"result":"..\/0images\/listimg\/mod\/20141215064959.jpeg","id":"570"}"

When the pop-up modal closes, I would like an element (that was previously hidden on page 1) to now be displayed. The element is:

<div class="edit_right">

My logic is to show the element if an 'id' is sent as JSON data, thus if ID is not null, element will show. The JS I am troubleshooting is

    <script>
        $(document).ready(function(){
            $(".edit_right").hide();
        });
    $('#modal').on('hidden.bs.modal', function () {
        function handleResponse(data){
    console.log(data);
    }
        $.getJSON(crop-avatar.php)
            .done(function(data) {
             if (data.id !== null){
              $(".edit_right").show();
             } else {
            $(".edit_right").hide();
            }
         });
       })
    </script>

and is located right before the end body tag. This script doesn't work, the element is always hidden. How can I correct this?

don't forget to run your function .. handleResponse(); – Mohamed-Yousef Dec 15 '14 at 07:20 — Mohamed-Yousef, Dec 15 '14 at 07:20

score 1 · Accepted Answer · answered Dec 15 '14 at 07:16

1

You need to pass the URL into $.getJSON() so it knows what page to retrieve the data from, and I don't know why you're passing data to handleResponse(), it has no effect in that function.

answered Dec 15 '14 at 07:16

Jason Roman

8,146
10
35
40

i changed to this $.getJSON(crop-avatar.php) .done(function(data) { but didn't show element – rhill45 Dec 15 '14 at 07:18
1

When you go to `crop-avatar.php` directly does it return the JSON array you are expecting? Are you sure the function is even being triggered? If you put `alert('here');` in the first line of `handleResponse()`, is it even being called? – Jason Roman Dec 15 '14 at 07:20
i have to run the function – rhill45 Dec 15 '14 at 07:22
1

Right, you want to call the function when your modal closes. – Jason Roman Dec 15 '14 at 07:22
1

Is 'hidden.bs.modal' an event on your modal that you can hook into? Also put surround `crop-avatar.php` with `""`. – Jason Roman Dec 15 '14 at 07:34
i just caught that. And yes I believe so: http://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close – rhill45 Dec 15 '14 at 07:38

score 1 · Answer 2 · answered Dec 15 '14 at 07:21

1

I think the data that returns in handleResponse is a json string so you don't have to do additional getJSON on that. Do

function handleResponse(data){
console.log(data);
}

If it shows a json string then you can take it from there.

answered Dec 15 '14 at 07:21

Sworup Shakya

1,328
3
16
44

score 1 · Answer 3 · answered Dec 15 '14 at 07:23

1

you are not calling $.getJson with a parameter

answered Dec 15 '14 at 07:23

Jerome Anthony

7,823
2
40
31

score 1 · Answer 4 · answered Dec 15 '14 at 07:30

from jQuery docs:

$.getJSON( "ajax/test.json", function( data ) {
    // Do something
});

so what you need to do is:

function handleResponse(data){
   $.getJSON('path/to/your/php-file.php').done(function(data){
        // Do something
    })
}

Also don't forget to call handleResponse()!

How to use jquery to show an element after JSON data is sent back to page

4 Answers4