CODEWITHSUNDEEP
javascriptjqueryajax
kwk.stack
kwk.stack

Reputation: 553

jQuery access vaules of global variable form one function to another

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.

Upvotes: 0

Views: 576

Answers (3)

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

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.');
}

Upvotes: 1

Bikas
Bikas

Reputation: 2759

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.

Upvotes: 1

Johan
Johan

Reputation: 35194

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).

Upvotes: 1

Related Questions