Ajax success call specific bootstrap tab - php

Question

I am creating one small program in which Ι use two tabs in single page and call one ajax call to do operations dynamic.
Below is my code:
HTML Code below
OffyApp Agents
ListHub Agents
<div id="Home" class="tabcontent">
// Some code
</div>
<div id="News" class="tabcontent">
// Some code
</div>
Script Code Below
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
AJax call Below
$.ajax({
url: "sendInvite.php",
type: "POST",
data: {list: inviteEmails},
dataType: "JSON",
beforeSend: function() {
$("#loading-image").show();
},
success: function (data) {
//alert(data);
if (data.status == 200) {
alert("Invite Sent Successfully.");
location.reload(true);
}
},
error: function (msg) {
alert(msg);
}
});
If ajax call give me success then i want to redirect to my second tab like #News

Answer 1

success: function (data) {
if (data.status == 200) {
alert("Invite Sent Successfully.");
location.reload(true);
}}
data.status only will give you an error bacause neither data is JSON nor data have key status
Hence, your if statement is always false. data is the actual response as the plain text from the requested file. Therefore data have no such key like status.(eg.data is the request.responseText)
jQuery Ajax function has three variables:
success: function (a,b,c){}
Where:
a is the actual responseText
b is the textStatus &
c is xhr
Hence, you have to write success function as:
success: function (data,stxt,xhr){
if(xhr.status==200){
alert("Invite sent successfully!");
window.location.reload();
}
}

Answer 2

You could write a function
function activateTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
Then upon success of your ajax call you can activateTab('news');
But as #Ritesh said, that function will not run because data does not contain a key called success on it, it will just contain the data you get from the server. You need to pass all the parameters into your success callback in order to access the response code.