0

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:

enter image description here

1 Answer 1

1

Because your code format is wrong.
Let's look at the document of jQuery UI tabs. Link

So, the basic format is...

<!-- You need a div, which contains element all related to tabs -->
<!-- then you can use $("#your-tab").tabs(); -->
<div id="your-tab">
  <!-- What is the connection between list and content? (list:href - content:id) -->
  <ul id="tab-header">
    <li href="#tab1"></li>
    <li href="#tab2"></li>
  </ul>
  <!-- It's okay, if they have a parent div, I think. -->
  <div id="tab1>content1</div>
  <div id="tab2>content2</div>
</div>

Here's jsfiddle.

Lastly, I can tell that you use bootstrap classes. Bootstrap also has a tab component, but this time I used jQuery UI.

UPDATED
Yeah, I could see there was a sign that you tried Bootstrap tabs once. (class="fade in active") I assumed you use Bootstrap v3- because you used a class, panel. There's no big difference between jQuery UI and Bootstrap. I left comments in the jsfiddle.

BootStrap v3 version

Sign up to request clarification or add additional context in comments.

1 Comment

I had two "Over the rainbow" which caused issues so I changed href="#' + obj.eventId +'" and '<div id="' + obj.eventId + '">' (eventId is unique) and then your answer worked a treat. Extra marks if you can provide me with a Bootstrap answer as I could not get that to work :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.