Serious help needed! :(

Hello guys,

I am currently working on the Random Quote Machine challenge. While I am having fun doing it, there is a little bug that I can’t seem to figure out. This is way too weird for me, the problem is that the website works perfectly on desktops, but on mobile platforms the button doesn’t generate the quote. This is not a click detection problem as I have checked with alert after clicking the button on mobile and it does work.

Here is the codepen project: http://codepen.io/blinv/pen/yVPvzj
Here is the full view: http://codepen.io/blinv/full/yVPvzj/

If anyone would help me with this werid problem, it would be much appreciated.

PS: I don’t usually post new topics to fix my bugs, but I have already searched lots and lots before posting this here and found nothing.

1 Like

Works on all the devices I toggle with Google’s dev tools.

2 Likes

I’ve just tried with blisk too. It’w working fine too.

1 Like

I am testing it with my mobile on google chrome and also on a friends iphone 7’s safari and the generate button doesn’t work. Are you sure about this? Can you please try it on your own mobile device if it isn’t much to ask?

Still working fine. iPhone 6.

1 Like

This is really weird, thanks a lot though! :slight_smile:

Try taking the s out of https:// on your mobile, it should work then

Yes, it does indeed. But why does it happen sometimes and how can I avoid this? Say, if this project was for real life use, how would i prevent such thing from happening to the users?

It’s difficult to avoid this, because the api that you are using is served from an insecure server, eg http://api.forismatic.com/ but by default it is served up over codepen’s secure sever https://

a lot of browsers and mobile browsers now will not run scripts on secure websites, that originate from insecure websites. I don’t really know of a workaround, but luckily it seems codepen duplicate pens on both http and https servers. With regards any future development of you own website, if you know you are going to be using a lot of API’s that originate from non https sources then you need to serve them on none https pages.

I hope that makes sense, and if anyone else with more experience can add anything that helps, that would be great.

3 Likes

Thank you, it makes sense now. I did the next challenge, the weather one with google maps api and the open weather api and turned out that googlemaps works only with secured and open weather only with unsecured so I used another api for weather. This stuff is annoying for sure. Thank you! :slight_smile:

I’v had simular issues in the past and I was able to work around them with a CORS server. https://cors-anywhere.herokuapp.com/

2 Likes

You’re welcome, fortunately these issues are becoming less of a problem as the web evolves. I think over the next couple years, https:// will become the norm. Especially as I have read, google has said it intends to rank secure sights higher than non-secure sights from next year.

It used to be a nightmare during the browser wars, designing different version for each browser, and even for different iterations of the same browser.

1 Like

As I mentioned earlier I am now doing the weather challenge. And as I have switched to googlemaps api and darksky api which are fine with https:// and the webpage works on chrome and opera. Somehow the page doesn’t work on Firefox. Also it works on different mobiles and doesn’t in others. I always make sure that the url is like this https://codepen.io/blinv/full/rWdyQL with the https:// before. What do you think would be the case, in firefox it seems that the google maps api doesn’t work for my code. I am really confused and it’s getting frustrating, I can’t seem to locate the problem. Could it be that the javascript is interpret differently in other browsers?

Firstly a lot of mobile devices, especially IOS have location services enabled on a app by app basis, for instance on the iPhone, you would need to go to settings-privacy-location services, and switch it on for chrome, then your app will work in chrome for IOS.

That said I don’t think IOS devices will allow https:/ sites to serve http content, but that should not affect your weather app, because as you stated the api is https and so is your codepen

I believe Firefox also asks to access your location on a site by site basis, if you say yes again your app should work.

Your app is working fine on all my devices, iMac (chrome, safari, firefox and opera), Ipad and iphone.

Hi, I’m attempting to use this method for my api call but getting a 400 error (Header Required). I’m not sure what I am missing. Can you tell me what I am missing, please?

function randomQuote() {
$.ajax({
url: “https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?”,
dataType: “jsonp”,
data: “method=getQuote&format=jsonp&lang=en&jsonp=?”,
success: function( response ) {
$(“#random_quote”).html(“

” +
response.quoteText + “
” + response.quoteAuthor + “”);
$(“#tweet”).attr(“href”, “https://twitter.com/home/?status=” + response.quoteText +
’ (’ + response.quoteAuthor + ‘)’);
}
});
}

If anyone is having this issue see this thread…

https://forum.freecodecamp.org/t/codepen-and-ajax-random-quote-machine-help/70917/19