I'm using the following to control my accordion:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false, collapsible: true, active: false
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
It works well unless I open the same section twice. Then, the accordion freezes and I get the following error:
ui.newHeader.offset() is undefined
The accordionchange event appears to be the jQuery event that corresponds to the accordion's activate event; yes, this is a bit confusing but that's what the source tells me:
// change events
(function( $, prototype ) {
//...
} else if ( type === "activate" ) {
ret = _trigger.call( this, "change", event, {
The activate documentation has this to say:
activate( event, ui )
Triggered after a panel has been activated (after animation completes). [...] If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
So your ui.newHeader is an empty jQuery object and empty jQuery objects don't have offset()s. A quick length check on ui.newHeader will probably sort you out:
$('#accordion').bind('accordionchange', function(event, ui) {
if(ui.newHeader.length)
$(window).scrollTop(ui.newHeader.offset().top);
});
Demo: http://jsfiddle.net/ambiguous/e3gUW/
Related
I am trying to do something similar to this example I found here: http://jsfiddle.net/mekwall/sY7Vr/2/
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.addClass("drag")
.html("New item!")
);
}
});
In my case, I have an action bar that contains 'buttons' and a page. When I drag an action 'button' from the action bar (ie "Add text box") and do the drop, I want to insert a input rather than the button itself.
Is there a good way to do this?
Thanks for your time.
All you need to do is replace the content in the html method. The code below is inserting the html for an input of type text and is then removing the dragged item.
Updated Fiddle
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.html("<input type='text' class='new-input'/>") //Add an input
);
//Remove the dragged item. You can use "hide" here as well
$(ui.item).remove();
}
});
I m using jquery tabs .Like to know how to refresh content on tab click .
I m using document ready function with
$(#TABS).TABS()
$(document).ready(function(){
$("#tabs").tabs();
$("#tabs").bind("tabshow",function(event,ui){window.location.href=ui.tab;});});
See the "select event" here
It says:
This event is triggered when clicking a tab.
Code examples
Supply a callback function to handle the select event as an init option.
$( ".selector" ).tabs({
select: function(event, ui) { ... }
});
Bind to the select event by type: tabsselect.
$( ".selector" ).bind( "tabsselect", function(event, ui) {
...
});
in jQuery-UI 1.10, the following should help:
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
Edit: More code details:
$(function() {
$("#TABS").tabs();
$("#TABS").on('click','li',function(event,ui) {
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
});
});
Here is a link to jsfiddle
How can I set a callback function to be ran when a modal dialog is closing, without the click of a button or close (x) icon?
you can also try,
$( ".selector" ).dialog({
beforeClose: function(event, ui) { ... }
});
This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
Why dont you try the event close of jQuery UI dialog?
Code examples
Supply a callback function to handle the close event as an init option.
$( ".selector" ).dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
...
});
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;
}
});
I am trying to override close method of Jquery Dialog method.
Code :
jQuery.Dialog.close = function() {
alert('my close');
}
But its not working. Please help.
There is an event called beforeClose which would allow you to do what you want, I think. When it fires, you can hide the dialog, then return false, which would prevent the dialog from actually closing.
$( ".selector" ).dialog({
beforeClose: function(event, ui) {
$(this).hide();
return false;
}
});
Reference: http://jqueryui.com/demos/dialog/ under the Events tab below the example
You're setting it up wrong. Check this out to see how to do it correctly.
Ok, so that link doesn't take you where I thought it would. Here's the relevant bit from jqueryui.com.
closeType:dialogclose
This event is triggered when the dialog is closed.
Code examples
Supply a callback function to handle the close event as an init option.
$('.selector').dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$('.selector').bind('dialogclose', function(event, ui) {
...
});