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
Related
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/
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'm using JQuery Autocomplete feature.
The source come from url.
I wanted to know if I can know that the source is empty,
I mean i want to print alert message when the source the come back from the url is empty.
my code is
$(function() {
$( "#tags" ).autocomplete({
source: remoteurl
select: function (event, ui) {
alert(ui.item.value);
return true;
}
});
});
Thanks,
John.
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
I want to hide the close button in the title bar of the dialog box. I want the user strictly complete the steps in dialog, so restrict the ways of hiding the dialog.
Try this:
$(".ui-dialog-titlebar-close").hide();
You can hide close button on dialog's open event.
Ref : http://jqueryui.com/demos/dialog/#event-open
This event is triggered when dialog is opened.
Code examples
Supply a callback function to handle the open event as an init option.
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});
Bind to the open event by type: dialogopen.
$( ".selector" ).bind( "dialogopen", function(event, ui) {
...
});
Even better, use CSS...
.ui-dialog-titlebar-close {
display:none;
}