-1

I have some jquery code. when a button clicked it is suppose to send a ajax call to the server controller action, fetch some data from there and return it into a 'DIV' with id 'note-popover'.

.on('click.notes', '.pd-notes', function (e) {
        e.preventDefault();
        $.post("a_a/pd_notes", function (data) {
            $("#note-popover").html(data);
        });
        alert("Data Returned" + $("#note-popover").html());
    });

I have tested this code in Chrome Development tool as well, on the first click, it make a call to the server, the alert content however shows empty even though in the DOM the 'DIV' is filled with returned data, however every consecutive call the alert seems to return the data in the alert.

I am new so this may be a stupid question. What is the reason for this behaviour and how to fix it.

Any help is appreciated

Thank you

Saad A
  • 1,135
  • 2
  • 21
  • 46

1 Answers1

0

The data is only valid inside the handler

.on('click.notes', '.pd-notes', function (e) {
        e.preventDefault();
        $.post("a_a/pd_notes", function (data) {
            $("#note-popover").html(data);
            alert("Data Returned" + $("#note-popover").html());
        });
    });

$.post is asynchronous and starts an operation and in your example returns immediately to your alert.

Later the data comes back to the callback function you provided to post.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202