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
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 currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});
Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});
I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.
First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo
Is it possible to open a dialog in Jquery Mobile from javascript?
I tried doing something like this but it didnt work:
<a id='lnkDialog' href="goals.html" data-rel="dialog" data-transition="pop" style='display:none;'></a>
and then in js
document.getElementById('lnkDialog').click();
Any help would be appreciated
We'll need a lot more information, but unless #lnkDialog already has a function binded to a click event, that's not going to work. I'm assuming the data-rel contains the ID of the modal that will pop up.
It'd be more like
$('#lnkDialog').on({
click:
function() {
var selector = '#' + $(this).attr('data-rel');
$(selector).show();
}
});
but again, a LOT more information needed.
Here's what i do.
In my markup i have a dialog defined inside body, towards the end of it as follows:
<div data-role="dialog" id="messagebox">
<div data-role="header">
<h1>Message</h1>
</div><!-- /header -->
<div data-role="content">
<span id="phMessage"></span>
</div>
</div>
Then in javascript I have:
function showMessage(message) {
$("#phMessage").html(message);
$.mobile.changePage('#messagebox', 'pop', false, true);
}
The only thing you really need is $.mobile.changePage('#messagebox', 'pop', false, true);
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>