jQuery app works on Localhost, Mobile, but does not work on browsers

Asked

Viewed 384 times

0

I developed a small application using HTML5 and jQuery.

It works perfectly on localhost. I uploaded the whole code, and a specific routine did not work on any of the browsers (Chrome, Firefox or Opera).

I tried it on iPhone Safari and it didn’t work either. I figured you might have forgotten to climb some file, but in the last test, when I created a page shortcut on iPhone, it worked perfectly.

Anyway, I tested on Android Chrome and also worked without any problem.

Has anyone ever been in a similar situation?

I did these two tests and both did not generate anything on the console. I believe the problem may be here:

$(document).on('pagebeforeshow', '#pagRanking', function() {
    console.log('before show');
})

$(document).on('pageshow', '#pagRanking', function() {
    console.log('show');
})
jquery html5

  • Have you checked the path to jQuery? It’s probably not being loaded and your code doesn’t work. Try this before that code you have there, out of those functions: if (typeof jQuery == 'undefined') { console.log('jQuery não foi carregado!'); } else { console.log('jQuery Carregado!'); } to see if jQuery is loaded or not!

  • Are you using a server to provide the files or is it just a static page? in the element inspector of your browser you can see if he managed to get these files in the tab network?

  • The jQuery is loaded.

  • The files are also loaded in the network tab, as they should, however the JS file does not seem to have been updated. I tried a CTRL+F5 (obviously), but it doesn’t seem to change.

2 answers

1

pagebeforeshow and pageshow, as a whole, they are not compatible with desktop browsers. For this, choose $(document).ready(...); or $(window).on('load', ...);.

  • I replaced $(Document). on('pagebeforeshow', '#pagRanking', Function() { console.log('before show'); }) with $(Document). on('load', '#pagRanking', Function() > console.log('before show'); }) and stopped working on all devices.

  • Alexandre, try to: $(document).ready(function () { console.log('before document is ready'); });

  • It worked, William, but I had to keep the pagebeforeshow and pageshow events, because the load didn’t even fire a console..

  • I don’t understand. Where the "load" fired no shots console.log? To be responsive, you can also use the $(window).on('load', function () { console.log('hi!'); });.

  • This load worked, but the $(Document). on('load', '#pagRanking', Function() { console.log('before show'); }) did not. I must exchange the 'Document' for 'window'?

  • Yes, Alexandre. They do different things. The document means GIFT. document and ready means that you will perform something when the DOM is loaded; on the other hand, the window and load translates to executing something as soon as the window is loaded, regardless of whether the DOM is ready or not.

  • $(document).ready(function () { console.log('before document is ready'); }); may be replaced by $(function () { console.log('before document is ready'); }); (exchanging $(document).readyonly by $) you can understand a little better in Jquery Document Ready in EN

Show 2 more comments

0

Not all browser compatible with events pageshow and pagebeforeshow. You can check this compatibility like this:

if(window.onpageshow|| window.onpageshow=== null){
   window.addEventListener('pageshow', showFunction, false);
} else {
   window.addEventListener('load', showFunction, false);
}

  • All browsers returned TRUE for this check, that is, they all accept these events. But since I am in ideal conditions (super updated browsers), it might be interesting to replace them with a more accurate event.

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.