We Keep Coding

Bootstrap datepicker options with javascript append not working

I'm using bootstrap datepicker on a form element that is appended to a div when another dropdown is selected. The datepicker is working, but I can't get the options to apply.
I'm not sure if this is a limitation with datepicker or I am doing something wrong. The html is just
<div class="form-group row">
<div class="col-6 col-md-4 col-lg-3">
<div id="dateSelector">
</div>
</div>
</div>
the append block looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
with the options in the same js doc like this
$('#datepicker-group').datepicker({
format: 'dd/mm/yyyy',
clearBtn: true
});
I've spent hours trying to work this out and can't see where I'm going wrong.
Any help much appreciated.

Do you get any syntax errors?
You selector looks suspicious. Try:
$('#dateSelector').append('....');

Thanks Travis, using the data-date-format and data-date-clear-btn attributes on datepicker-group worked. I had seen his in the bootstrap docs and tried it before without success, but I think I tried it in the input, not the div.
New .append now looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
Everything else the same.
Thanks!

Prevent reload page with code added afterwards and after clicking a button

first of all I'm trying to create a form where is needed to duplicate some blocks of fields and fields as the user want.
So I have a page where there is a button that after clicking on it duplicates a certain block. The first button works fine!, it duplicates a block without reloading the page when is clicked.
But in that block there are some input fields that I need to duplicate as well.
So when the block is duplicated a new button is added to duplicate fields inside that block.
The problem is that when I click on the second button it reloads the page, instead of just duplicate an input field.
To do this I'm using jquery, code to duplicate the block, this is the code to add the block, that is working fine:
$('#add-block').click(function(e) {
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
event.preventDefault();
});
code to duplicate the field (here is where the page reloads):
$('#we2_add_test').click(function(e) {
event.preventDefault();
$(".we2_test-input").append("<input type=\"text\" placeholder=\"Your Test\" class=\"form-control\" name=\"we3_test\" id=\"we3_test\">");
return false;
});
I already tried this, but it didn't work

1.id="we2_test" need to be class="we2_test" and id=we2_add_test need to be class="we2_add_test",because multiple same id for different HTML element is wrong when you are going to deal them with jQuery
2.Use event delegation:-
Now both code need to be:-
$('#add-block').click(function(e) {
e.preventDefault();
var html_to_add = '<input type="text" placeholder="Your Test we2_test" class="form-control" name="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test we2_add_test">+</button>';
$(".block-input").append(html_to_add);
});
$(document).on('click','.we2_add_test',function(e) {
e.preventDefault();
$(".we2_test-input").append("<input type='text' placeholder='Your Test' class='form-control we3_test' name='we3_test'>");
});

