I want to use a jQuery UI dialog to display the errors in the different inputs. My problem is that I would like to define the feature of dialog box only one but associate it with several html containing an id and a specific error message.
How could I do that?
At the moment, I have this:
// definition of the dialog, to do only once
$( "#dialog" ).dialog({
autoOpen: false,
show: {effect: 'fade', speed: 100},
hide: {effect: 'fade', speed: 100},
modal: true,
resizable: false,
title: "Incorrect value",
buttons: { Ok: function() { $(this).dialog( "close" ); }},
beforeClose: function() { $( "#time_at_address_years1" ).focus().val('') },
});
// the event, one per input
$( "#time_at_address_years1" ).blur(function() {
$( "#dialog1" ).dialog( "open" );
return false;
});
And the HTML of one message is like this:
<div id="dialog">
<p>The error message here.</p>
</div>
Just warp the dialog in a function and pass that function the current jQuery-selector.
function my_dialog(selector, tofocus) {
$(selector).dialog({autoOpen:true, ...more options...});
}
Than call it like this:
$( "#time_at_address_years1" ).blur(function() {
my_dialog('#dialog1', '#time_at_address_years1');
return false;
});
Also, you should have a look at the jQuery-Validator-Plugin http://docs.jquery.com/Plugins/Validation
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)
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/
I am using ASP.NET MVC 4, jQuery, and jQuery UI.
I have a dialog on my view. When I click a button the dialog pops up, takes the values on the dialog and send its through to a service. The service does what it needs to do and will either send back a blank message if it is successful or the actual error message. After this I need to check the error on the client side, close the current dialog and open a success dialog or the error dialog. I'm not sure how to close the current dialog and to display another dialog.
My button:
<button id="TestButton" type="button">Display pop up</button>
My dialogs:
<div id="confirmationDialog"></div>
<div id="successDialog"></div>
<div id="errorDialog">error dialog</div>
my jQuery code:
$('#TestButton').click(function () {
$('#confirmationDialog').dialog('open');
});
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 500,
title: 'Add Rule Detail Error',
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});
$('#confirmationDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'Add Rule Detail Confirmation',
open: function (event, ui) {
$(this).load('#Url.Action("AddRuleConfirmation")' +
'?systemCode=' + $('#SystemCode').val());
},
buttons: {
'Yes': function () {
var url = '#Url.Action("AddRuleConfirmationSubmit")';
var data = {
systemCode: $('#SystemCode').val()
};
$.getJSON(url, data, function (message) {
alert(message);
if (message == '') {
$(this).dialog('close');
}
else {
$(this).dialog('close');
$('#errorDialog').dialog('open');
}
});
},
'No': function () {
$(this).dialog('close');
}
}
});
My action methods:
public ActionResult AddRuleConfirmation(string systemCode)
{
DetailConfirmationViewModel viewModel = new DetailConfirmationViewModel()
{
SystemCode = systemCode
};
return PartialView("_AddRuleConfirmation", viewModel);
}
public ActionResult AddRuleConfirmationSubmit(string systemCode)
{
CreateRuleViewModel viewModel = new CreateRuleViewModel()
{
SystemCode = systemCode
};
ResCodeRuleAdd_Type result = ruleService.AddRule(viewModel);
string message = string.Empty;
if (result != ResCodeRuleAdd_Type.R00)
{
// Get the error message from resource file
message = ...
}
return Json(message, JsonRequestBehavior.AllowGet);
}
How do I close the current pop up after the get JSON call and open another?
You have to add the dialog to the page first: Put this prior to your current:
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'My Error Dialog'
});
//current code follows:
$('#confirmationDialog').dialog({
Then what you have should work.
EDIT: I thought about this a bit, you probably need to fix the scope of the $(this) inside the success handler.
change to do:
var myDialog = $('#confirmationDialog').dialog({
and then use:
myDialog.dialog('close');
inside that handler to close the first dialog.
In the getJSON callback close the window
$.getJSON( "test/demo", function( data) {
if(data==='success'){
$( ".selector" ).dialog( "close" );
$( ".selector" ).dialog( "open" );
}
});
To close the jquery UI dialog use this
$( ".selector" ).dialog( "close" );
Top Open a new dialog
$( ".selector" ).dialog( "open" );
for more info check the api of jquery UI http://api.jqueryui.com/dialog/#method-close
var dialogAviso;
url = "search.php";
$.ajax( {
"type": "POST",
"url": url,
"data": data,
"global": false,
"async": true,
"success": function(html){
msg_title ="Search";
msg_width = "600px";
showDialog(html,msg_title,msg_width);
}
} );
function showDialog(texto, titulo, width,height){
.......................
// IMPORTANT: send info to the aux variable, so you can access it from the dialog.
dialogAviso = $('#divaviso').dialog({
autoOpen: true,
width: width,
height:height,
modal:true,
resizable: false,
title: titulo,
dialogClass: 'dialog',
closeOnEscape:true,
beforeClose: function(){
},
close: function(event, ui) {
$(this).dialog( "destroy" );
},
show: "slide",
zindex: 100,
stack:true,
buttons: {}
});
$('#divaviso').html(texto);
}
search.php:
<table>
<tr>
<td><a style=\"text-decoration:underline;cursor:pointer;\" onclick="returnInfo(8)">Hello World</td>';
</tr>
</table>
functin returnInfo (id){
// Do something with the selected item
// close dialog
dialogAviso.dialog("close");
}
I am using jQuery dialog in asp.net. It is working fine for me. The problem is when I open the dialog box, I can still work parent page functionality. I don't want that. Just dialog to modal and should not allow focus on parent page.
window.onload = function onloadFunction() {
//setup edit person dialog
$('#uploadPic').dialog({
autoOpen: false,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
Is there any way to make it modal? Or if lost focus on dialog box close it automatically?
Please help me out.
Use
$('#uploadPic').dialog({
autoOpen: false,
modal: true,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
I have just added the modal option to your sample.
Read the documentation of JQuery Ui Dialog in: http://docs.jquery.com/UI/Dialog
Exist a Option called Modal, here is some samples from doc:
Initialize a dialog with the modal option specified.
$( ".selector" ).dialog({ modal: true });
Get or set the modal option, after init.
//getter
var modal = $( ".selector" ).dialog( "option", "modal" );
//setter
$( ".selector" ).dialog( "option", "modal", true );