I am trying to append new data to the container div using jquery .append() function. But, the output appended trims the spaces between the labels created. Check the screenshot attached:
How can I fix this issue?
Javascript and HTML code are given below:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">abc#site.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Role 1</span>'+
'<span class="label label-user-role">Role 2</span>'+
'<span class="label label-user-role active">Role 3</span>'+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<i class="fa fa-times-circle-o"></i>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
});
<div class="users">
<div class="row user">
<div class="col-md-6">xyz#site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<i class="fa fa-times-circle-o"></i>
</div>
</div>
<div class="row user">
<div class="col-md-6">pqr#site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<i class="fa fa-times-circle-o"></i>
</div>
</div>
</div>
Added spaces in jQuery code:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">ajinkya.bandagale#gmail.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Admin</span> '+
'<span class="label label-user-role">Observer</span> '+
'<span class="label label-user-role active">Normal</span> '+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<i class="fa fa-times-circle-o"></i>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
})
Since you have written your code in HTML in different line for each span but when you add div or anything in through jQuery by creating a string it consider it as a single line.
So if you add \n at each line it will work.
user = '<div class="row user">' +
'<div class="col-md-6">pqr#site.com</div>' +
'<div class="col-md-4">' +
'<div class="user-roles">' +
'<span class="label label-user-role">Role 1</span>\n' +
'<span class="label label-user-role">Role 2</span>\n ' +
'<span class="label label-user-role active">Role 3</span>\n ' +
'</div>' +
'</div>' +
'<div class="col-md-2 text-center">' +
'<i class="fa fa-times-circle-o"></i>' +
'</div>' +
'</div>';
$(".users").append(user).hide(0).fadeIn(700);
Related
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>
I need to build notes app like site and I have to delete specific div with a click on x icon.
I think that i need to delete a object from the array with splice function, but I can't delete a specific object from it.
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv id="noteDvid">'
str += '<i class="fa fa-times-circle icon" aria-hidden="true" onclick="remove()"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str
}
function remove() {
notesArr.splice(0)
}
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId">
<div class="col-3 noteDv" id="noteDvid">
<i class="fa fa-times-circle icon" aria-hidden="true"></i>
<div class="textBox">
<div class="textDv">text</div>
<div class="timeDV">time</div>
<div class="dateDv">date</div>
</div>
</div>
</div>
</div>
You cannot reuse the ID, use the class instead
You likely want to do noteId.innerHTML += str to concatenate
remove onclick="remove()" from <i class="fa fa-times-circle icon" aria-hidden="true"></i> and add a class of remove to that <i>
add the index as an attribute
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
// a click in the output div
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
notesArr.splice(tgt.dataset.idx,1); // take it IDX and remove the item
printTohtml(); // re-render
}
})
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv">'
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str;
}
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) {
notesArr.splice(tgt.dataset.idx,1);
printTohtml()
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId"></div>
</div>
PS: If you want to delete the div instead of rewriting, you can do
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
this.closest(".noteDv").remove()
}
})
If you simply want to remove element from screen without ordering rest remaining elements in a view - then most easy way is to use node.removeChild(child) method :
<div id="container">
<h3>Click on a link to remove it !</h3>
<a href='#' onclick='this.parentNode.removeChild(this);'>Hot summer</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Pretty Autumn</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Cold winter</a>
</div>
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
}
Im building dynamic html based on results from a search
I have an onclick function that needs to accept a variable id as an argument but its throwing an error. It sees the argument as text thus throwing
an Uncaught ReferenceError: 1 is not defined.
$.each(Rdata, function(i, post) {
var Name= truncate(post.Name);
var Surname =truncate(post.Surname);
var DepSubTown =truncate(post.DepSubTown);
var DestSubTown =truncate(post.DestSubTown);
content += '<div class="row white-text">'+
'<div class="col s12"> <div class="card-panel teal">'+
'<div class="chip col s7"> <img src="pix/pp.jpg" alt="Contact Person">'+ Name +' '+ Surname+'</div>'+
' <div class="col s5"><div class="chip" style"float:right;">R50</div> </div>'+
'<div class="row white-text">'+
'<div class="col s12">'+
'<div class="col s5"><p><b>'+DepSubTown+'</b></p> </div>'+
'<div class="col s1"><i class="material-icons"> - </i> </div>'+
'<div class="col s5"><p><b>'+DestSubTown+'</b></p> </div>'+
'</div>'+
'<div class="col s12">'+
'<div class="col s6">'+
'<button class="waves-effect waves-light btn"
Problem is here
onclick="testy('+post.Id+');return false;" id="viewdetails">Test</button>'+
'</div> </div></div></div></div>';
});
$(content).appendTo("#Searchlist");
}
I have found the answer all i needed to do is add escape characters on the onclick function
'<button class="waves-effect waves-light btn" onclick="testy(\''+Name+'\');return false;" id="viewdetails">Test</button>'+
This is the code about in my template file
<ul class="playListForm" id="playList" style="list-style: none;">
#foreach($listSong as $song)
<!--<?php
$url = URL::route("listentomusic",$song->id_song."**".$song->title."**".$song->artist."**".$song->code128."**".$song->code320);
$urlup = URL::route("voteup", $song->id_song);
$urldown = URL::route("votedown", $song->id_song);
?>-->
<?php
$urlsource = 'http://api.mp3.zing.vn/api/mobile/source/song/'.$song->code128;
if($song->position == 1){
?>
<li id="{{$song->position}}" class="active">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div>
</a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp" style="visibility: hidden;">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 9px">
</div>
</li>
<?php
}
else{
if($song->position != count($listSong)){
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
else{
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
}
?>
#endforeach
</ul>
And I tried to append new "li" by this JQuery code:
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
And here is the result:
So I have a problem about the new li at the last which I added by JQuery. I really don't know why. I hope you could give me some advices. Thank you.
P/S: Sorry for my bad English.
Same id maybe confused, generate with function
function generate(lastPos){
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="'+lastPos+'_upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="'+lastPos+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
}
call function and new id for LI Element.