Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D
I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.
$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});
jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});
You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.
Related
I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?
I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.
I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});
The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. "Uncaught TypeError: Cannot read property 'apply' of undefined"
HTML:
<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
<div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#reject-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": {
text: "OK",
id: "confirm-reject"
},
"Cancel": {
text: "Cancel",
id: "cancel-reject"
}
}
});
$("#btn-reject").click(function (e) {
e.preventDefault();
$("#reject-dialog").dialog('open');
});
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
$('#confirm-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('reject');
});
}); //dom
</script>
JQuery versions:
you are binding to buttons that don't exist yet on document.ready.
instead you can tell the dialog what callback to trigger while creating the buttons.
Update:
according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats:
1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
i updated the code to reflect that.
code
<script type="text/javascript">
$(document).ready(function () {
var dialogDiv = $("#reject-dialog");
dialogDiv.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
id: "confirm-reject",
click: function() {
dialogDiv.dialog("close");
console.log('confirm');
}
},
{
text: "Cancel",
id: "cancel-reject",
click: function(){
dialogDiv.dialog("close");
console.log('reject');
}
}
]
});
$("#btn-reject").click(function (e) {
e.preventDefault();
dialogDiv.dialog('open');
});
}); //dom
</script>
You need to use .on()'s event delegation since the buttons don't exist when the code is executed.
For example, change:
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
to:
$(document).on('click','#cancel-reject', function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
jsFiddle example
Ideally you want to bind to an element that already exists on the page that's closer than document for better performance.
You need to inform a click function, even you need to bind a click handler after the create the dialog. I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.
So, I suggest that you define an empty function (or jQuery.noop):
"Confirm": {
text: "OK",
id: "confirm-reject",
click: function(){} // or jQuery.noop()
}
yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)
This is the JSFIDDLE
And now this is my javascript that is not working for me :
<script>
$(document).ready(function() {
$(function() {
var currentForm;
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
currentForm.submit();
}
}
});
});
$("#signinform").submit(function() {
currentForm = this;
$('#dialog-confirm').dialog('open');
return false;
});
});
</script>
The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.
Thanks
It's because your re-using the $(document).on('submit', "#signinform", function(e) method
which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.
You need to set a temporary variable to see wether you come from your code or the submit button.
Here is a JSFiddle with a working test, but you should do something nicer =)
EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.
So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.
A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".
Try this way (jsFiddle):
$(document).ready(function() {
window.enterQueue=false;
$("#signinform input:submit").on('click',function() {
return getDialog(window.enterQueue);
});
function getDialog(enterQueue){
if(!enterQueue){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: true,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
window.enterQueue=true;
$(this).dialog("close");
$("#signinform input:submit").trigger('click');
}
}
});
return false;
} else
return true;
}
});
I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1
This is my solution :
<script type="text/javascript">
$(document).ready(function()
{
var Form = $("#signinform");
$(function()
{
$("#dialog-confirm").dialog(
{
resizable: false,
autoOpen: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
'Cancel': function()
{
$(this).dialog("close");
Form.data("confirmProgress", false);
},
'Submit Information': function()
{
Form.submit();
Form.data("confirmProgress", false);
}
}
});
});
Form.submit(function()
{
if (!$(this).data("confirmProgress"))
{
$(this).data("confirmProgress", true);
$('#dialog-confirm').dialog('open');
return false;
} else {
return true;
}
});
});
// Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
$(document).on('click', "#Cancel", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
$("#dialog-noconfirm").dialog(
{
resizable: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Go Back": function()
{
window.location.href = href;
},
}
});
});
</script>
I have a jQuery UI dialog which is initialized
$('#jqDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: { 'Ok': function () { $(this).dialog('close'); } },
});
and then I want to change the buttons programatically w/o re-initializing the plugin instance.
$('#jqDialog')
.dialog('options',
{
buttons: {
'Ok': function () {
$(this).dialog('close');
store(id);
},
'Cancel': function () { $(this).dialog('close'); }
}
})
.dialog('open');
When the dialog window is opened it still have the original button. With the Button plugin you have to call .button("refresh"). Is there a similar method that needs to be called with the Dialog plugin?
What you have just needs a tweak, the method name is 'option' (no s) like this:
.dialog('option',
This works even when the dialog's open, you can test it out here.
You could destroy the dialog first by calling $dlg.dialog('destory'). and reevaluate the dialog you want.
The only wrong thing in your code is the use of the word options instead of option as in the following code
$("jqDialog").dialog("option", "buttons",
{
"Ok": function() {
$(this).dialog("close");
}
});