If I load a JQuery UI Dialog without loading external content, the dialog can be closed with the "Close" button and the dialog can be re-opened multiple times. If I load content in, neither of these two capabilities works. Code below. Any hints?? Thanks in advance!!
$(document).ready(function() {
$('#viewdonationsdialog').dialog({
autoOpen:false,
modal:'true',
width:600,
height:400,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
$('#viewdonationslink').click(openDonationsDialog);
});
var openDonationsDialog = function(){
/* Including the next line causes failure.
Removing it results in success (except, of course, that my page content isn't loaded!! */
$('#viewdonationsdialog').load('/donationsdata');
/* And then there's the rest... */
$('#viewdonationsdialog').dialog('open');
return false;
};
Related
In my app I would like to re-use the panel so I call this function when opening index.html:
var add_panel=function() {
//add button
$('[data-role="header"]').append('Menu');
//panel
$.get('panel.html').success(function(data) {
$('div[data-role="page"]').append(data);
$('#leftpanel').trigger('create');
$('#leftpanel').panel();
});
//open panel
$('body').on('click', '.ui-icon-bars', function() {
$("#leftpanel").panel("toggle");
});
}
This works great on the first page and when returning to this page from another page.
I had hoped to call the same function inside "pagecontainertransition" to add the panel to other pages as well, but this doesn't seem to work:
//handle page transitions
$('body').on('pagecontainertransition', function(event, ui) {
add_panel();
});
Can this be done?
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
In docs I didn't see such information.
There are options to close dialog in such cases:
1) push Esc;
2) click on "OK" or "Close" buttons in the dialog.
But how to close dialog if click outside?
Thanks!
Here are 2 other solutions for non-modal dialogs:
If dialog is non-modal Method 1:
method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2:
http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
I found solution on ryanjeffords.com:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$('.ui-widget-overlay').live("click",function(){
$("#dialog").dialog("close");
});
});
</script>
If dialog is modal, then paste these 3 lines of code in the open function when you create your dialog options:
open: function(event,ui) {
$('.ui-widget-overlay').bind('click', function(event,ui) {
$('#myModal').dialog('close');
});
}
Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
The plugin is also on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside
Laurent
This is my solution.
I have, for example
<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>
Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.
// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
if( $("div.ui-dialog").is(":visible") )
{
var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
if ($("#"+openDialogId).dialog("isOpen"))
{
$("#"+openDialogId).dialog('close');
}
}
});
I want to display an jquery UI dialog when a user focues a certain input box. It works the problem is, that the input box won't get the focus after closing the dialog, meaning user clicks into input box, dialog is opened. User closes dialog -> input box does not have focus.
The only way to actually focus the input box is ti click into it a second time while the dialog is already displayed. This is pretty annoying. i would like the inputbox to have focus after closing the dialog.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
You could use
$(function(){
InitiliseInput();
});
function InitiliseInput(){
$('#identifiers').bind('focus', function() {
$('#identifiersDialog').dialog({ close: function() {
$('#identifiers').unbind('focus').focus().blur(function(){ InitiliseInput()});
}});
});
}
Working example here http://jsfiddle.net/RCBQs/1/
The blur function then resets the dialog once the focus has moved away from the input, so that refocusing opens the dialog again.
This should help.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false, close: function() { $('#identifiers').focus() }});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
I have been wrestling with this one for a while now.
I want to have a confirm() before someone changes the accordion.
I have tried:
$(document).ready(function() {
var edited = false;
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
});
With little joy! I have also tried something like this
$(".accordion-me h3").each(function() {
$(this).unbind("click");
$(this).click(function(e) {
if (confirm("You have unsaved changes! Do you want to navigate away?")) {
$(this).unbind("click");
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
$(this).click();
}
});
});
But again with no joy.
Any help would be greatly appreciated.
Cheers
Use an empty event when creating the accordion, which will allow you to manage the click event of the accordion using a jQuery .click function.
You can then process the confirm box and allow the accordion click event to be executed only if confirmed.
$(document).ready(function()
{
var edited = false,
accordion_me = $('.accordion-me');
// activate the accordion, but with an empty event
accordion_me.accordion({
autoHeight: false,
navigation: true,
event: ''
});
// here's the new accordion event
$('.accordion-me h3').click(function()
{
// find the index of the event being called
var i = $('.accordion-me h3').index(this);
// if we have unsaved changes and do not confirm, stop accordion execution
if (edited && !confirm('You have unsaved changes. Do you want to navigate away?'))
{
return false;
}
// continue with the accordion execution. Activate the requested event index.
accordion_me.accordion('activate', i);
return false;
});
});
If your accordion is collapsible (as mine is) your accordion will still work as it did before.
Also, if you only have 1 accordion, I would recommend using an id to call it instead of the .accordion-me class, which will save some overhead.
If you still need to use a class to call it, put an html tag before it, i.e. div.accordion-me.
You have to bind it to the click event on the anchor tag. For example, if your header links are:
header 1
code would be (also in the document.ready function)
$('.accordionHeaderLink').click(function(){
if (!confirm("You have unsaved changes. Do you want to navigate away?")) {
return false;
}
});