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>
Related
I am trying to prepend html element into div in windows 8.1 phonegap application but its giving some weird output. Please see below code which I am using to prepend element.
var wrapper = $('.list');
wrapper.prepend("<div> Hello </div>");
It should give output like this
<div class="list">
<div> Hello </div>
</div>
But giving some weird output
<div class="list">
<head></head>
<body onload="startExec()">
<div> Hello </div>
</body>
</div>
Please get back on this as soon as possible.
Update
I am adding JavaScript Dynamic Content shim for Windows Store apps i.e winstore-jscompat. Is this issue coming because of shim?
Try This one
$('div.list').prepend("<div> Hello </div>");
I Know this is a bit late - but better late than never :)
You have pointed out the issue your self: The cause is winstore-jscompat.
Get the latest version that fixes this issue here: https://github.com/MSOpenTech/winstore-jscompat
I had this issue my self, and just verified that the newest version fixes it.
I'm developing a phonegap project, I wanna popup a dialog of error information. I learn some from the demos of jQuery mobile, here is the link http://demos.jquerymobile.com/1.4.0/popup/#&ui-state=dialog I used the code of it and in my js file I use popup('open') to open it.
Here is part of my html code
<div data-role="popup" id="dialogZ" data-overlay-theme="b" data-theme="a" data-dismissible="false" data-transition="pop">
<div data-role="header" data-theme="b">
<h1 align="center">Sign in failed</h1>
</div>
<div role="main" class="ui-content">
<p id="SigninError"></p>
<span align="center">OK</span>
</div>
</div>
And here is part of my js code
else if (data == "Error2") {
var message = '<p align="center">Wrong username or password</p>';
SigninError.empty().append(message);
$('#dialogZ').popup('open');
}
I wanna have the effect like the demo but it didn't work.
Anyone knows why? It seems I can not have the css work properly, but I have included the jquery.mobile-1.4.0.css. Need helps!!
ya i got same issue before 4 months finally i got a solution. when you append content inside the popupview at the time u must call like this.....
JS
$('#dialogZ').popup();
$('#dialogZ').popup('open');
or
$('#dialogZ').popup();
setTimeout(function(){
$('#dialogZ').popup('open');
},100);
HTML
your data-role popup must inside the content of your calling page
Ideally data-transition should be on the link which triggers popup. since you are opening the popup in code, there is an additional attribute for $(dialog).open function, u need to pass the transition as part of open function., jquery doc
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");
My javascript does not seem to load at all when i am using android's webview but loads fine on a desktop browser
Here is my html and script under one html file:
<script>
function initialiseFields(){
var name = "John Smith";
var staffId = "9877878";
alert( 'initialiseFields' );
$("#list").append('<li><h3>Additional Information:</h3><div data-role="fieldcontain"><input type="text" name="claimTitle" id=/"textFieldJourneyFrom" value="" /></div></li>');
$('#list').listview('refresh');
}
</script>
<body onLoad="initialiseFields();">
<div data-role="content">
<ul class="ui-li" data-role="listview" id="list" data-inset="true" data-scroll="true">
</ul>
</body>
Basically trying to execute the initialiseFields that displays an alert and add some field into the listView.
The alert and the listView never gets invoked/updated.
Edit: Also, whatever list item I add via javascript, it doesnt apply the default jquery mobile css style either.
Any reason why?
Another Edit:
Solution is provided by the person i have accepted the answer, however a word of warning. if you are using a datepicker and its assets. the soltuons provided doesnt work i.e it doesnt load your JS for some strange reason:
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">.
Also, i tried the above snippet of code by simply setting the theme and it managed to apply the theme on the text and header and background but on the actual field it does not apply it to the input field
$("#list").append('<li data-theme="c"><h3>Additional Information:</h3><div data-role="fieldcontain" data-theme="c"><input type="text" name="information" id=/"textFieldInformation value="" data-theme="c"/></div></li>');
edit 2:
Code was tested and working ok except for the theme of the input fields, however, my JS does not work at all on an android device.
When working with jQuery Mobile don't use inline javascript function initialization. Mainly because this problem could happen.
jQuery Mobile page is not a normal web page. Unlike classic web development jQuery Mobile will restyle whole page when it is initially loaded into the DOM. This will work fast on desktop browsers but it will take time to run on mobile browsers / web views (no matter is it Android or iOS). Because this restyling takes time this inline function will execute before content is full loaded/enhanced inside the DOM. This is also a reason why document ready should not be used with jQuery Mobile, because it will usually trigger before it can be useful.
To counter this problem you should use jQuery Mobile page events. They are specially created to cover page loading states from initial DOM loading up to final page show.
But to make it work you will need to change your HTML a bit. Your div with data-role="content" must be wrapped into a div with an attribute data-role="page", something like this:
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul class="ui-li" data-role="listview" id="list" data-inset="true" data-scroll="true">
</ul>
</div>
</div>
</body>
For page event to work you web app MUST have data-role="page" divs.Also your data-role="page" div must have an id, we will use this id to initialize your function.
Now to make it work just initialize your function like this:
$(document).on('pagebeforeshow', '#index', function(){
initialiseFields();
});
If you want to find out more about page events read this ARTICLE, to be transparent it is my personal blog. One last thing, you need to know how jQuery Mobile handles multiple pages and javascript initialization so find more about it HERE.
You can test it here: http://jsfiddle.net/qhvne/2/embedded/result/
I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose