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);
Related
I would like an image to change once clicked and change back once the dialog it links to is closed.
I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?
HTML:
<div data-role="footer" data-position="fixed" data-id="myFooter">
<div class="navBar" id="bah" data-role="navbar">
<a href="#menu" id="burgerMenu" data-rel="popup">
<img id="burger" src="resources/burger.png" alt=""/>
</a>
</div>
</div>
jQuery:
$(document).ready(function()
{
$("#bah").on("dialogclose", function(event)
{
$("#burger").attr("src","resources/burger.png");
});
});
Use jQM pagecreate event instead of the regular jQuery ready
For popup clode, the correct event is popupafterclose
The popup id in your example is menu not bah.
$(document).on("pagecreate","#page1", function(){
$("#menu").on("popupafterclose", function(event) {
$("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
});
});
DEMO
Hi i am using http://getuikit.com/docs/modal.html on my site,
my code as below
Click to open modal
<div id="my_modal" class="uk-modal">
<div class="uk-modal-dialog">
<h1>Title</h1>
<p>...body ...</p>
<div class="uk-modal-footer">
Cancel <!-- Just close the modal -->
<!-- Call external link -->
</div>
</div>
</div>
i want to refresh background when some one click Cancel, i am noob in js but done some research and found
location.reload(true);
this will help in reload page but don't know how can i use it, can any one help
Answer . add this in end of page
<script>
$('.uk-modal').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
</script>
As per the documentation here, you may use the hide.uk.modal event, which is trigged whenever the modal is closed. In the event handler, you can use the reload functionality. Include jQuery file as well.
$('.modalSelector').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
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 know that this topic is well known, but all solutions I found don't solve my case. I tried to create a fiddle for this, but it seems that I don't have the know-how to setup it correctly: http://jsfiddle.net/tMKD3/6/. I simplified the code to demonstrate the problem more simplified.
So I describe it here and I hope it is understandable. I have a jQuery Mobile page and a dialog. With onMouseUp event a javascript function should be called, which does something and opens the dialog. The dialog should stay open until the close button is clicked and then the start page is showed again. In my case the dialog closes immediately.
Here the HTML code:
<body>
<div data-role="page" id="start" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<h1 id="startHeader"></h1>
</div>
<div data-role="content">
</div>
</div>
<!-- Dialog -->
<div data-role="dialog" id="dialog" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
<h3 id="dialogHeader"></h3>
</div>
<div data-role="content" data-theme="e">
</div>
</div>
Here the javascript code:
$(document).ready(function(){
// set button text
$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");
// call dialog and the dialog should stay opened until the close button is pressed
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
In similar articles I found the problem was the forgotten return false;, but here it doesn't helps. Has somebody an idea what I did wrong and where the mistake is?
Thank you very much in advance for your help.
Greetings,
Thomas
you can give a timeout for this:
<script>
$(document).ready(function(){
// set button text
$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("#dialogHeader").html("Dialog");
$('#dialogButton').html('Close');
// call dialog and the dialog should stay opened until the close button is pressed
setTimeout(function () {
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
}, 100);
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
</script>
I have a jquery mobile popup. I want after it opened to perform some things. The problem is not coming to the event:
$(document).ready(function () {
$("#alertsPopup1").bind({
popupafteropen: function (event, ui) { alert('popup'); }
});
});
Here the pop up in the html:
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
I can not understand what the problem is, it passes the bind without problems (I tested in Chrome's console).
I'd appreciate some help.
First don't use document ready with jQuery Mobile, sometimes it will trigger before jQuery Mobile can process page correctly inside the DOM. Read here why.
Instead of document ready you should use proper jQuery Mobile page events. Read more about them in a previous link.
Also if possible use delegated event binding. Basically use on function to bind an event and bind it to a document level. Delegated event binding should solve the problem of document ready usage, mainly because it doesn't care if popup exist / don't exist inside the DOM.
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
alert('popup');
});
});
HTML :
<div data-role="page" id="index">
<div data-role="content">
Open Popup
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/Jgajv/