Trouble disabling jQuery UI tab - jquery-ui

The API says you can't disable the active tab which I think is the crux of my problem.
I have six tabs in one UI Tab. One of the tabs is sometimes empty after an ajax call to fill all the tabs with data based on a user's click of a new UI Accordion selection. I use the "zero" tab as the default selected tab whenever the user makes a new selection.
I use the following to code in the php file that loads the sometimes empty tab to disable the tab when it's empty. It works fine unless the user has this tab selected when clicking a new UI Accordion selection. In only that case, the empty tab will remain enabled.
?>
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs( "option", "disabled", false);
});
</script>
<?php
}else{
?>
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs( "option", "disabled", [2]);
});
</script>
Can someone suggest a stragegy?
Here is the script containing the ajax calls:
<script type="text/javascript">
$('.stallion').live('click', function(){
var id = parseInt(this.id); // Get stallion_ID from clicked "a" tag id.
activestallion(id); // Function to indicate clicked Stallion in Stallion Accordion
// Start loading Overview Tab
var request = $.ajax({
url: "stalliondetails.php",
type: "GET",
data: {stallion_ID : id}
});
request.done( function(html){
$("#tabs-1").html(html);
$( "#tabs" ).tabs( "option", "selected", 0 );
$(".activehorse").fadeOut('1000', function(){
document.getElementById("activehorsename").innerHTML
=document.getElementById(id).innerHTML;
$(".activehorse").fadeIn('1000');
});
$("#tabs").tabs( "select" , 0 );
});
// Overview Tab load finished.
//Pedigree Tab load starting.
var request = $.ajax({
url: "pedigreedetails.php",
type: "GET",
data: {stallion_ID : id},
success: function(html){
$("#tabs-2").html(html);
}
});
//Pedigree Tab load finished.
//Progeny Tab load starting.
var request = $.ajax({
url: "progenydetails.php",
type: "GET",
data: {stallion_ID : id},
success: function(html){
$("#tabs-3").html(html);
}
});
//Progeny Tab load finished.
//News Tab load starting.
var request = $.ajax({
url: "newsdetails.php",
type: "GET",
data: {stallion_ID : id},
success: function(html){
$("#tabs-4").html(html);
}
});
//News Tab load finished.
//Race Record Tab load starting.
var request = $.ajax({
url: "racerecorddetails.php",
type: "GET",
data: {stallion_ID : id},
success: function(html){
$("#tabs-5").html(html);
}
});
//Race Record Tab load finished.
//Analysis Tab load starting.
var request = $.ajax({
url: "analysisdetails.php",
type: "GET",
data: {stallion_ID : id},
success: function(html){
$("#tabs-6").html(html);
}
});
//Analysis Tab load finished.
//Update the Seasons Request form to this Stallion.
updateseasons(id);
$( "#tabs" ).tabs( "option", "selected", 0 );
$("button").button() ;
});
</script>
Thanks for any help.

To help others following this thread I wanted to post what ended up fixing this problem.
I was using
$("#tabs").tabs("option", "disabled", [2]);
When I switched to
$("#tabs").tabs("disable", 2);
The problem was corrected.
Thanks for your help Bart and William.

Try
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs( "option", "disabled", 2);
});
</script>
or multi-disable
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs('option','disabled', [1, 2, 3, 4]);
});
</script>
instead of
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs( "option", "disabled", [2]);
});
</script>
to enable tab and move to use
$( "#tabs" ).tabs( "enable" , 1 )
$( "#tabs" ).tabs( "select" , 1 )
*counting starts from 0

Related

Unable to access DIV element in Bootstrap Popover / Jquery autocomplete

I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but not on popover. Please help!
Text: <input type="text" id="add_game_search"/></div>'>Popover
$(document).ready(function () {
$('[data-toggle="add_game"]').popover({
'trigger': 'click',
'html': 'true',
'placement': 'bottom'
});
});
$(document).ready(function () {
$('.add_game_search').autocomplete({
source: function (request, response) {
$.ajax({
global: false,
url: "http://www.google.com",
dataType: "html",
success: function (data) {
response($.map(data, function (item) {
alert("in response");
}));
}
});
}
});
});
js fiddle: http://jsfiddle.net/hwEp6/2/
simplified fs fiddle proving the concept: http://jsfiddle.net/hwEp6/3/
Here the problem is not with jQuery autocomplete or bootstrap. The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
$('body').on('click', '#add_game_search', function () {
alert("here");
});
});
JSFiddle

dialog is showing the same result

i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});

jQuery UI button url

Im using a jQuery UI button and I want to point it to specific url.
How is that possible?
<button>Button</button>
<script>
$(function() {
$( "input[type=submit], button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
Html:
<button id="btYourButton">Button</button>
Javascript:
<script>
$(function() {
$( "#btYourButton" ).button().click(function( event ) {
window.location = "http://google.com"
});
});
</script>

reopen jquery ui dialog, empty and refresh

This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks

Autoclose jquery modal dialog after showing an alert box

I am invoking a jquery modal dialog in which I have a save button. The save button in turn makes an ajax call and on success an alert box is displayed "Data Saved ! " with an OK button.So far good.
Now after the "Data Saved" alert box is closed, I want to automatically close the previously invoked modal dialog also.Has anyone done anything similar to this ?
$( "#addFriendButton").click(function() {
$( "#addNewFriend" ).dialog({
title: 'Add a new friend.',
height:'auto',
width:'auto',
modal: true
});
});
//end addFriendButton
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
}
});
});
function displayOKAlertBox(message){
$("#alertMsg").html(message);
$( "#alertbox" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
Try the following:
$("#alertbox").dialog({
modal: true,
buttons: {
Ok: function() {
$('.ui-dialog').dialog('close');
}
}
});
Try the following
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
$( "#alertbox" ).dialog("close");
}
});
});
I think that would do it, but maybe I'm mistaken !

Resources