Use local javascript variable in ajax url

Question

I have a local variable within a function called by a click event. The variable is different depending on which button is clicked.

I'm then trying to pass that variable to another function which contains AJAX.

I can't seem to use the first local variable in the ajax function.

I've tried using "window.myVariable" to make it global but it doesn't work. As you can see in the code I've also added call to the next function with my variable as a parameter but no dice. The error I'm getting in the console is "variable 'user' is not defined."

I cannot access the local variable outside of it's original function at all. Can anyone see why it is refusing to become a global variable?.

function getStateOfChat(){
 if(!instanse){
   instanse = true;
   $.ajax({
      type: "POST",
                           url: user + "/process.php",
      data: {  
         'function': 'getState',
         'nickname': nickname,
      'file': file
      },
      dataType: "json",
   
      success: function(data){
       state = data.state;
       instanse = false;
      },
   });
 }  
}

var user1 = "john";
var user2 = "andrew";

// ============== USER 1 ==============
    

        <button type="button" class="btn btn-info btn-lg chatBtnMain" data-toggle="modal" data-target="#myModal2" id="chatBtn1">
                Chat to 
                <span class='nickname'>
                    John
                </span>
        </button>
<script type="text/javascript">
   document.getElementById('chatBtn1').addEventListener('click', runScript1);
    function runScript1() {
        var user = user1;
        getStateOfChat(user);
    }
</script>
     
    
    
    // ============== USER 2 ==============
        
        <button type="button" class="btn btn-info btn-lg chatBtnMain" data-toggle="modal" data-target="#myModal3" id="chatBtn2">
                Chat to 
                <span class='nickname'>
                    Andrew
                </span>
        </button>
<script type="text/javascript">
   document.getElementById('chatBtn2').addEventListener('click', runScript2);
   
    function runScript2() {
        var user = user2;
        getStateOfChat(user);
    }
</script>

just add user parameter `function getStateOfChat(user) { ... }` — jcubic, Jul 07 '16 at 10:08
^ If passing a parameter also results in `undefined` error, that means the value you are assigning to `user` i.e. `user1` itself is `undefined`. — Mohit Bhardwaj, Jul 07 '16 at 10:11
^ adding to this point you have assigned `var user1 = "john";` in html outside javascript code blocks — Anupam, Jul 07 '16 at 10:13
@anu Yeah that was just to illustrate what the variables are. It's within script tags on my page. — Eli Nathan, Jul 07 '16 at 10:16
@MohitBhardwaj it is defined, when testing it with an alert > alert(user1); it displays the correct value. I've tried passing user as a parameter when calling the function but it still gives me the undefined error — Eli Nathan, Jul 07 '16 at 10:17

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

I'm then trying to pass that variable to another function which contains AJAX.

You are successfully passing it:

getStateOfChat(user);

The problem is that you never read that variable in the function you are passing it to.

url: user + "/process.php",

You are trying to read a variable called user but you don't have a variable called that inside the function.

Specify it in the argument parameters:

function getStateOfChat(user){

I've tried using "window.myVariable" to make it global but it doesn't work

Avoid globals. They are harder to manage that local variables.

I cannot access the local variable outside of it's original function at all. Can anyone see why it is refusing to become a global variable?.
var user = user1;

That's the purpose of the var keyword.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 07 '16 at 10:12

Quentin

914,110
126
1,211
1,335

Thanks Quentin, I've tried all that but it still tells me that the value of user is 'undefined'. It runs the url query but gives me an error in the console saying "http://localhost:8888/confirm/undefined/process.php Failed to load resource: " – Eli Nathan Jul 07 '16 at 10:24
@E.Nathan — It [works fine](https://www.evernote.com/l/AANl7rOZ2DBDhKkFgca_CTsUkTG948xc9oQ) when I make [that change](http://jsbin.com/taqita/2/edit?html,output) – Quentin Jul 07 '16 at 10:28
Not for me somehow. Could it be that I have my order wrong. I include JQuery first. Run all the HTML and script tags with event listeners second and call ajax last – Eli Nathan Jul 07 '16 at 10:40
That's the only order it is possible to do it in. – Quentin Jul 07 '16 at 10:46
That's what I thought. I can't see any difference between my code and yours and it still doesn't work. – Eli Nathan Jul 07 '16 at 10:47

score 0 · Answer 2 · answered Aug 26 '20 at 18:13

What you want to do is pass the argument in the call to $.ajax

function getStateOfChat(user){
    if(!instanse){
         instanse = true;
         $.ajax({
               type: "POST",
                           url: user + "/process.php",
               data: {  
                        'function': 'getState',
                        'nickname': nickname,
                        'file': file
               },
               dataType: "json",
               user: user,
            
               success: function(data){
                   user = this.user
                   state = data.state;
                   instanse = false;
               },
            });
    }    
}

Use local javascript variable in ajax url

2 Answers2