I am going crazy with this! :(

I am going crazy with this! :(
0

#1

Hello guys,

Sorry to disturb you once again. I have a really stranger problem with my weather app. I know about the open weather api and google maps not being compatible and have switched to dark sky api. So they are both ‘https://’

What seems to be the problem is that the website doesn’t work on firefox. It loads the current location, but when I try to search for other locations the page just reloads itself (i have added the possibility to change locations), and asks for location again. Now this is weird cause I tried the search button to load just an “alert(“ok”)” and the page still reacted the same. This is only in firefox, and also on different mobiles some times works, some times doesn’t.

I am so lost right now, don’t even know if the problem is code related, or api compatibility, or browser related. Any idea will be great guys.

This is the link to the project: https://codepen.io/blinv/full/rWdyQL


#2

Default action of form submitting is to reload the page. You should prevent this default action.

function fromCityToCoord() {
  $("#submit").on("click", function(e) {  <-- add e
    e.preventDefault(); <-- add this line

#3

You are a life saver! Thank you so much!! :smiley:


#4

However if that’s the default action of a form, why does that happen if I click “current location” which is not part of the form at all? :confused:


#5

hey thats a pretty one :thumbsup:


#6

Clicking ‘current location’ doesn’t reload the page.


#7

Yes, indeed you are right! I am sorry, i noticed it wrongly. If it’s not much to ask, do you have any tips why it works on some mobiles and not in others? For example my phone, Xiaomi Redmi 3, Chrome, JS allowed, Location allowed, won’t work. Same phone on Firefox works! Also Samsung Chrome works.


#8

Thank you, buddy! :slight_smile:


#9

ooh it just turned blue from orange. the forecast must have changed. Very well done. You have an eye for it i’d say.


#10

@blinvarfi

can you add cursor: pointer rule to your “current location” and the temp unit link/button style. I want a finger pointer!


#11

@MARKJ78

Done, nice thinking! :smiley: I have included 12 different cases for the weather types. If you search other cities with different weather the whole page would change with the weather type.


#12

This page is really sick and robust. The search bar is bery nice, I can search for city, state, zip code, I love it! The only thing is that the temperatures are a little off. Your site says it is -8 Fahrenheit where I live. It is actually about 20 degrees Fahrenheit, so you may want to look that over. Probably one of the best I have seen though!


#13

It looks like this has something to do with it.

function clickDelay() {
  setTimeout(function() {
    $("#getCurr").css("pointer-events", "auto");
    $("#submit").removeAttr("disabled");
  }, 1000);
};

#14

@jenovs

Thank you! You have really helped me a lot with this project. I had been stuck on these problems for a while now. I have fixed the mobile problem, well hopefully, in all devices i tried now it works.


#15

@IsaacAbrahamson

Thanks a lot, I really appreciate your comments. I am using DarkSky API for the temperature. For where I live the DarkSky says it’s 6 Celsius, AccuWeather says 11 Celsius. It is just difference in API’s. But your temp difference it’s quite huge. The first value that shows it’s in Celsius, the Fahrenheit below it is clickable to convert it into F. Is this the case?


#17

yep, and in turn it’s to do with the weather stations the provider has access too. Some maybe closer than others.


#18

I found the issue. When you get data from zipcode, it is wrong. I live in Tipton, IA which is only about 20 miles from Iowa City. When I get the data for Iowa City it is right, but when I do my zipcode, it is wrong.