Sorry for my lack of knowing JS. But I have this Jquery dialog code and need to add a button that says "Add" and would call a new blank dialog? I'm a UX/UI designer and syntax messes me up, lol. Any help would be great.
$( "#dialog-message" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$( "#opener" ).click(function() {
$( "#dialog-message" ).dialog( "option", "width", 650 );
$( "#dialog-message" ).dialog( "open" );
return false;
});
The buttons property is a javascript literal object, so you can add a button like this:
buttons: {
Ok: function() {
$( this ).dialog( "close" );
},
Add : function() {
$('#otherDialog').dialog("open");
}
}
As you can see, they are functions separated by comma and the name will be used as text.
Try this:
$(function() {
$( "#opener" ).click(function() {
$( "#dialog-modal" ).dialog({
width: 650,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
});
Related
The Dialog Opens fine,but there is no Table tag,i also cant see any error, so that i can sort out whats wrong.
function CreateDialog(data){
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 300,
width: 350,
modal: true,
open: function() {
jQuery('dialog-form').append('<table><tr>');
jQuery.each(data, function(key, value) {
jQuery('dialog-form').append("<td>"+value+"</td>");
});
jQuery('dialog-form').append('</tr></table>')
},
Cancel: function() {
$( this ).dialog( "close" );
}
});
}
Try to change:
jQuery('dialog-form')
to:
jQuery('#dialog-form')
You're missing # to target id here.
I use jquery ui modal dialog on a front page and I'd like to show it only one per user. This is my code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<div id="dialog-message" title="Attention">
<p>Sample text here!</p>
</div>
Any help is much appreciated!
Thanks!
Either use cookies (like mentioned before) or the localStorage API (depending on which browsers you have to support).
A way with cookies:
$(function() {
if( document.cookie.indexOf( "runOnce" ) < 0 ) {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
document.cookie = "runOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}
}
});
}
});
A way with localStorage:
$(function() {
if( ! localStorage.getItem( "runOnce" ) ) {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
localStorage.setItem( "runOnce", true );
}
}
});
}
});
You have to check if a user has visited specific page or not. You can keep the status in session variable or cookie. Based on value you can display dialog box.
example using cookie:
include jquery cookie in your html file i.e. https://code.google.com/p/cookies/downloads/list
following code will do your task
$(document).ready(function()
{
$(function() {
if ($.cookie('page_visited') != 'yes')
{
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$.cookie('page_visited','yes')
}
});
});
You can set cookie expiration period as third parameter $.cookie('page_visited','yes', expiration_date)
I'm using contact form in modal jQueryUI dialog, I would like to show an string "your mail was sent successfully" for 1.5 seconds and then close an dialog. I use that code for it:
$( "#dialog-form" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Send": function() {
$( this ).dialog( "option", "hide", { delay: 1500 } );
$( this ).dialog( "close" );
}
}
},
close: function() {
}
});
(removed some code for more clarity)
Code generally works, dialog window closes after 1.5 second of delay as I expect.
but, opacity which covers rest of site "under" dialog disappear without timeout.
Is there a way i can use a jQuery UI based modal dialog for confirmation instead of the normal JS confirm()? I would like to be able to do something like:
if (jquery_ui_confirm('Are you sure?')) {
// do something
}
Thanks in advance.
var jqConfirm = function(msg, success) {
var dialogObj = $("<div style='display:none'>"+msg+"</div>");
$("body").append(dialogObj);
$(dialogObj).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"OK": function() {
success();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
Call this function using
jqConfirm("This will delete all records", function(){ /*do something here */});
yes you can.. you can provide requried html to dialog
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
HTML Code
<div id="dialog-confirm" title="Confirmation Dialog">
<p>
<span class="ui-icon ui-icon-alert"
style="float: left; margin: 0 7px 20px 0;"></span>Would you like to delete this item?
</p>
</div>
you can also use Jquery Alert plugin as well. Here is a link: http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
For the purpose of globalization I need to translate buttons in jquery dialog, but when I try to pass variable I don't get value of variable, just name of it.
var RemoveDialogButton = "#FriendsNamesNS.FriendsNames.Remove";
var CancelDialogButton = "#FriendsNamesNS.FriendsNames.Cancel";
//alert(RemoveDialogButton);
$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:190,
modal: true,
buttons: {
RemoveDialogButton: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
CancelDialogButton: function() {
$( this ).dialog( "close" );
}
}
});
RemoveDialogButton: {
click: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
text: RemoveDialogButton
}
var buttons= {};
buttons[your text] = function() { ....};
$('.selector').dialog({
buttons: my_buttons
});