Function to change a variable that was called on an endpoint and reload the page with the new value

Function to change a variable that was called on an endpoint and reload the page with the new value
0.0 0

#1

Hi,

I have a problem here that I could not find a solution on google.
I am doing the weather app and I want to include a function to change the language.
So I created 3 div with the same class “lang” and different ids (EN, PT, DE)

on the endpoint I have a variable called lang and it retrieves the value of a div.

After the request is already done, changing that div doesn’t affect my function and doesn’t change the language.

var lang

$('.lang').click(function() {
   var id = event.target.id;
    $(".language").text(id)   

// I need to trigger the getWeather function with the new value for the language

   });


 var getWeather = function(data) { 
 lang = $(".language").text()
  $.getJSON('http://api.openweathermap.org/data/2.5/weather', {
        lat: data.lat,
        lon: data.lon,
        lang: lang,
        city: data.city,

html


 <div class = "lang" id = "de">DE</div>
  <div class = "lang" id = "en">EN</div>
  <div class = "lang" id = "pt">PT</div>
  <div class = "language"></div>

When I open the page the request is made and it works.


#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#3

Thank you and Sorry for that. That was my first post and I didn’t have a look at this page.
Thanks.


#4

No worries. We’re here to help :slight_smile:


#5

event is undefined inside your .click() handler. You need to pass the event object into the function as an argument.

https://api.jquery.com/click/


#6

Hi.
I don’t think I understood that very well.

The function to change the div works normally. I can see the option that was clicked on the div with the class language.
The problem I have is that after changing the value of the div language I want assign that to a variable called lang and include that on the endpoint.

When the page loads the request for the weather is made. If I click the function to change the language I cant include the new variable with the new language settings anymore. I tried to pass the getWeather as an argument but it didn’t work.


#7

I must be looking at something else, or I don’t understand. But for me, the language change function does not work. “de” is displayed on page load, but clicking on any of the “DE”, “EN”, “PT” logs an error to console: “event is not defined”

This fix is easy:

$('.lang').click(function(event) {  // <-- add 'event' here
   var id = event.target.id;
    $(".language").text(id)  
  lang =  $(".language").text()
  
});

The fix for your main question … You need to trigger the AJAX request from your .click() handler. This could be as simple as copy/paste your $.getJSON call into the .click() handler, but that’s not the most elegant solution!


#8

I thought about doing this as well but was just looking for the cleaner option. I had the event as an argument as well but it didn’t solve my main problem so I deleted it causing the error you saw.

I will try again and if anything changes I will post here.

Thanks for helping me.


#9

The function to change the language was actually working. the problem was that I didn’t call the one that shows the weather on the page and write all the informations.

Thank you very much for your help.