I am using this jquery-ui to display a dialog box but it comes with a freebee named as "close" which I don't want,
you can find rest of code here, Why my Dialog box isn't working
In html its coming up as
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
Did you look at the documentation?
http://api.jqueryui.com/dialog/
Hiding the close button
In some cases, you may want to hide the close button, for instance, if
you have a close button in the button pane. The best way to accomplish
this is via CSS. As an example, you can define a simple rule, such as:
.no-close .ui-dialog-titlebar-close { display: none; }
Then, you can simply add the no-close class to any dialog in order to hide it's
close button:
$( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
} ] });
Related
I have a form with three inputs: Save, Delete, and Exit. When Delete is clicked, I pop a JQuery UI Dialog box to confirm that the user wants to delete that data. They have two buttons as options: Delete or Cancel. Cancel works fine and closes the Dialog box. If they click Delete, I wish to submit the original form and delete the data as if the Dialog box was not there, which is not working. I click it and nothing appears to happen.
I am attempting to submit the "update_purchase" form but simulate using the "delete_purchase" input to convey information. With the below code, once I click "Delete" on the Dialog box nothing happens; however, if I click "Cancel" to exit the dialog box and then click "Exit" on the original form, I find the entry has been deleted.
Thanks for any and all help.
<form method="post" id="update_purchase" enctype="multipart/form-data" action="{{ url }}">
...
<input type="Submit" name="save" value="Save">
<input type="Submit" name="delete_purchase" id="delete" value="Delete">
<input type="Submit" name="exit_edit" value="Exit">
// Confirm Delete dialog
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
height: 180,
modal: true,
buttons: {
"Delete": function() {
$("#update_purchase").submit( function(eventObj){
$('<input />').attr('type', 'hidden')
.attr('name', "delete_purchase")
.attr('value', "Delete")
.appendTo('#update_purchase');
$( this ).dialog( "close" );
return true;
});
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#dialog").dialog("open");
return false;
});
});
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.
I am wanting to pass a variable to a jquery dialog window. I am using classic ASP and have onyl really touched on the world of jquery. I have spent a few hours researching and tring to use the .data method but are having trouble. Your time and assitance would be very much apriciated!
Here is my stripped down page:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
show: "slide",
hide: "fade",
width: 452,
modal: true,
buttons: {
"Ok": function() {
PostItNote.submit();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
and this is how I call the window:
<a href='#' id='dialog_link' CLASS='OrangeButton'> Show Window </a>
and the contents of my window:
<div ID="dialog" TITLE="Periodic Report">
stuff here
</div>
Why can I not do this:
<a href='#' id='dialog_link(someValue)' CLASS='OrangeButton'> Show Window </a>
Thank you in advance
How it is used in the ASP loop is:
do until Products.EOF
--other code here---
<a href='#' id='dialog_link(Products(0))' CLASS='OrangeButton'>
--other code here---
products.moveNext
loop
The dialog is just a div on your page, so it can't really be "passed" a value. It can be manipulated by any JavaScript variables in scope though. You could change your click handler to use a variable to manipulate the dialog:
var myVariable = "Some new text for the dialog";
$('#dialog_link').click(function(){
//New code to "pass" a value to the dialog
$('#dialog').text(myVariable);
$('#dialog').dialog('open');
return false;
});
Or you could use the open member of the dialog:
...
width: 452,
open: function() { $('#dialog').text(myVariable); },
modal: true,
...
To make changes to the dialog div whenever it is opened.
The code id='dialog_link(someValue)' will not do anything, as the id attribute cannot make function calls, only event handlers like onchange can do that. Even if it could, dialog_link is not a function that can be passed a value. It is just the id of another element.
I'm sure you're probably already aware, but the jQuery documentation is very useful- here are the docs for dialog.
Edit
In response to your comment: I would drop the $('#dialog_link').click(); statement and change the link code to the following:
<a href='#' class='OrangeButton' onclick='openDialog(someValue);'>Show Window</a>
And then add the JavaScript function to be called on the click event:
function openDialog(value) {
$('#dialog').text(value);
$('#dialog').dialog('open');
}
Edit 2
Inside of the ASP loop something like this should do the trick:
Response.Write("<a href='#' onclick='openDialog(" & Products(0) & ");'>Show</a>")
This will create an <a></a> element on the page with an onclick handler that passes the desired value to openDialog, making it accessible by the dialog.
I changed the code for the link slightly so that it all fit on one line, but you could always add back the class='OrangeButton' and all that if you'd like.
I am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.
When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.
How can I override this and have the focus set to 'ID' field when opened?
here the open function is called after the dialog box open happens.
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourText').focus();
}
});
To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
Source code to create a dialog with two buttons and set focus on a button
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog" ).dialog({
modal: true,
minHeight:200,
minWidth:190,
buttons: {
Delete: function() {
// do something
},
Cancel: function() {
$( this ).dialog("close");
}
}
});
//to set focus on cancel button
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
});