dimanche 19 avril 2015

Bootstrap Tab and AJAX Function misfunction

I've got a simple tab and a button to activate one of the tab to bypass the pills.



<ul class="nav nav-tabs hide" role="tablist" id="myTab">
<li role="presentation" ><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" id="aaa"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">1</div>
<div role="tabpanel" class="tab-pane" id="profile">2</div>
<div role="tabpanel" class="tab-pane" id="messages">3</div>
<div role="tabpanel" class="tab-pane" id="settings">4</div>
</div>


and some javascript



$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$(document).ready(function(){
$('#btnn').click( function() {
$('#myTab a[href="#messages"]').tab('show');
});
});


however when i use this code in my real page, the button does not function anymore, because i have a slider that does an immediate ajax call. If I remove the first AJAX call it works. But as you imagine, i actually need that ajax call :)



$(function() {
$( "#slider" ).slider({
value:10,
min: 0,
max: 12,
step: 1,
range: "min",
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " mois");
},
change: function(event, ui) {
// when the user change the slider
},
create : function(event, ui) {
var request = $.ajax({
url: "Ajax_livret.php",
type: "POST",
data : 'duree=' + 10,
dataType: "html"
});

request.done(function(msg) {
$("#result").html(msg);
});

request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});

},
stop: function(event, ui) {
var request = $.ajax({
url: "Ajax_livret.php",
type: "POST",
data : 'duree=' + ui.value,
dataType: "html"
});

request.done(function(msg) {
$("#result").html(msg);
});

request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
},

});
$( "#amount" ).val( $( "#slider" ).slider('value') + " mois");

});



</script>


Anyone has an idea why this is occurring and how to fix it?


cheers


Aucun commentaire:

Enregistrer un commentaire