jquery function access local javascript variable

Question

New to jQuery and having simple yet confusing problem. ha2.

I am writing this normal javascript function with jQuery function reading xml file. How do I assigned value to the prodPrice variable declared on the top? the script keep returning 0 value, but if I alert the value within the jQuery function, I managed to get the value that I wanted.

Thank you guys.

function getPrice(valprodID)
{
    var prodPrice=0;

    jQuery.ajax({
        type: "GET",
        url: "products.xml",
        dataType : "xml",
        success : function(xml)
        {
            jQuery(xml).find('prod').each(function(){
                var prodID = jQuery(this).find('prodID').text();
                if(prodID == valprodID)
                {
                    prodPrice = jQuery(this).find('prodPrice').text(); 
                    return false;
                }
            });                
        }
    })

    return prodPrice;
}

zerkms · Accepted Answer · 2012-06-07 03:43:08Z

2

That's because $.ajax is performed asynchronously.

And it is a great chance for you to learn how to work with $.Deferred

function getPrice(valprodID)
{
    var prodPrice=0;

    return jQuery.ajax({
        type: "GET",
        url: "products.xml",
        dataType : "xml"
    }).pipe(function(xml)
        {
            jQuery(xml).find('prod').each(function(){
                var prodID = jQuery(this).find('prodID').text();
                if(prodID == valprodID)
                {
                    return jQuery(this).find('prodPrice').text(); 
                }
            });                
        });
}

Now you call your getPrice() function in this way:

getPrice(someid).done(function(prodPrice) {
    // do what you need with prodPrice 
});

Here is an example on jsfiddle: http://jsfiddle.net/zerkms/9MgsX/1/

edited Jun 7, 2012 at 3:43

answered Jun 7, 2012 at 3:28

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

3 Comments

Ryan Fernandes Over a year ago

fantastic! But why did you leave the var prodPrice=0 statement in getPrice()?

zerkms Over a year ago

@Ryan Fernandes: actually I couldn't understand what it is for :-S So get some generic answer PS: also added an example

zerkms Over a year ago

@Ryan Fernandes: if you liked the promises I'd suggested you to look at this article joseoncode.com/2011/09/26/… It is amazing

andres descalzo · Accepted Answer · 2012-06-07 03:48:23Z

0

you can do asynchronous as reported by @xdazz, as @zerkms indicated with Deferred, or anonymous functions:

function getPrice(valprodID, fn)
{
    var prodPrice=0;
    jQuery.ajax({
        type: "GET",
        url: "products.xml",
        dataType : "xml",
        success : function(xml)
        {
            jQuery(xml).find('prod').each(function(){
                var prodID = jQuery(this).find('prodID').text();
                if(prodID == valprodID)
                {
                    prodPrice = jQuery(this).find('prodPrice').text(); 
                    fn(prodPrice);
                }
            });                
        }
    })

}

getPrice(1, function(prodPrice) {

   /* your code */

})

answered Jun 7, 2012 at 3:48

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

3 Comments

Papa Shop Over a year ago

yes it works. I can call the function getPrice. As with @zerkms example, the browser keep popping up undefined getPrice function. What is the difference between this two examples?

andres descalzo Over a year ago

the example of "@zerkms" uses Deferred that was implemented in version 1.5 (api.jquery.com/category/deferred-object). my example is more common, use an anonymous function to then call the function "getPrice". you have to know that both are asynchronous because you use $.ajax asynchronously

andres descalzo Over a year ago

@PapaShop in the example that happens to you "zerkms" is used the method "pipe" which is from the version 1.6 (api.jquery.com/deferred.pipe). you have to see what version of jQuery are using. You can use it without method "pipe", here is an example based on the code of "zerkms": jsfiddle.net/adescalzo/9MgsX/4

xdazz · Accepted Answer · 2012-06-07 03:27:42Z

0

You need to set the async option to false, or you should do your work in the callback function.

answered Jun 7, 2012 at 3:27

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

jquery function access local javascript variable

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related