The first function has event as the function argument, but later on you try to use e.preventDefault(). That doesn't match.
Maybe
$('#add-block').click(function(e) {
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
e.preventDefault();
});
will work? Difficult to say without the complete code though ...
Below is a somehow working version...
This is a little working snippet where I took care of the identity problem and the event delegation as mentioned/solved by #Alive to Die:
$(function(){
$('#add-block').click(function(e) {
var i=$('[name=we2_test]',".block-input").length;
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test'+i+'">'
+'<div class="we2_test-input col-md-12 no-pad"></div>'
+'<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
e.stopPropagation();
return false;
});
$('.block-input')
.on('click','#we2_add_test',function(e) {
e.preventDefault();
var j=$('[name=we3_test]',".we2_test-input").length;
$(this).prev().append('<input type="text" placeholder="Your Test" class="form-control" name="we3_test" id="we3_test'+j+'">');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
add block
<div class="block-input"></div>
Edit:
I replaced $(".we2_test-input").append(...) by $(this).prev().append(...) to ensure that only the div before the button gets added to.

id + 1 on append, responsive filemanager multiple select image

still looking for code, how can i have different id on input attribute each time i click add button, I have no idea on how to make the id unique ,please help me..
$(document).ready(function(){
$("#btn2").click(function(e){
e.preventDefault();
var id = $(".inputclass").attr("id");
var newid = parseInt(id) + 1;
$('.inputclass').attr("id", ""+newid+"");
$("#gallery").append(
'<div class="added">'
+'<div class="col-md-2">'
+'<div>'
+'<a class="fileman" href="#"" data-toggle="modal" data-target="#FileManager">'
+'<img id="1" class="imageview center-block" src="/assets/img/noimage150x150.png"></a>'
+'</div>'
+'<a class="tutup btn btn-sm btn-warning">delete<a>'
+'<input class="inputclass" name="image" type="text" value="" class="form-control" id="1"/>'
+'</div>'
+'</div>'
);
});
$("#gallery").on('click', '.tutup', function(e) {
e.preventDefault();
$(this).parent().remove();
});
});

Here you go. You just need to insert id when you generate html
+'<input class="otherClass" name="image" type="text" value="" class="form-control" id="'+newid+'"/>'
Also you need to change class name of input.
https://jsbin.com/pinegowotu/1/edit?html,console,output
Fix bin
Hope this helps.

Refreshing css after adding element with jQuery

I'm having problem loading custom css (twitter bootstrap) on radio input when I try to add that element using jQuery.
Here's a screenshot:
When I refresh the page the css of the radio input is loaded (next to the green arrow) but when I click to Add new sequence.
Here is the jQuery code:
$('#btn_addseq').on('click', function (e) {
e.preventDefault();
var newitem = 'some tags' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'some tags' ;
$("#list_sequences").append(newitem);
};
Edit:
My html for the working one:
<label class="mt-radio mt-radio-line" style="margin-top: 6px">
<input type="radio"
name="is_default" value="old_{{ $sequence->id }}" {{ $sequence->is_default ? 'checked' : '' }}>
Default
What I see in inspection:
And this is the code of the item I'm trying to add:
var newitem = '<div class="col-md-4">' +
'<div class="mt-radio-list">' +
'<label class="mt-radio mt-radio-line" style="margin-top: 6px">' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'</label>'+
'<a class="delete_new_seq" data-id="' + size + '"><i class="fa fa-remove" style="color: red;cursor: pointer;"></i> </a>'
'</div>' +
'</div>' ;

The rules that govern what an element looks like rely on a particular structure of HTML, in this case it looks like the css rules you use rely on either
The radio being inside a <div class="radio"> element. or;
The radio being inside a <label class="mt-radio mt-radio-line"> element.
(My guess would be the former, however its hard to know for sure without seeing all your css)

Your new control doesn't have the class specified. Add the class property to the tags like this:
var newitem = 'some tags' +
'<input type="radio" name="is_default" class="----" value="new_' + size + '"> Default</input>' +
'some tags' ;

How to insert html from a button click

I am trying to insert a form when a button is clicked but cannot find a way that does not make me put all of the HTML on one line with back slashes or many ugly lines of code. Something that does not include adding on something line jQuery or php.
In essence: How can I make this...(that is all on one line)
<script>
function newMsg() {
document.getElementById("add_message").innerHTML = "<div class=\"message\">Add Message<br>Title: <input type=\"text\" id=\"title\"><br>Text: <input type=\"text\" id=\"message\"><br><br></div>";
}
</script>
Look a little more something like this (that has good formatting and on multiple lines)
<script>function newMsg() {function newMsg() {
document.getElementById("add_message").innerHTML =
"<div class="message">Add Message<br>
Title: <input type="text" id="title"><br>
Text: <input type="text" id="message"><br><br>
</div>";
}
</script>

Simply replace the first and last " of the right hand side with ' and remove all \
like this :
document.getElementById("add_message").innerHTML = '<div class="message">Add Message<br>Title: <input type="text" id="title"><br>Text: <input type="text" id="message"><br><br></div>';

.innerHTML = '<div class="message">Add Message<br>'
+ 'Title: <input type="text" id="title"><br/>'
+ 'Text: <input type="text" id="message"><br/><br/></div>';
You can do what hamism suggested as well as concatenate if one line is too long, this way you can make your code look slightly cleaner.

You may check this fiddle:
http://jsfiddle.net/7sqha4ks/
function myFunction(){
document.getElementById("add_message").innerHTML =
'<div class="message">Add Message<br>Title: <input type="text" id="title">
<br>Text: <input type="text" id="message"><br><br></div>';
};

If you're issue is just with formatting, you can use an array of lines and the join array method like this:
var html = [
'<div class="message">Add Message<br>',
'Title: <input type="text" id="title"><br>',
'Text: <input type="text" id="message"><br><br>',
'</div>'
].join("\n");
Alternatively, you could use a templating language such as Handlebars or Jade and precompile your templates.
Alternatively, you could use a multiline string hack like this:
https://github.com/sindresorhus/multiline

If you wanna get it on separate lines like that for easier readability create your html as a variable and concatenate with the "+" symbol. Also use single quotes for any quotes inside of the main html. Something like:
var html = "<div class='message'>Add Message<br>"
+ "Title: <input type='text' id='title'><br>"
+ "Text: <input type='text' id='message'><br><br>"
+ "</div>";
document.getElementById("add_message").innerHTML = html