Getting updated .text() value in jQuery

Question

I'm pretty new to jQuery and am stuck with a particular issue.

So I've written a script to change the text value of spans on a page. e.g. <span class='xxx'>Iamstuck</span> using a php db querying script, triggered when a user mouseenters one of the spans (which works).

Thing is, after the sentence is updated and I attempt to call $(this).text(), it returns me the original text rather than the updated text. How can I get hold of either the updated text?

$('span.xxx').mouseenter(function(){
    var selected = $(this).text();
    var $this = $(this);
    $.get("search.php",
         {term: selected},
         function( data ) {
             $this.text(data);  // this line updates the span text
         });
    var lookup = $(this).text(); // this line returns me the original text instead of the updated text
    console.log("lookup: " + lookup);  // just for debugging
});

Thanks in advance!

`.get()` is asynchronous and you're calling the second .text() call before it's finished. — j08691, Aug 27 '14 at 02:40
You need to move the 2 lines for `var lookup...` and `console.log("lookup...` to be directly after `$this.text(data)` and then change the `lookup` var to `$this` — Adam Merrifield, Aug 27 '14 at 02:40
http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Arun P Johny, Aug 27 '14 at 02:42
thanks for the comments, and the explanation on why my code does not work. — Reuben L., Aug 27 '14 at 02:43

score 1 · Accepted Answer · answered Aug 27 '14 at 02:40

That is because it is AJAX!!!

Do everything inside the complete callback:

$.get("search.php", {
        term: selected
    },
    function(data) {
        $this.text(data); // this line updates the span text
        var lookup = $this.text();
        console.log("lookup: " + lookup); // just for debugging
    })
});

Getting updated .text() value in jQuery

1 Answers1