I am new to javascript and I am trying to create a nested row that gets viewed when clicked using accordion. I have written javascript to dynamically expand the rows and it is not expanding at all. out of blue it once did and only the first element got expanded, I made few changes in my code then again none of them is expanding now, please help me out.
function mainfunction(challenges,targets) {
console.log(challenges)
var table = document.getElementById('challenge_table_tree')
for (i in challenges) {
table.innerHTML += '<div class="row accordion-toggle" data-toggle="collapse" data-target="#'+challenges[i].id +'">' +
'<div class="col">'+ challenges[i].name+'</div>' +
'<div class="col">'+ challenges[i].id+'</div>' +
'</div>' +
'<div class="accordion-body collapse" id="'+challenges[i].id+'"></div>'
for(j in targets) {
var hidden_data = document.getElementById(challenges[i].id)
if(targets[j].challenge_id==challenges[i].id) {
console.log('here')
hidden_data.innerHTML += '<div class="row">' +
'<div class="col">'+targets[j].id+'</div>' +
'<div class="col">'+targets[j].name+'</div>' +
'<div class="col">'+targets[j].parent_id+'</div>' +
'</div>'
}
}
}
}
The Html it generates is
<div class="form-group" id="challenge_table_tree">
<div class="row accordion-toggle" data-toggle="collapse" data-target="#8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="col">Adersh Ganesh</div>
<div class="col">8a263b72-7e61-487a-b756-f7744c9dc623</div>
</div>
<div class="accordion-body collapse" id="8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="row">
<div class="col">4df41507-8c7d-48a8-8cc7-66094dd58844</div>
<div class="col">undefined</div>
<div class="col">null</div>
</div>
</div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#905bd9a2-d47a-4269-9fae-03c6daa46c16">
<div class="col">Adersh</div>
<div class="col">905bd9a2-d47a-4269-9fae-03c6daa46c16</div>
</div>
<div class="accordion-body collapse" id="905bd9a2-d47a-4269-9fae-03c6daa46c16"></div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#7abc296e-9347-405d-9d19-4bea7b29651c">
<div class="col">aaaaa</div>
<div class="col">7abc296e-9347-405d-9d19-4bea7b29651c</div>
</div>
<div class="accordion-body collapse" id="7abc296e-9347-405d-9d19-4bea7b29651c"></div>
</div>
Related
var test = "";
for (var i = 0; i < controlResponse.classifications.length; i++) {
test+='<div role="option" aria-checked="false" class="select item" style="pointer-events: all;"><span class="text">' + controlResponse.classifications[i].name + ' </span></div>';
}
for (var i = 0; i < controlResponse.fileList.length; i++) {
var htmlCode='<div class="row"> '+
' <div class= "ten wide computer sixteen wide mobile ten wide tablet column"> '+
' <h5 class="ui header"> '+
' <i aria-hidden="true" class="file word outline large icon fa-fw"></i> '+
' <div class="content">outlook_testler.docx</div> '+
' </h5> '+
' </div > <div class="six wide computer sixteen wide mobile six wide tablet column"> '+
' <div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0" style="float: right;"> '+
' <div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div><i aria-hidden="true" class="dropdown icon"></i> '+
' <div class="menu transition classifications"> ' +
+test+
' </div> ' +
' </div> '+
' </div> '+
' </div>';
$("#classificationModalList").append(htmlCode);
}
When I add html code to the variable, it shows as NaN.
I add select item html codes to test variable then I added test variable inside htmlCode variable
then I added test variable inside htmlCode variable
Instead of joining all the strings using + and ' you can use Template literals. Here I combined it with Array.prototype.map() – that is more readable too.
/* test data */
const controlResponse = {};
controlResponse.classifications = [{name:'class01'},{name:'class02'}];
controlResponse.fileList = ['file01', 'file02'];
var test = controlResponse.classifications.map(classification => {
return `<div role="option" aria-checked="false" class="select item" style="pointer-events: all;">
<span class="text">${classification.name}</span>
</div>`;
}).join('');
var htmlCode = controlResponse.fileList.map(file => {
return `<div class="row">
<div class="ten wide computer sixteen wide mobile ten wide tablet column">
<h5 class="ui header">
<i aria-hidden="true" class="file word outline large icon fa-fw"></i>
<div class="content">outlook_testler.docx</div>
</h5>
</div>
<div class="six wide computer sixteen wide mobile six wide tablet column">
<div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0" style="float: right;">
<div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div>
<i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition classifications">${test}</div>
</div>
</div>
</div>`;
}).join('');
$("#classificationModalList").append(htmlCode);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="classificationModalList"></div>
Can I have call onclick when after append html in vuejs, I using vue-append
this.html = '<div id="'+folderData[key].id+'" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' +
'<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" title="'+textTooltip+'"> '+
'<div class="info-box '+back+'">'+
'<span v-on:click="gofolder('+folderData[key].id+')" class="info-box-icon bg-success '+icon+'"></span>' +
'<div v-on:click="gofolder('+folderData[key].id+')" class="info-box-content">' + textName + '</div>' +
checkbox +
'</div>'+
'</a>' +
'</div>'
<template>
<div v-append.sync="html" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
</div>
</template>
Can you just listen to #appended event?
<div v-append.sync="html" #appended="onClickHandler" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row"></div>
I using v-for and an array to load, problem solved!
Firstly, I will not using vue-append and create a frames html and using v-for to create a list follow array data, because my list data will changes if I click in button
Ex:
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
<div :id="item.id" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" v-for="item in items" :key="item.id">
<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" :title="item.tooltip">
<div class="info-box">
<span #click="gofolder(item.id)" :class="item.icon"></span>
<div #click="gofolder(item.id)" class="info-box-content">{{item.textName}}</div>
<input v-if="item.checkbox === true" type="checkbox" class="" value="">
</div>
</a>
</div>
</div>
specifically here:
v-for="item in items" :key="item.id"
after, I can call event onclick on buttons then not be afraid it will take the wrong value
Does anyone know why my if statement doesn't do anything when running at the end of my program? I'm wanting to replace null returns with no office and I can't seem to run it afterwards.
for (z = 0; z < items.length; z++) {
var team = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].TeamName + '</p></div><div class="col-sm-4 office"><p style="margin-bottom: 0px;">' + items[z].Office + '</p></div></div>';
var single = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].Title + '</p></div><div class="col-sm-4"><p class="office" style="margin-bottom: 0px;">' + items[z].Office +
'</p></div></div>';
if (items[z].Office == 'null') {
$(".office").append('No office');
}
}
<div class="row" style="padding-bottom: 10px;">
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Single Users</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsSingles" style="padding-left:0px; border-right: solid 1px #DCE1E5;">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Teams</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsTeams" style="padding-left:0px;">
</div>
</div>
</div>
</div>
Remove the quotes from around null (and add another = to check for type, so === instead of ==)
I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
i am trying to create Bootstrap Panel dynamically by on click function but every Panel should create multiple forms by on click function.. In my code the first Panel create forms by clicking on button but the rest of panels doesn't create forms..
var counter=1;
$(".panel-increment").on("click", function(e){
e.preventDefault();
var panelHtml = '<div class="panel panel-info"> ' +
'<div class="panel-heading"> ' +
'<h4 class="panel-title"> ' +
'<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
'</div> ' +
'<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"> ' +
'<div class="panel-body">' +
'<div class="row" > ' +
'<div class="col-md-12 sch-box">' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
'</div> ' +
'</div> ' +
'</div> ' +
'<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
'</div> ' +
'</div>';
$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);
counter++;
});
$(".panel-addbtn").on("click", function(e){
e.preventDefault();
var formHtml = '<div class="row" >' +
'<div class="col-md-12 sch-box"> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>' +
'</div>' +
'</div>';
$(this).closest(".panel-collapse").find(".panel-body").append(formHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 it-right-side">
<div>
<div class="col-md-12" id="dynamicInput">
<!--Start Panel-->
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1
<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" id="formcreation">
<!--Schedule-->
<div class="row" >
<div class="col-md-12 sch-box">
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
</div>
</div>
</div>
<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button>
</div>
</div>
</div>
</div>
<!--End panel-->
</div>
<button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button>
</div>
This is because:
$("selector").on("click", function(){
});
works for static html, in case of dynamic html use .on() like:
$("document").on("click", ".panel-addbtn", function() {
});
You can try defining an onclick event in the dynamic html like
<div onclick="myFunction()">
</div>
now you can create a javascript function and it would always work now matter the html is static or dynamic
function myFunction(){
//do something
}