Why is JQuery mobile not working in Internet Explorer? - jquery-mobile

For some reason, JQuery mobile is not rendering in Internet Explorer 9 on my website - http://dev.eventhello.com/users/login. I tried it in compatibility mode and it still doesn't work.
Any ideas as to why it works in Firefox, Safari, and Chrome, but not in Internet Explorer?

You have Uncaught SyntaxError: Unexpected token } on line 33 of login page source. This results in javascript exception in IE which may stop the page from rendering.
Can you try adding empty string as initial source value:
$( "#EventCity" ).autocomplete({
source: "" });

The issue was that there was a bug with JQuery version 1.5 so I updated. More details can be seen at jQuery Templates not working in IE9 RC

Related

Remove disable page with fixed hedaer in jquery mobile

I developed a project in jquery mobile which have fixed header. its working fine in laptop browser but when I run in mobile browser then after browse some pages my mobile getting stuck because jquery mobile keep cache of previous page. so to remove previous pages I added below code
$(document).on( "pageshow", function( event, data ){
$('div[data-role=page]:hidden').remove();
});
It also worked fine but now when i clicked on a link first time it remove previous page data as well padding-top from ui-page which was added for fixed header. now if I goes to next page and again comes on this page its work fine.
Please suggest, Thanks!!!

MVC ViewModel not updating with Internet Explorer 11

I have a simple form that is working just fine with Firefox 26 (latest version as of 12/26/2013) but when I run this form with Internet Explorer 11 I am not seeing the values from my two jQuery autocomplete controls being updated in my ViewModel. All other controls are working just fine. My autocomplete controls are of type but I have several other controls on the form that I have no issues with, just the autocomplete. Are there any known issues with jQuery autocomplete in a ... rendered in IE 11?
I have also tested this with the latest Google Chrome and I have the same issue as IE 11. This only works in Firefox :-( I have no idea why.
I had a similar issue when used IE, because IE cached my request so I did this:
$.ajax({
type: 'GET',
url: 'url',
cache: false,
success: function(response){
/* ... */
}
});
Hope this can help to you.

Change height of a div in opera mobile

Im having a problem while changing the height of a div on Opera mobile, on other browser it works fine.
Im using a plan and simple $('div').height(newheight) but it's not changing, I believe this is a bug but there must be a workaround because Jquery Mobile is resizing the whole page.
Do you know what is this workaround?
Thanks
I'm having similar issues for all of the sites I've built, and do indeed believe it's a bug in the mobile browser. The only way I've found to fix it is actually playing with the width/height in the SMS plugin markup, but unfortunately it will mess up how it appears on the other browsers.
Two solutions I've found: option one is to wait, since Opera is switching over to web-kit, option two is to plug in a simple alert jQuery script that detects if a user is browsing with Opera, and notifies them to use a supported browser instead (ie Firefox, Safari). It will be along the same code block as what I use for anything below IE 9:
if ( $.browser.msie ){
if($.browser.version == '6.0')
{
// page redirect and alert for upgrade
alert("... REQUIRES YOU TO UPGRADE YOUR WEB BROWSER For enhanced security and features on this website, please download Internet Explorer 9");
}
else if($.browser.version == '7.0')
{
// page redirect and alert for upgrade
alert(".... REQUIRES YOU TO UPGRADE YOUR WEB BROWSER For enhanced security and features on this website, please download Internet Explorer 9");
}
else if($.browser.version == '8.0')
{
// page redirect and alert for upgrade
alert("... REQUIRES YOU TO UPGRADE YOUR WEB BROWSER For enhanced security and features on this website, please download Internet Explorer 9");
}
}
});
Sorry that I don't have the exact code match you'll need, I just haven't had time to do it yet, but you'll want to replace the browser.msie with whatever the markup is for m.O

What features of Zepto do not work on ie9?

On the zepto project website i see no version of IE as being supported, not even 9.
I am considering using zepto in a webapp (not mobile) but i want to support IE 9+
Is that possible? What features / methods of zepto do not work on IE9?
Out of curiosity I just loaded up the following page and tested in current versions of Chrome, Firefox, Safari and IE9. In all but IE9 I was greeted with the alert() message. IE9 gave me no alert and contained two errors in the console. Here's the code I used, with the Zepto library in the same folder.
<!doctype html>
<h1>Zepto Browser Support Test</h1>
<script src="zepto.min.js"></script>
<script>
$(function () {
alert('Zepto Ready Successful!');
});
</script>
So, unfortunately for your web app, if you are trying to support IE9, it doesn't look like Zepto is going to work for you.
Although, what the good folks at Zepto encourage if you are trying to reach IE users is to fallback to jQuery. They even give you the code to do so.
If you need to support Internet Explorer, you can fall back on jQuery. Note that conditional comments are no longer supported starting on IE 10, so we recommend the following document.write approach:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
I found this in the Zepto docs near the top of the page.
Hope that helps and good luck!

jQuery Mobile: ui-page-active class remains on first page in webkit - displaying the current and previous pages

In webkit, jquery mobile is giving me issues.
I link to an internal page and when arriving upon that page, both '<div data-role="page">' elements have the ui-page-active class which makes both of them display. This is not the case with Firefox. Firefox correctly removes that class so that the first page's "page" is hidden.
I'm using jQuery 1.7.1,
jQuery Mobile 1.0,
jQuery default css theme,
Latest Safari, Chrome, Firefox versions.
It also does not work in the iPhone emulator.
Example:
http://chrispaul.ws/mobile.html
If you go directly to http://chrispaul.ws/weather.html or http://chrispaul.ws/deals.html then they display fine.
Try adding data-rel="external" attribute to the anchor tags. Worked for me.

Resources