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!!!
Related
I have a weird problem on my site that only happens in IE9 - I have some js code that I need to add to the page but only for IE9 as it is to sort out the placeholders. However the code is not getting added and I don't know if this is a bug with IE9 or MVC.
The problem is that I put the code for the script at the top of the view - it gets added to a session which then gets rendered on the master template, but in IE9, the view is not being hit so the code doesn't get rendered. I have put a breakpoint onto the view and visited the page in all the browsers. The breakpoint gets hit and then moves onto the master layout in every browser except IE9 where the breakpoint is completely missed (no matter where I put it in the view) and the master layout is loaded first.
However if I do a postback on this page, the view will then be hit and the script will render.
Has anyone had this problem before or know what causes it
Update
the code in the controller isn't hit in IE9 either. Is this a caching problem - if so, how do I stop MVC caching a page
Okay, a further update is in IE9, I have noticed that the url being loaded is http://localhost/Quote/#/Quote/Form/ but in every other browser the url is the correct one: http://localhost/Quote/Form/. If I go to the correct url then the page works properly in IE9.
Is this caused by jQuery mobile ajax enabled option?
The error was caused by the # being added to the url. I found that if I entered the following code just before the jQuery mobile script:
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = #Html.Raw(Request.Browser.IsMobileDevice ? "true" : "false");
});
</script>
It solved my problem
I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
Then it works fine but I loose all the styling and the text on webpage displays very tiny.
I am using Opera Mobile emulator for testing.
The links are local and are like "localhost:62234/Articles/10".
Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.
Here is solution I found which solved my problem finally.
Here is how my code looks now..in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>
I found some more information with this problem Here.
Hope this helps others
I have a web application that runs just fine on Android until I started to use jQM. It still runs fine with jQM on the desktop...
The problem is that when I load a "new URL" using "window.location.href = newLocation;" the new page loads fine the first time but the next time the page is displayed ok but then disappears and I can just see the header and footer of the first page (not the second). When I refresh I see the second page ok. Another way to have it working is to always refresh the first page b4 launching the second.
I have tried to disable page transition and Ajax but with no success.
If I run (I guess it is stupid):
$.mobile.changePage(newLocation, { transition: "none"});
window.location.href = newLocation;
it always works but then I sometimes get "Error loading page".
Any ideas? $.mobile.changePage(newLocation, { transition: "none"}); alone does not work...
Here is a "bypass" solution. It works but there may be better ones...
First I tried to add some JS to force a reload of the first page when coming back from the second but no JS executed...
Then I saw After travelling back in Firefox history, JavaScript won't run and just added "window.onunload = function(){};" to the first page. This prevents caching of the first page and now things are working.
It looks like page caching was causing the problem but I don't know why this means that jQM fails...
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.
I have a local jQuery Mobile project going (inside PhoneGap, thus file:// protocol) where I sometimes need to fetch external pages (using http://) from a server where the content too are jQM pages with almost identical markup (except for the content, which is generated from a CMS).
Setting $.mobile.allowCrossDomainPages to true gives me the page, and that is all right. Going Back, however, fails. I get stuck in a place where /www/index.html is not found on the server (like, doh, of course..). Is there a way to "remember" where I came from, taking me back to the local html page I originally came from?
We just added a docs page on PhoneGap in jQuery Mobile for RC3 that should help you out quite a bit:
http://jquerymobile.com/test/docs/pages/phonegap.html