Is there a way to make the jQuery accordion collapse when you click off of it? For example if you have one of the accordions open, if you click anywhere that isn't the accordion, then it closes.
jQuery
$(document).ready(function() {
$( "#accordion" ).accordion({
header: "h3",
collapsible: true,
active: false,
heightStyle: "content",
animate: {
easing: "swing",
duration: 300
}
});
});
How about this:
$(document).click(function (event) {
if(!$(event.target).closest('#accordion').length) {//if you clicked outside of the accordion
$("#accordion").accordion({active: false});//collapse all the panels
}
});
Related
So every time a specific dialog box in jQuery UI is closed I want the parent page to be refreshed. How can I achieve this.
jQuery Code:
$(document).ready(function() {
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285
});
$('#createTeamLink').click(function(e) {
dlg.load('admin/addTeam.php');
e.preventDefault();
dlg.dialog('open');
});
});
HTML Code:
<button href="" type="button" id="createTeamLink" class="btn btn-primary custom">Create Team</button>
<div id="createTeam" class="divider"></div>
How do I get the main parent page to refresh/reload after the dialog box is closed?
Use the dialogclose event (http://api.jqueryui.com/dialog/#event-close).
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
close: function(event, ui) {
location.reload();
}
});
You should be able to do this with the reload() function:
window.location.reload();
In your code:
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
close: function() {
window.location.reload();
}
});
When you initialize the dialog, add the close listener.
$( ".selector" ).dialog({
close: function( event, ui ) { window.location.reload(true); }
});
I wanted to save the state of the accordion and keeping it after the page refresh.
So far here is script.
<script>
$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
active: localStorage.getItem('accordion-active')||false
});
});
window.onload = function(){
localStorage.setItem('accordion-active',$('table').accordion('option','active'));
};
</script>
JFIDDLE
but it seems I couldn't make it work. Any suggestions?
You would do that by storing the index of the current active accordion in the acivate event, and then use it in the active option on pageload
$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
activate: function(e, ui) {
localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
},
active: +localStorage.getItem('accordion-active')
});
});
FIDDLE
$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
activate: function(e, ui) {
localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
},
active: parseInt(localStorage.getItem('accordion-active'))
});
});
Use parseInt(localStorage.getItem('accordion-active')) for active option if you want all of the tables in the accordion to load as collapsed initially.
I am trying to get a button inside a jQuery UI modal dialog to close itself and open another modal dialog.
The problem is that the second dialog when opened will always open without the screen overlay you expect from a modal dialog, as a result you can still click on the screen behind the modal.
The jQuery is as follows
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
I have also tried changing the handler to
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog("close");
$("#DialogCreateToDo").dialog("open");
});
Which didn't help
Here is the jsFiddle
Could someone please help me understand why this might be happening? Is this a bug or have I done something wrong?
There is a typo in your code, in the second dialog definition you have "model : true", when it is supposed to be "modal : true"
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
modal: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
Try this: http://jsfiddle.net/tzKf7/3/
Hope it helps.
Moving the .dialog definition into the click handler will do the trick.
$("#btnCreateToDo").click(function (e) {
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: true,
width: 450
});
});
I am using Jquery UI Dialog to display a popup box
I have a page with a grid on. Each row has an icon to open a dialog box
If there are lots of rows and you need to scroll down and click a row at the bottom, then when the dialog box opens it also scrolls the page to the top again
Is there any way to prevent this happening?
I just want the dialog box to be opened and the scroll position of the page to be maintained
$('#AmendLineDialogBox').dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});
You can do chaining like this:
$('#AmendLineDialogBox').click(function(e){
e.preventDefault(); //<--------------^-------prevent the default behaviour
}).dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});
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 );