Possible jquery scope issue?

1

hey everyone. Working on the weather app. I wanted to work on making it dynamic in the way that you can enter a city state to get the temp and background to change. I know that currently im using a text input that is not verified. this is just to simplify the process. the issue im having is i can not get the modified ajax url to see the variable outside the ajax call. likewise if i put my ajax call into my .submit then it doesnt load at all. I posted the codepen below. Thanks for any assistance.

2

Hi @ncbraner

  • Line 4, you have a declared variable as ur1,

this variable is in the local scope of the wrapping function, and is not available outside of that function.

  • line 10 you reassign its value, but as url1,

this is a new, unintentionally globally scoped variable because of the typo (i think it was typo anyway!)

  • line 19, inside the ajax call, you have another url variable named url which is executed when the page loads and retrieves the fixed location data for SF.

This api url is working of course.

What I would do to fix this is have your ajax call wrapped in a function, then call the ajax request, with the search value as an argument. This way you can pass your search term through to the ajax call and use the term in your api url.

myajaxcall(myterm);

function myajaxcall(term){
     url: "http://api.whatevertheaddressis" + "term";
     //other stuff
}

Hope that gets you going again :slight_smile:

3

I appreciate the time for looking at it and finding my typo! So embarrassing. I have tried putting the ajax inside the .submit function. however then it kills the whole ajax. I currently set the code to that if you could take a look. At this time now i can use my URL variable but the ajax does not pull down its info

4

Quick update, so i used your process and it cures the issue from my reply ( now if i hard code the addy into the script the site loads) however i still cant get the

5

Did you mean to cut off mid-sentence there?

Your first issue is a good reason to use ‘use strict’ - it will throw an error if you assign a value to a variable that’s not declared instead of declaring a new one for you.

6

no i didnt. my site keeps timing out. Heres a link to the codepen. https://codepen.io/nateb/pen/wJvPra

the issue im having is i can not get the variables out of the .submit. no matter what i try. What im tying to do is set my api url dynamically so that the weather will display anywhere ( not just were its hard coded or by geo data)

im aware my inputs are not validated. ive been stuck on this.

7

There are several issues I found:

The place when you are console.log-ing the url variable is outside of the submit callback function. The url variable is in fact getting set properly. But you have re-defined url as a local variable, so your global url variable is not getting changed.

Then another problem is that HTML submit buttons reload the page, which refreshes you default input.

Also, in your ajax header you misspelled ‘application.’

Why is the submit function supplied as an argument to getaddress()? I suspect this is not what you want.

I think you want to make it so you call getaddress after the url is set properly.

8

After many attempts.puts my code is all over. Just got done reading about variable scopes. Hoisting ect. That might help. The console.log was outside the callback to see what it would return. Which was nothing. I’ll try and clean it up a but I believe I tried what your suggesting. I know my url is setting correctly. Just can’t make it global

9

Just a quick update.

First is that i found a better way to get the variables without the submit. it would have been easiest but I had to figure out my issue with the .submit. so we kept that

I needed to add a preventdefault. i did not understand that while the .submit rolls i would also reset the page, effectively cancelling out my variable assignment in my .submit()

im still not 100% clear on variable hoisting ( could have also been an issue of mine) from my understanding the following code would work like this

var set = 1 // assignts set to 1 globally

function something(){
set = 2 // should assign set to 2 globally
var set = 3 // assigns set to 3 locally
}

where the diffrence is i initialize set locally with "var set = " but “set =” would refer to the global instantiation.

is my understanding correct?.

10

Yes, you are correct, but I added a bit at the end to be sure:

var set = 1; //defines 'set' in global scope
function something() {
  set = 2 //assigns the global 'set'
  var set = 3; //defines a NEW local variable called 'set'
  set = 4; //assigns the local 'set' now
  window.set = 5 //now to assign global 'set',
  //you have to reference it from the window object
}

In practice, though, don’t do this! It’s very confusing to refer to a global then a local in the same function. In your app, you don’t need url outside of the submit function at all, since it’s calculated inside the submit function, and the AJAX request is also inside the submit function.

EDIT: So if you’re using jQuery’s document.ready and defining your variables inside it, they are not actually global! They are inside the document.ready function’s scope and cannot be accessed through the window object. Globals in jQuery must be declared outside of the document.ready function.