I want to show a dialog when an app is not in standalone mode. I have this code:
$(document).on("pageinit", "#home", function (e) {
console.log('pageinit');
if (!window.navigator.standalone && (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) {
$.mobile.changePage('/mobile/install', {
role: 'dialog',
showLoadMsg: true,
changeHash: false
});
}
});
The problem is that the dialog appears but close directly after and it returns to homepage.
The pageshow event for homepage happens twice.
How to prevent this behavior ?
Thanks for your help
You need to set delay using setTimeout.
$(document).on("pageinit", "#home", function (e) {
if (!window.navigator.standalone && (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) {
setTimeout(function () {
$.mobile.changePage('/mobile/install', {
role: 'dialog',
showLoadMsg: true,
changeHash: false
});
}, 100);
}
});
Related
Here is the code I am using to initialize my dialog. I figured that since I the button doesn't exist which the page initially loads, I would need to use the on or live event to trigger the click (like in the Update call), but that hasn't worked. I confirmed that jQuery is finding the button using the console debugger but I cant for the life of me figure out how to trigger the button click.
Any suggestions?
$(function () {
var iframe = $('<iframe id="pageFrame" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen width="800" height="600"></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 950,
height: 600,
close: function () {
iframe.attr("src", "");
},
buttons: {
"Save": function () {
if ($("#pageFrame").contents().length > 0) {
if ($("#pageFrame").contents().find("#btnCreateContent").length > 0) {
$("#pageFrame").contents().find("#btnCreateContent").click()
}
else if ($fuze("#pageFrame").contents().find("#btnUpdateContent").length > 0) {
$("#pageFrame").contents().find("#btnUpdateContent").on("click", function () {
alert("update triggered");
});
}
else if ($("#pageFrame").contents().find("#btnCopyContent").length > 0) {
$("#pageFrame").contents().find("#btnCopyContent").click();
}
}
},
Cancel: function () {
if (confirm("Are you sure you want to exit?\n\nUnsaved changes will be lost.")) {
$(this).dialog("close");
}
}
}
});
});
This turned out to be the answer
$("#pageFrame").contents()[0].getElementById("btnUpdateContent").click();
Hope this helps somebody else out
I have a form in jQuery UI Accordion.
With this code, a visitor must validate the first panel and only then the next accordion panel opens. However, if the visitor wants to go back to first panel it doesn't let it go.
$(document).ready(function () {
$("#accordion").accordion({ event: false });
$('#openfirst').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 1 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#opensecond').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 2 });
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#openthird').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 3 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
});
</script>
Instead of using
$("#accordion").accordion({ event: false });
try using
$( ".selector" ).accordion( "disable" );
and upon user verification, use
$( ".selector" ).accordion( "enable" ); //for manual operation of tabs
or
$( ".selector" ).accordion({ active: # }); //for code generated operation of tabs
I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.
$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
window.location.href = 'url and myvar??';
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#confirm").dialog( "open" ).html ( "Are U Sure?" );
return false;
});
HTML
<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>
Is there a good way to do this?
You can try using the .data() method to store data for you. Take a look at this answer
Passing data to a jQuery UI Dialog
For example to pass a variable, you can store it using the data function, before opening the dialog
$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");
Then you can get this back by:
var my_data = $("#dialog_div").data('param_1')
You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:
$("#delete").click(function(ev) {
ev.preventDefault(); // preventDefault should suffice, no return false
var href = $(this).attr("href");
var dialog = $("<div>Are you sure?</div>");
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
window.location = href;
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
});
Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:
function confirmDialog(msg) {
var dialog = $("<div>"+msg+"</div>");
var def = $.Deferred();
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
def.resolve();
$( this ).dialog( "close" );
},
'Cancel': function() {
def.reject();
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
return def.promise();
}
And then use it like so
confirmDialog("are your sure?").done(function() {
window.location = $(this).attr("href");
}).fail(function() {
// cry a little
});
You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.
For more information on jquery deferred: http://api.jquery.com/category/deferred-object/
Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects.
Example:
$(function(){
$(".deleteLink").click(function(){
var id = $(this).data("record-id");
var myHref = $(this).attr('href');
$("#confirmDialog").dialog({
buttons:{
"Yes": function()
{
window.location.href = myHref + id;
}
}
});
});
});
<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
<p>Are you sure?</p>
</div>
HTML
<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS
$('.confirmation-dialog').confirm({
buttons: {
Yes: function(){
console.log(this.$target.attr('data-mydata'));
No: function(){
}
}
});
I have a section in my ASP.NET MVC3 website where a user can click a button to add an entry to their 'Saved Items' section in their account. This is done via a JQuery Ajax request, which works well if they're logged in. If they're not logged in, I'd like them to be redirected to a login page, and then automatically have the entry added to their Saved Items section.
I have all the parts working seperately - i.e. when the button is clicked, if not logged in, the login box displays. The login popup also works successfully. The problem is trying to seamlessly do all things at once. Here is the code I have so far:
Click event for Save button - checks to see if user logged in along the way:
var loggedIn = false;
$(document).ready(function () {
$('a#saveSearch').live('click', function (event) {
$.get('#Url.Action("IsLoggedIn", "Account", null)', function (response) {
if (response == "True")
loggedIn = true;
else
loggedIn = false;
});
if (loggedIn){
SaveSearch();
}
else{
$('#dialog').dialog('open');
SaveSearch(); //don't think this is correct because it hits this line before login is complete
}
});
Function to save to database:
function SaveSearch(){
var url = '#Url.Action("SaveSearch", "User")';
$.ajax({
url: url,
type: 'POST',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
json: "#Html.Raw(Session["MyFormString"].ToString())"
}),
success: function (data) {
$('a#saveSearch').attr('disabled', "disabled");
$('div#savedResponse').html('<p>Search saved to user account</p>');
},
error: function () {
}
});
}
});
JQuery UI dialog popup:
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Login',
modal: true,
open: function(event, ui) {
$(this).load("#Url.Action("Logon", "Account", null)");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
I think there is something fundamental that is wrong with my code, because this way, the login popup appears for just a second and then disappears straight away. It looks like I need to get it to stop advancing through the code until the login has been completed.
Any advice or help to get this going would be appreciated.
I would imagine your issue might be related to:
$.get('#Url.Action("IsLoggedIn", "Account", null)', function (response) {
if (response == "True")
loggedIn = true;
else
loggedIn = false;
});
if (loggedIn){
SaveSearch();
}
else{
$('#dialog').dialog('open');
SaveSearch(); //don't think this is correct because it hits this line before login is complete
}
The $.get call is async, which means the latter code:
if (loggedIn){
Is being executed before the server has responded. You need to put that code within your response callback:
$.get('#Url.Action("IsLoggedIn", "Account", null)', function (response) {
if (response == "True")
loggedIn = true;
else
loggedIn = false;
if (loggedIn){
SaveSearch();
}
else{
$('#dialog').dialog('open');
SaveSearch(); //don't think this is correct because it hits this line before login is complete
}
});
Try and add a close callback function to your modal, then the code will only be done as soon as the modal is closed and all the login have been done sucessfully. See comments in your code
$(document).ready(function () {
$('a#saveSearch').live('click', function (event) {
$.get('#Url.Action("IsLoggedIn", "Account", null)', function (response) {
if (response == "True")
loggedIn = true;
else
loggedIn = false;
});
if (loggedIn){
SaveSearch();
}
else{
//in this dialog, add a close handler,then add the SaveSearch(); function in that handler
$('#dialog').dialog('open');
}
});
In docs I didn't see such information.
There are options to close dialog in such cases:
1) push Esc;
2) click on "OK" or "Close" buttons in the dialog.
But how to close dialog if click outside?
Thanks!
Here are 2 other solutions for non-modal dialogs:
If dialog is non-modal Method 1:
method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2:
http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
I found solution on ryanjeffords.com:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$('.ui-widget-overlay').live("click",function(){
$("#dialog").dialog("close");
});
});
</script>
If dialog is modal, then paste these 3 lines of code in the open function when you create your dialog options:
open: function(event,ui) {
$('.ui-widget-overlay').bind('click', function(event,ui) {
$('#myModal').dialog('close');
});
}
Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
The plugin is also on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside
Laurent
This is my solution.
I have, for example
<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>
Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.
// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
if( $("div.ui-dialog").is(":visible") )
{
var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
if ($("#"+openDialogId).dialog("isOpen"))
{
$("#"+openDialogId).dialog('close');
}
}
});