jQuery access vaules of global variable form one function to another

Question

I am working in jQuery and I have a variable that I declared as global in one function and when I alert it it gives me right result but now I want to access the same variable in another function and alert it in another function it gives me empty result mean I cannot access it over there. I know about the scope of a variable but to overcome it I decleared variable as global but I am still unable to access it.

Here is my first function:

 var employee_email = '';
 function showCustomer()
 {
 // fire off the request to ajax_stufflist.php
request = $.ajax({
    url: "ajax_stufflist.php?"+url,
    type: "post",
    success: function(data){
        if(data != ''){
    var response = $(data).find("#gmp_stuff").html();
    employee_email = $(data).find(".EMP_EMAIL>span").html();
    //alert(employee_email);
    $("#user_responses").html(response);
      $(function() {
            $("#user_responses").dialog({
                dialogClass:'transparent',
                resizable: false,
                draggable: false,
                modal: true,

                width: 1000,
                autoOpen: false,
                overlay: { opacity: 0 }
            });

  $('#user_responses').dialog('open');
  $('#user_responses').css('display','');


    });
        }
  },
    error:function(){
        alert("failure");
        $("#user_responses").html('error occured');
    }
  });

}

In this function the variable employee_email is decleared above the function and I want to access the same variable with value in other function just next to it in same script tag.

function sendEmail(){
alert(employee_email );
request = $.ajax({
    url: "send_email.php?"+employee_email ,
    type: "post",
    success: function(data){
    $("#email_responses").html();


    },
    error:function(){
        alert("failure");
        $("#email_responses").html('error occured');
    }
  });
 }

Kindly tell me what's wrong with it. Thanks in advance for any kind of help.

well ajax is ASYNC.. the only way to get the variable inside sendEmail function is to call it inside the ajax complete of the first one.. and yes YOU DON"T NEED READY FUNCTION INSIDE A FUNCTION CALLBACK — bipen
– bipen, Commented Oct 28, 2013 at 11:33

Ganesh Jadhav · Accepted Answer · 2013-10-28 11:52:06Z

1

This is not a problem of scope. If it would have been, you would have got an error in your console. But you are getting an empty result because either the AJAX call is not complete yet or it has not been able to change the value due to some error there. Try this.
Define:

var flag = false;

Your success function should be:

success: function (data) {
                if (data != '') {
                    var response = $(data).find("#gmp_stuff").html();
                    employee_email = $(data).find(".EMP_EMAIL>span").html();
                    //alert(employee_email);
                    $("#user_responses").html(response);
                    //$(function () {
                    $("#user_responses").dialog({
                        dialogClass: 'transparent',
                        resizable: false,
                        draggable: false,
                        modal: true,

                        width: 1000,
                        autoOpen: false,
                        overlay: { opacity: 0 }
                    });

                    $('#user_responses').dialog('open');
                    $('#user_responses').css('display', '');
                    //});
                    flag = true;
                }
            }

And sendEmail() can be:

function sendEmail(){
    if(flag)
    {
        request = $.ajax({
            url: "send_email.php?"+employee_email ,
            type: "post",
            success: function(data){
                $("#email_responses").html();
            },
            error:function(){
                alert("failure");
                $("#email_responses").html('error occured');
            }
        });
    }
    else
        alert('Sending email is unavailable currently. PLease try after some time.');
}

edited Oct 28, 2013 at 11:52

answered Oct 28, 2013 at 11:36

Ganesh Jadhav

2,8481 gold badge22 silver badges34 bronze badges

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

2 Comments

kwk.stack Over a year ago

yes u are right but in my case its not the correct as first function call is on page load but the second function call is infact on button click after first one loads. so do u think it will work then

kwk.stack Over a year ago

yes u are right it was not a problem of scope and was turning arround scope thats y i couldnt solve it well u did it thaks again

Johan · Accepted Answer · 2013-10-28 11:36:38Z

1

Even though this have been answered hundreds of times on SO, I can give you a short explanation.

Since you're dealing with 2 asynchronous calls, you can never access data from the first call in a normal syncronous flow.

Make your first function return your $.ajax

function showCustomer(){
    return $.ajax({ /* ... */ });

And access the data returned in a callback:

showCustomer().done(function(data){
    console.log($(data).find(".EMP_EMAIL>span").html());
});

This assumes that you're using jQuery 1.5 or above, where the ajax calls exposes a promise.

An other alternative would be to nest the ajax calls (call the second one in the first ones success handler).

answered Oct 28, 2013 at 11:36

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Comments

Bikas · Accepted Answer · 2013-10-28 11:38:18Z

1

You're updating the value employee_email through AJAX call. As soon as first function is called, it makes AJAX call and moves to second function. The second function won't see the value change yet and employee_email doesn't change at all. You've 2 options -

Use second function in done of first function.
Use Deferred object in first call and on done of it call the second function.

answered Oct 28, 2013 at 11:38

Bikas

2,76918 silver badges33 bronze badges

1 Comment

kwk.stack Over a year ago

but my first function call is on page load and second call is on button click. first call return data in jquery ui dialog which contain button as well each customer so if admin want to send email to any one among all customers he just click the button and send him the email

Collectives™ on Stack Overflow

jQuery access vaules of global variable form one function to another

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related