$("#termSheetPrinted").dialog({
autoOpen: false,
resizable: true,
height: 800,
width: 950,
position: 'center',
title: 'Term Sheet',
modal: true,
buttons: {
"Print": function () {
$("#termSheetPrinted").jqprint();
},
"Cancel": function () {
$("#termSheetPrinted").html('');
$(this).dialog("close");
}
}
});
This dialog appears with an 'x' on top of the window to close it. I want the $(this).dialog("close"); to run when this 'x' is clicked just as the 'Cancel' button does.
How can I do that?
I don't know of a way to specifically change what happens when the "x" is clicked, but you can create "close" or "beforeClose" event handlers to ensure that the stuff you need to happen when the dialog is closed, happens.
I'd create a separate function that's called on the Cancel button click and the beforeClose event. (See JacobM's links above to the close and beforeClose events.)
Here's a super-simple jsFiddle I put together to show how to do this and the impact if you call the function from both the cancel button click and the beforeClose event (and the order that they fire). Ideally, you'd just have $(this).dialog("close"); in your Cancel button function and move $("#termSheetPrinted").html('') call to your extracted function.
A little more explanation to the accepted answer(for all us that need a little more help ;-) ):
say you want to set focus in a field identified by it's id when the user presses the [x]:
...
$("#myDivId").dialog({
resizable: true,
modal: true,
dialogClass: "cssClass",
close: function() {
$("#focusFieldId").focus();
}
});
...
see: https://jquery-ui.googlecode.com/svn/tags/1.8.24/docs/dialog.html#event-close
Related
I've been playing with official Fullcalendar CodePen
and can't find a way to make event non-editable (or editable).
In demo, the global option is set: editable: true. If I try to change this setting per event with:
eventRender: function(event, element){
event.editable=false;
}
nothing changes. Events are still all editable (resizable, draggable,..) . I found this post jquery-fullcalendar-change-editable-properties-of-particular-event-on-a-calendar
where the suggestion is:
editable: false,
eventRender: function(event, element) {
if(event.userId === user.id) {
event.editable = true;
}
}
but this doesn't work. Changing event.editable under eventRender or eventAfterRender, does not take any effect.
Is it possible to change this setting dynamically (per event)?
You can use an eventDataTransform function to check if your event has the desired user Id and then change the editable property to true.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'https://fullcalendar.io/demo-events.json?overload-day',
eventDataTransform: function(event){
if(event.userId === user.id){
event.editable=true;
}
return event;
}
});
});
Edit: I think the eventRender function is meant to be used to modify the element. To modify the event you should use the eventDataTransform function
I want to show a confirmation box include 4 options: Yes/No/Yes to All/No to All after user click a button in my aspx page. I have seen a lot of sample but it only contain Yes/No option. Please show me the way to do that.
There's no native javascript function for that (I guess you saw samples that are using confirm function).
Give a try to a javascript library, that create pseudo dialog.
One of the most used is JQueryUI. Especially, look at the Dialog confirmation sample, and you'll ends with something like:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
// Handler for Yes
},
"No": function() {
// Handler for No
},
"Yes to all": function() {
// Handler for Yes to all
},
"No to all": function() {
// Handler for no to all
}
}
});
});
</script>
I have an aspx page that contains a dialog box defined with JQueryUI
$('#dialog').dialog({
modal: true,
autoOpen: false,
minWidth: 500,
title: 'my dialog',
buttons: { Finished: function() { $(this).dialog("close"); }
}
});
Within the page I have a button which is supposed to open the dialog
<button class="button" id="dialogLoader">Open</button>
The JavaScript for opening the dialog is
$('#dialogLoader').live('click', function(event) {
event.preventDefault();
$('#dialog').dialog("open");
loadDialogContent();
});
In Chrome Firefox etc all is good but IE9 does not load the dialog, even though when debugging all code appears to execute fine.
Any Ideas
UPDATE
Still have this problem I have updated the code above to show that I am now utilising preventDefault(); which I thought was the cause of the problem (if the problem is indeed event bubbling). but I still have no remedy to this if this was plain HTML it would work but I fear the involvement of ASP has caused some irregularity in rendering, which unfortunately returns no error.
UPDATE
Could the fact that this button is within JQueryUI tabs be causing the issue in IE9?
as you wrote your debug info is clean, this is just one idea. I hope this helps a little bit. attachEvent for Explorer.
var button = document.getElementById('dialogLoader');
if (button.addEventListener) {
button.addEventListener('click', function() {
//action
}, true);
} else if (button.attachEvent) {
button.attachEvent('click', function() {
//action
}, true);
}
I am using a jquery dialog, but the dialog.open() does not display the dialog. (The site only works with IE 7 & 8, so I cannot see if the dialog is in fact displayed.)
I have ensured that these dependencies are available:jquery-ui.css; jquery-ui-1.8.16.custom.min.js; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
In the markup: I creates the dialog in the document ready method:
var $dialog;
$(document).ready(function () {
$dialog = $("#dialog")
.dialog({
autoOpen: false,
title: 'My Modal Dialog',
position: 'center',
modal: true,
closeOnEscape: true,
buttons: [{ text: "Close", click: function () { $(this).dialog("close"); } }]
});
});
Another javascript function contains these lines to "open' the dialog. When I inspect the dialog, it is an Object, but I never see it.
function showDialog() {
$dialog.html("Hello World");
$dialog.dialog('open');
}
The code looks sound, and in another project I've worked on, works without a hitch. So that leaves me to think that it IS opening, but I can't see it for some reason. Has anyone encountered this, or found a solution to this?
Thank you for any help you can provide.
Have you created parent element:
<div id="dialog">..
in document ?
I have a gridview control with delete asp:ImageButton for each row of the grid. What I would like is for a jquery dialog to pop up when a user clicks the delete button to ask if they are sure they want to delete it.
So far I have the dialog coming up just fine, Ive got buttons on that dialog and I can make the buttons call server side methods but its getting the dialog to know the ID of the row that the user has selected and then passing that to the server side code.
The button in the page row is currently just an 'a' tag with the id 'dialog_link'. The jquery on the page looks like this:
$("button").button();
$("#DeleteButton").click(function () {
$.ajax({
type: "POST",
url: "ManageUsers.aspx/DeleteUser",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#DeleteButton").text(msg.d);
}
});
});
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
bgiframe: true
});
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
The dialog itself is just a set of 'div' tags.
Ive thought of lots of different ways of doing this (parameter passing, session variable etc...) but cant figure out how to get any of them working.
Any ideas are most welcome
As always, thanks in advance to those who contribute.
I've recently done something exactly the same at work - confirmation of a delete item. I solved it by using the Data http://docs.jquery.com/Data method to store the value I wanted to pass along.
So for example my delete links had the following:
Delete
Then monitor all clicks on for class "delete", when this happens set the data on the dialog:
$("#dialog").data("id", $(this).attr("id"));
Which will then be accessible when you're in your dialog.
$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete': function() {
alert($(this).data('id'));
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
Hope this helps, shout if it's not clear.