I am trying to dynamically load some Tabs using html and jQuery. The input is from Java. The Tabs are not formatting as Tabs (I am using jQuery to activate them). I have tried placing this function in its current location, at the start of the function that loads the tabs and at the end of the function. When it is at the end of the function the load is triggered twice. In each case all the tab content is on the first tab.
When I select each Tab it becomes underlined; however, the panel is not displayed.
HTML:
<div id="campDisplay" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showCampForm">
<div class="page-header">
<h1>Camps</h1>
</div>
<div class="col-md-12">
<div class="panel with-nav-tabs panel-primary" id=panel-container>
<div id="tabHeading">
<ul>
</ul>
</div>
<div class="panel-body">
<div class="tab-content" id="tabContent">
</div>
</div>
</div>
</div>
</form>
</div>
JS:
$(document).ready(function(){
//Include the common menu and amend
$("#includedContent").load("Menu.html", function(){
$("#liHike").removeClass("disabled");
$("#liEvent").removeClass("disabled");
$("#liPenPal").removeClass("disabled");
});
$('[data-toggle="tooltip"]').tooltip();
displayCamp(); // get the existing camp details
$("#tabHeading").tabs({
load: function(event, ui) {
}
});
}); // end document.ready
function displayCamp() {
$('#ajaxGetUserServletResponse1').text('');
sessionStorage.setItem('ssCamp', 'Pack Holiday');
var dataToBeSent = {
ssYMID : sessionStorage.getItem('ssYMID'),
ssCamp : sessionStorage.getItem('ssCamp'),
};
//Get camp details
$.ajax({
url : 'CampView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
cache: false
})
.fail (function(jqXHR, textStatus, errorThrown) {
//alert(jqXHR.responseText);
if(jqXHR.responseText.includes('No camps')){
$('#ajaxGetUserServletResponse').text('No camps.');
}else{
$('#ajaxGetUserServletResponse').text('Error getting joined data.');
}
$("#startDate").focus();
})
.done(function(responseJson1a){
// JSON response to populate the Tabs
dataType: "json";
// Event structure is:
// String eventId, String cdId, String eventType,
// String eventDateStart, String eventDateEnd, String eventLocation, String eventDetails,
// String eventNights, String eventNightsBuilding, String eventNightsCanvas, String eventPicture,
// String eventKm, String eventKmActual, String eventKmOffset
//Add Tab headings
$("#tabHeading").find("li").remove();
var headingItems = '';
for(var i = 0; i < responseJson1a.length; i++) {
var obj = responseJson1a[i];
console.log(obj.eventLocation);
headingItems += '<li id="' + i + '"><a href="#">' + obj.eventLocation + '</a></li>';
}
$("#tabHeading ul").append(headingItems);
//Add Tab contents
var contents = '';
for(var i = 0; i < responseJson1a.length; i++) {
var obj = responseJson1a[i];
contents += '<div class="tab-pane fade in active" id="' + obj.eventLocation + '">';
contents += '<h3>Menu 1</h3>';
contents += '<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
contents += '</div>';
$("#tabContent").append(contents);
contents = '';
}
})
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#campImage')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Result:
