Initially, my HTML code includes a set of <li> elements that I want to dynamically add to the existing <ul>.
<ul class="tabs" id="modal_addquestion_ul">
<li class="tab-link current" data-tab="multipleChoice">Multiple Choice</li>
<li class="tab-link" data-tab="trueOrFalse">True or False</li>
<li class="tab-link" data-tab="fillInTheBox">Fill in the Box</li>
</ul>
The current tab is initially set to Multiple Choice.
To achieve this dynamic addition, I utilize a JQuery method that retrieves data from a database query.
function loadQuestionTypesToULTab(ULId){
$.ajax({
url: 'controller/get_all_question_types.php',
type: 'POST',
dataType: 'json',
success: function (questionTypeData) {
console.log(questionTypeData);
var len = questionTypeData.length;
clearListItemsOf(ULId);
for (var i = 0; i < len; i++) {
var questionTypeId = questionTypeData[i]['questionTypeId'];
var questionType = questionTypeData[i]['questionType'];
var listItem = $('<li></li>').val(questionTypeId)
.text(questionType).addClass('tab-link').attr('data-tab',questionType);
$(ULId).append(listItem);
}
},
error: function (x, e) {
handleError(x, e);
}
});
}
Upon inspection using Google Chrome's developer tools, the generated <li> elements match the original structure closely. However, the "current" status is not applied correctly to the Multiple Choice tab.
Here is the output observed in Chrome's inspector:
<li value="1" class="tab-link" data-tab="Multiple Choice">Multiple Choice</li>
<li value="2" class="tab-link" data-tab="Fill in the Box">Fill in the Box</li>
<li value="3" class="tab-link" data-tab="True or False">True or False</li>
The goal is to have the Multiple Choice tab marked as "current" within the class attribute.
Attempts to include the "current" class using .addClass('tab-link current'); have only resulted in the omission of "current" from the class attribute in the HTML markup.
I appreciate any guidance on how to resolve this issue.