BACKGROUND
I am writing an MVC 4 / jQuery Mobile site. I have a Header.cshtml shared view defined like this:
#model string
<div data-role="header" data-position="fixed">
<a data-rel="back" href="javascript:history.back()">Go back</a>
<h1>#Model</h1>
#Html.ActionLink("Home", "Index", "Home", null, new
{
data_icon = "home",
#class = "ui-btn-right jqm-home"
})
</div>
which I call like this:
#Html.Partial("Header", "Registration")
PROBLEM
The above runs fine in my desktop browser, but when I test using Mobilizer (http://www.springbox.com/about/tools/), it seems that history.back() does not work on mobiles. So then I thought.. okay, there's always more than 1 way to get things done.. so I tried this:
<a data-rel="back" href="#Request.UrlReferrer">Go back</a>
Strangely, that doesn't work either and I don't know why. I am guessing that UrlReferrer is calling something in the browser and the mobile browser does not support it. Unfortunately, I cannot actually test that theory as Mobilizer does not seem to let me inspect the page source.
In any case, I need a solution.. of course I could stop using this generic shared view and copy-paste it to everywhere instead, but needless to say that would suck... Can anyone tell me how to solve this one, so I can re-use my header code?
EDIT
At first I thought #DWolf had solved the problem. But now I see it hasn't.
I have checked and confirmed that Mobilizer is not the problem. I did this by testing a different emulator. In this case, ElectricPlum's iPhone simulator:
http://www.hanselman.com/blog/SimulatingAnIPhoneOrIPadBrowserForASPNETMobileWebDevelopmentWithWebMatrix2OrVisualStudio2012.aspx
So, data-add-back-btn="true" also does not work. It does seem odd though that a built-in function of jQuery Mobile for back buttons does not work... What is that?!?!? HELP!
jquery mobile keeps the page cached, so if you flip from page 1 to page 2, it shows page 2, but it keeps on to page 1 behind the scenes
if you add
data-add-back-btn="true"
to your page
<div data-role="page" id="page2" data-add-back-btn="true" >
it will go back 1 page
Related
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
I am having problems with the Intel AppFramework. I can not seem to get the sidemenu working.
It is working fine on the demo you can download from the AppFramework website, but no matter how well I am trying to mimic it - I can't get the sidemenu to work on my project.
Everything is working fine until I add tags as that is how you make a sidemenu. When those tags are added the whole app will render blank / white and an error pops up into console saying "Uncaught TypeError: Cannot read property 'hideScrollbars' of undefined".
It has something to do with appframework.ui.js' line 1100 that saysthis.scrollingDivs.menu_scroller.hideScrollbars();
So it seems like this menu_scroller is undefined for some reason.
This is as much code as I can give you, it is the index.html of my AppFramework / Phonegap app: http://pastebin.com/dXtTeiKx
Console does not say about any missing files (except cordova.js which is fine because PC) nor does it throw any other JavaScript errors other than the one I told you, so I would assume there is no need for me to post the code in every other file.
I have tried the tags with AppFramework version 3.0.
I have also tried switching the JavaScript includes around a bit, including appframework.ui before appframework and putting some includes to the bottom of the index.html, but none if these have resolved the issue so far.
I also tried removing all excess css and js includes but that did not work either.
This has lead me to believe there is some kind of bug within the AppFramework itself or I am just doing something horribly wrong or have overseen something.
Here is the documentation for the AppFrameworks sidemenu: http://app-framework-software.intel.com/documentation.php#afui/afui_side and as you can see, it should not require anything else than including that nav thing to the source, hell I even tried copying the whole
<nav id="leftMenu" class="view">
<header><h1>Left Menu</h1></header>
<div class="pages">
<div class="panel active">
This is the left menu
</div>
</div>
</nav>
...but that changed nothing.
So I have successfully resolved the issue by myself. I don't know what kind of wizardry AppFramework does on the background, but the issue that caused the nav not work for me was that I had a panel defined like so:
<div data-title="Main menu" id="menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
This is the main menu
</div>
The nav was correctly defined like so:
<nav class = "view" id = "main_leftmenu">
<ul class = "list">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</nav>
The problem was with the panel like I said; as you can see it has an id of "menu" - this is what broke the nav. "Menu" as an id for a panel is most likely a preserved word or something, so it should not be used.
I am suggesting that if you use AppFramework, you should prefix everything (especially panels) with something like so:
<div data-title="Main menu" id="f_main_menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
This is the main menu
</div>
Here I prefixed the "main" panel with "f_" prefix (there is "_main" as well, but that's just extra so it tells about the panel more).
So in short
Prefix your panel ids and do not give any of them an id of "main" or "menu". Use something like "x_main" and "x_menu" instead.
I have:
<div data-role="page" class="type-interior">
<div data-role="content" class="ui-body">
<a href="#transitionExample" data-role="button" data-rel="popup">
Pop Up
</a>
<div data-role="popup" id="transitionExample">This is a POP UP.</div>
<a href=# onClick="$('transitionExample').popup('open')"
data-rel="popup">OpenPopUp</a>
</div>
</div>
If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.
What is happening?
I use, JqueryMobile 1.2.0 and JQuery 1.8.2.
$('transitionExample').popup('open')
should be
$('#transitionExample').popup('open')
for more info see: http://api.jquery.com/id-selector/
then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
OpenPopUp
and between your <script></script> tags
$(function () {
$("#myButton").click(function () {
$('#transitionExample').popup('open');
});
});
I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded
$('#popupid').popup(open)
NO QUOTES! No one complained - Chrome did not throw up an error but the popup call did nothing.
Hopefully, this will help someone else one day.
I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.
$.mobile.changePage("#foo", {
transition:"slide"
});
When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.
I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.
Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.
Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.
Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.
Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.
Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.
For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"
Example:
<div data-role="page" >
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
<a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
</div>
</div>
jsFiddle:
http://jsfiddle.net/GEDcF/
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
UPDATE
From your comment
"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Quote:
Properties:
reverse (boolean, default: false) Decides what direction the transition will run when showing the page.
Found it.
One of our developers turned off all return transitions globally, so no wonder that it didn't work.
This is what he used. Removing that line did the trick.
$.mobile.changePage.defaults.transition = "none";
It looks like jQuery mobile sets document.title to the text content of data-role="header", example:
<div data-position="fixed" data-role="header">
<h1>This text</h1>
</div>
I have a hack workaround to prevent this as such:
$('div[data-role="page"]').bind('pageshow',function(){document.title = "My title"});
Is there a better/more semantic way to do this?
Another solution would be to copy the original document title to the data-title attribute of each page:
$(":jqmData(role='page')").attr("data-title", document.title);
The advantage of this approach over changing the title on pageshow is that it will prevent document title flicker during page transitions.
If you wrap your value around div it will not update the title. Like this:
<div data-position="fixed" data-role="header">
<div><h1>This text</h1></div>
</div>
I would just patch jQuery mobile to remove the unwanted behaviour. It appears to be in jquery.mobile.navigation.js. You could rebuild jQuery Mobile to get the minified version again.
If you were feeling ambitious, you could even submit a bug to jQuery Mobile asking that this be an option (and possibly even write a patch yourself, if you're comfortable doing so).
The jqmData option here didn't work for me. The H1 wrapping option messed up the looks which I would need to correct through CSS. What did work for me and is actually documented by jQuery Mobile is:
http://demos.jquerymobile.com/1.1.2/docs/pages/page-titles.html
Which comes down to adding the data-title attribute to the div with data-role="page":
<div data-role="page" data-theme="a" data-title="MyPage - #ViewBag.Title">
In this particular example I'm setting the page title to "MyPage - " followed by the page title as set through MVC in the ViewBag.
$(":jqmData(role='page')").attr("data-title", document.title);
This works as proposed by #stanislaw-osinski - however, I had to use it like this to get it work in jQuery Mobile v1.4.5:
<script>
$(document).bind("pageinit", function(){
// Patch to prevent overwriting <title></title>
$(":jqmData(role='page')").attr("data-title", document.title);
});
</script>