I have managed to dynamically/programically create a modal form using bootstrap classes etc. But when I try to access the data from the input boxes I get no console.log(). Its asif the form is not present on the dom and none of the input can be gathered.
I tried this previously with same 'getFormData' function on a hardcoded modal form. The console.log() are called and the inspector shows a 'element highlight option' on the console output of the dom object, unlike the new dynamic form.
How can I get this data with the dynamically created form modals?
JQUERY
//create form modal
function getMessageTemplate(message, instance)
{
var styles =
{
success:{alert: 'alert-success', icon: 'glyphicon glyphicon-ok-sign'},
error:{alert: 'alert-danger', icon: 'glyphicon glyphicon-remove-sign'},
warning:{alert: 'alert-warning', icon: 'glyphicon glyphicon-question-sign'},
default:{alert: 'bg-primary', icon: 'glyphicon glyphicon-cog'}
};
var header =
'<div class="modal-header no-scroll '+ styles[message.style]['alert'] +'">'+
'<i class="'+ styles[message.style]['icon'] +'"></i>'+
'<h4 class="message"><strong>'+ message.title +'</strong></h4>'+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
'</div>';
var body = '';
var footer = '';
if(message.form !== undefined)
{
body = $('<div class="modal-body"></div>');
form = body.append('<form id="form-' +message.form.name+ '" class="form"></form>');
$(message.form.input).each(function(index,value)
{
input = form.append(
'<div class="row">'+
'<div class="col-xs-2">'+
'<label>' +value.label+ ':</label>'+
'</div>'+
'<div class="col-xs-9">'+
'<div class="input-group add-on col-xs-2">'+
'<div class="input-group-btn">'+
'<a class="btn btn-default" data-toggle="popover-input" data-html="true" title="Item Name" data-content=" Name of the item, multiple names allowed for different container sizes. <br/>Only: characters (A-Z)."><span class="glyphicon glyphicon-question-sign"></span></a>'+
'</div>'+
'<input name="' +value.name+ '" class="form-control red-tooltip" placeholder="...." title="" type="text" >'+
'</div>'+
'</div>'+
'<div class="col-xs-1">'+
'<a class="valid-icon small fail glyphicon glyphicon-remove"></a>'+
'</div>'+
'</div>');
});
}
if(message.submit !== undefined)
{
footer =
'<div class="modal-footer msg-footer">'+
'<input class="form-input" type="hidden">'+
'<div class="row text-center">'+
'<button id= "close" class="btn btn-default btn-msg" type="button" data-dismiss="modal"> Back</button>'+
'<button id= "'+ message.submit.id +'" name= "'+ message.submit.name +'" class="btn btn-default btn-msg '+ message.submit.class +'" type="button" data-dismiss="modal"> Submit</button>'+
'</div>'+
'</div>';
}
var container = $('<div id="alert'+ instance +'" class="msg modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"></div>')
.append(header)
.append(body)
.append(footer);
return container[0].outerHTML;
}
//gather form infomation
function getFormData(form)
{
console.log(form); //dom object
var formName = form.attr('id');
$('body #'+formName+' input').each(function(inputKey, inputObj)
{
var inputName = $(inputObj).attr('name');
var inputValue = $(inputObj).val();
//none of this is displayed
console.log('------[input-start]-----');
console.log(inputName);
console.log(inputValue);
});
}
//submit button event for modal form
$('body').on('click', '.btn-form', function(e)
{
var sourceForm = $(this).closest('.modal').find('form');
var formData = getFormData(sourceForm);
//do stuff with formData etc
}
There's more these functions do, so I edited to show the core form features.
Fiddle Me
As given in Fiddle form.append is appending to $('<div class="modal-body"></div>') set as body variable and not to form element. Basically
<form id="form-..."> ..</form>
needs to contain <input> element and hence there is nothing in console.
Change form.append to form.find('form').append
Updated Fiddle
Related
In javaScript i try to append a data it work but in data url id and close button not working
success: function(response)
{
$.each(response, function () {
$.each(this, function (index, value) {
$('#List').append('' +
'<div class="col-md-12"><div class="alert #if('+value.linkValue+' == 0)alert-danger #else alert-success #endif">'+ value.item +
'<button data-id='+value.id+' data-token="{{ csrf_token() }}" data-url="{{ route("list.delete", '+value.id+') }}" type="button" class="close cls-btn" data-dismiss="alert"><span aria-hidden="true">times;</span></button>'+
'</div>'+
'</div>'
);
});
});
},
the above code data-url="{{ route("list.delete", '+value.id+') }}" show data-url="http://127.0.0.1:8000/delete/+value.id+" and <span aria-hidden="true">times;</span></button>show times;
how to add value in data-url and close button in appending time?
my web page shows a jquery confirm prompt view. And once the user selects the input field and the keyboard shows, the keyboard pushes the jquery confirm prompt view. The problem only happens on iOS device. Is there a work around to this?
Here is my code
$.confirm({
title: 'Add Your Name Information',
content: 'Please provide the ff<br/><br/>'+
'<div class="form-row">'+
'<div class="form-group col-md-2">'+
'<input type="number" id="age" class="form-control" max="2" required>'+
'<label class="form-control-placeholder" for="age">Age</label>'+
'</div>'+
'<div class="form-group col-md-2">'+
'<input type="number" id="contact" class="form-control"required>'+
'<label class="form-control-placeholder" for="contact">Contact No</label>'+
'</div>'+
'<div class="form-group col-md-8">'+
'<input type="text" id="bldg" class="form-control" value="' + Name+ '" readonly="true">'+
'<label class="form-control-placeholder" for="bldg">Name</label>'+
'</div>'
'</div>',
buttons: {
formSubmit: {
text: 'Confirm',
btnClass: 'btn-blue',
action: function () {
params += "&age=" + age
params += "&contact=" +contact
$.post( "/name/save", values)
.done(function( data ) {
data = JSON.parse(data);
}
});
}
},
cancel: function () {
}
},
columnClass: 'medium'
});
}
So I'm having trouble passing a value to a bootstrap modal. I think it has to do with not refreshing the page and I hope someone can help me.
I'm generating a table, from data returned from a database, where the last column has three buttons. Each of those buttons opens a modal wiindow where I want to retrieve, update or delete a full entry from the database.
Where is the table generation. Each row is of the class .clickableRow
<?php
foreach ($studentsTable as $row) {
echo '<tr class="clickableRow" data-id="'. $row['id'] . '">';
echo '<td class="column-id" scope="row">' . $row['id'] . '</td>';
echo '<td>' . $row['name'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo '<td class="column-action">'
. "<button type='button' class='btn btn-info btn-sm mr-1' data-toggle='modal' data-target='#modal-detailsStudent'>Ver</button>"
. '<button type="button" class="btn btn-info btn-sm mr-1" data-toggle="modal" data-target="#modal-updateStudent">Editar</button>'
. '<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-deleteStudent">Apagar</button>'
.'</td>';
echo '</tr>';
}
?>
After generating and displaying the table if I click the row I can update the httpquery with the following scripts.
$('.clickableRow').on('click', function() {
console.log($(this))
//console.log($(this).attr('data-id'))
changeUrlParam('id', $(this).attr('data-id'))
})
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
function changeUrlParam (param, value) {
var currentURL = window.location.href+'&';
var change = new RegExp('('+param+')=(.*)&', 'g');
var newURL = currentURL.replace(change, '$1='+value+'&');
if (getURLParameter(param) !== null){
try {
window.history.replaceState('', '', newURL.slice(0, - 1) );
} catch (e) {
console.log(e);
}
} else {
var currURL = window.location.href;
if (currURL.indexOf("?") !== -1){
window.history.replaceState('', '', currentURL.slice(0, - 1) + '&' + param + '=' + value);
} else {
window.history.replaceState('', '', currentURL.slice(0, - 1) + '?' + param + '=' + value);
}
}
}
BUT... after I click in one of the buttons the console always shows the same id being outputed. Modal following
<div class="modal fade" id="modal-detailsStudent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Nome do Aluno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
<h5> <?php var_dump($_GET['id']); ?> </h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is due to your click call, it will always refer to the first element with that class. What you want it to look like is:
jQuery('.clickableRow').on('click', function() {
console.log($(this))
//console.log($(this).attr('data-id'))
changeUrlParam('id', $(this).attr('data-id'))
});
This way the click event will bind to all HTML elements with this class.
Example: https://codepen.io/anon/pen/eeKLwM?editors=1111
I am basically using Gmail API to create send and reply to functionalities for myself. The problem is in the reply section. I am using jQuery to dynamically create divs for every message that appears in my inbox (max-count:10) and a separate set of divs (any single one to appear on clicking a mail link) wherein for each div, I am having the modal-header div for the subject, reply and close buttons whereas a modal-body div with an iframe for displaying the content.
var message1;
function appendMessageRow(message) {
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
<a data-toggle="modal" href="#reply-modal" id="reply-button" class="btn btn-primary">Reply</a>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
message1 = message;
});
$('#reply-button).on('
click ',function(){
$("#reply-to").val(getHeader(message1.payload.headers, 'From')); $("#reply-subject").val('RE: ' + getHeader(message1.payload.headers, 'Subject')); $("#message-modal-" + message1.id).fadeOut(); $('div.modal-backdrop.fade.in').fadeOut();
});
}
I intend to use the Reply button to call a function which will fill the 'To' and 'Subject' field in the reply-modal(Reply button is an a tag with href=#reply-modal) that'd be visible after the message-modal-message.iddiv fades out. The problem is I am unable to get the id of this div which I need to fade out (along with that greyish background).
Also if you can see I need the whole message object and just not the message.id of the clicked message link so that I can transfer 'To' and 'Subject' to the newly appeared reply-modal div. But it just doesn't get the message.id of the clicked-on message but the last one in the list of mails displayed on the inbox page and so the #message-modal-message.id does not fade out as the message.id is not correct. Similarly, the 'To' and 'From' fields in the reply-modaldiv also contain information of the last mail in the list - doesn't matter which mail you've opened. Also as the message-modal-message.id div does not disappear, the reply-modal div appears behind it and I have to close the it div to see the reply-modal div.
I even tried having a JS function on the outside instead of the jQuery selector method $('#reply-modal').on('click',.. but couldn't do it.
Basically,
How do I get the message object after a message has been opened to view?
This is what exactly I was talking about. Sorry I couldn't paste the whole code in the questions too if that created some sort of confusion while trying to understand the question.
'Reply' button needs to be there for every message we add as divs to the display page, which also uses the two critical variables reply-to and reply-subject to pass the required data to the new reply form that opens up.
The closing of the 'Show message' div which was not possible earlier, was also linked to the message-id, which now becomes accessible.
Everything else is pretty neat; the functions required to send the reply are the same as sending a new email and are present at the very end of the code.
What I was unable to do was capture the message id of the currently displayed message on the click of "Reply" button. This is a "better" solution than a workaround, but man would it be shorter if I could have done what I'd have had wanted!
<!doctype html>
<html>
<head>
<title>Gmail API demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
iframe {
width: 100%;
border: 0;
min-height: 80%;
height: 600px;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1>Gmail API demo</h1>
<button id="authorize-button" class="btn btn-primary hidden">Authorize</button>
Compose
<table class="table table-striped table-inbox hidden">
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date/Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Compose</h4>
</div>
<form onsubmit="return sendEmail();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="compose-to" placeholder="To" required />
</div>
<div class="form-group">
<input type="text" class="form-control" id="compose-subject" placeholder="Subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="compose-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="send-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="reply-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Reply</h4>
</div>
<form onsubmit="return sendReply();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="reply-to" required disabled/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="reply-subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="reply-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<input type="hidden" id="reply-message-id" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="reply-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>
<script type="text/javascript">
var clientId = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
var apiKey = 'YOUR_API_KEY';
var scopes = 'https://www.googleapis.com/auth/gmail.readonly';
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth, 1);
}
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
}
function handleAuthClick() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
loadGmailApi();
$('#compose-button').removeClass("hidden");
$('#authorize-button').remove();
$('.table-inbox').removeClass("hidden");
} else {
$('#authorize-button').removeClass("hidden");
$('#authorize-button').on('click', function() {
handleAuthClick();
});
}
}
function loadGmailApi() {
gapi.client.load('gmail', 'v1', displayInbox);
}
function displayInbox() {
var request = gapi.client.gmail.users.messages.list({
'userId': 'me',
'labelIds': 'INBOX',
'maxResults': 10
});
request.execute(function(response) {
$.each(response.messages, function() {
var messageRequest = gapi.client.gmail.users.messages.get({
'userId': 'me',
'id': this.id
});
messageRequest.execute(appendMessageRow);
});
});
}
function appendMessageRow(message) {
var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ? getHeader(message.payload.headers, 'Reply-to') : getHeader(message.payload.headers, 'From')).replace(/\"/g, '"');
var reply_subject = 'Re: ' + getHeader(message.payload.headers, 'Subject').replace(/\"/g, '"');
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
<button type="button" class="btn btn-primary reply-button" data-dismiss="modal" data-toggle="modal" data-target="#reply-modal"\
onclick="fillInReply(\'' + reply_to + '\',\'' + reply_subject + '\',\'' + getHeader(message.payload.headers, 'Message-ID') + '\');">Reply</button>\
</div> \
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
});
}
function getHeader(headers, index) {
var header = '';
$.each(headers, function() {
if (this.name === index) {
header = this.value;
}
});
return header;
}
function getBody(message) {
var encodedBody = '';
if (typeof message.parts === 'undefined') {
encodedBody = message.body.data;
} else {
encodedBody = getHTMLPart(message.parts);
}
encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
return decodeURIComponent(escape(window.atob(encodedBody)));
}
function getHTMLPart(arr) {
for (var x = 0; x <= arr.length; x++) {
if (typeof arr[x].parts === 'undefined') {
if (arr[x].mimeType === 'text/html') {
return arr[x].body.data;
}
} else {
return getHTMLPart(arr[x].parts);
}
}
return '';
}
function sendEmail() {
$('#send-button').addClass('disabled');
sendMessage({
'To': $('#compose-to').val(),
'Subject': $('#compose-subject').val()
},
$('#compose-message').val(),
composeTidy
);
return false;
}
function sendMessage(headers_obj, message, callback) {
var email = '';
for (var header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
var sendRequest = gapi.client.gmail.users.messages.send({
'userId': 'me',
'resource': {
'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
}
});
return sendRequest.execute(callback);
}
function fillInReply(to, subject, message_id) {
$('#reply-to').val(to);
$('#reply-subject').val(subject);
$('#reply-message-id').val(message_id);
}
function sendReply() {
$('#reply-button').addClass('disabled');
sendMessage({
'To': $('#reply-to').val(),
'Subject': $('#reply-subject').val(),
'In-Reply-To': $('#reply-message-id').val()
},
$('#reply-message').val(),
replyTidy
);
return false;
}
function replyTidy() {
$('#reply-modal').modal('hide');
$('#reply-message').val('');
$('#reply-button').removeClass('disabled');
}
function composeTidy() {
$('#compose-modal').modal('hide');
$('#compose-to').val('');
$('#compose-subject').val('');
$('#compose-message').val('');
$('#send-button').removeClass('disabled');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</body>
</html>
I'm using Bootstrap and Jquery for my website, and I have a issue.
When I create elements dynamically, I don't have the same rendering as my 'static' elements, that's my html elements :
<div class="row" style="margin-bottom: 10px;">
<div class="col-xs-4 col-sm-2">
<button type="button" class="action btn btn-default">
<span class="glyphicon glyphicon-cog"></span>
</button>
<button type="button" class="action btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
That's the rendering :
And that's the rendering, when I click on the Add button :
I don't know why the rendering is like that because I have put the same html element in my Add button listenner :
$("#btnAddBuild").click(function(){
var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
"<div class='col-xs-4 col-sm-2'>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
"</div>" +
"</div>"
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
Thanks
In the static html markup, there are multiple space characters between the buttons(which is collapsed to a single space), but in the string literal used for the dynamic elements there is no space.
Just add a [space] character between the button elements
$("#btnAddBuild").click(function() {
var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
"<div class='col-xs-4 col-sm-2'>" +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button> " +
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
"</div>" +
"</div>"
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowListBuilds"></div>
<button id="btnAddBuild">Add</button>
I had a similar problem once and solved it by building the template string with linebreaks (via newline "\n"):
$("#btnAddBuild").click(function(){
var htmlContent = ["<div class='row' style='margin-bottom: 10px;'>",
"<div class='col-xs-4 col-sm-2'>",
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>",
"<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>",
"</div>",
"</div>"].join("\n")
//console.log(htmlContent);
$("#rowListBuilds").append(htmlContent);
});
So the browser does not get a single line string to display but a multiliner, as if you would type it yourself in HTML.
Check it out:
https://jsfiddle.net/np9m8gse/