jQuery append does not consider CSS of the div - javascript

I tried to add an item to a main div when clicking in the button add item, this should (every time) add a new line ( a text input), to the main content. This works fine.
The problem is that the text input has some css (some width and height...), which is not loading when adding it with jQuery, so the add works fine but it shows a "normal" unstyled text input, not mine (witch is styled).
here my HTML.
<fieldset class="lodging-info-fieldset" id="all_field">
<legend>Gage sur &eacutequipement projet</legend>
<div class="panel-heading score_pannel">
<ul class="panel-heading-fieldset">
<li>D&eacutesignation</li>
<li>Valeur</li>
</ul>
</div>
<div class="form-group" id="extended">
<div class="col50 left ">
<input type="text" class="form-control" id="designation"
placeholder="">
</div>
<div class="col50 left ">
<input type="text" class="form-control" id="valeur"
placeholder="">
</div>
</div>
<div class="form-group">
<div class="add_plus">
<a id="add_pluss" class='add_plus'>add item </a>
</div>
</div>
</fieldset>
and my jQuery append function:
addLigne : function(event) {
$("#all_field")
.append(
'<div class="form-group">'
+ '<div class="col50 left">'
+ '<input type="text" class="form-control" id="designation">'
+ '</div></div>');
},
Any ideas?
Thanks a lot for your help!

I don't know how you are styling it (we need to view your CSS code), but you are duplicating and N-plicating the same ID element, and is not good practice because you can't access to this element with a correct code (maybe with cruft but is not clean and properly).
Please, think about it and try to change ids with a unique string, like numbers for example.
addLigne : function(event) {
$("#all_field")
.append(
'<div class="form-group">'
+ '<div class="col50 left">'
+ '<input type="text" class="form-control" id="designation_'+ ($('input[id^="designation_"]).length + 1) +'">'
+ '</div></div>');
},
When you show us your CSS we can help you with your real problem.
Good luck

Related

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!

how to generate the id of a div dynamically using javascript

I have a (+) sign and a (-) sign. If the user clicks on the + sign than whatever their in the row will automatically get generated the same with new id.
Now when user click on + sign than div id and text box under it will get changed.
Code below for div as follows:
<div class="row" id="Div0">
<div class="col-md-3">
<div class="form-group">
<label for="name">Last Name</label>
<input type="text" class="form-control" id="txtLastName0" placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-md-9"></div>
</div>
Now when user clicks on + sign the new row with text box with new id txtLastName1 will get generated.
Now on click of + sign how do i get new id of textbox and a div with new row.
Div1 and textbox1 will get generated
Basically what you should do is, keep the markup you want to generate as a template in your DOM and when user clicks the "Add" button, clone this markup and append to the DOM (to a container div). then update the Id's of the input and divs as needed.
A simply sample would be like
<div class="row" id="template" style="display: none;">
<div class="col-md-3">
<div class="form-group">
<label for="name">Last Name</label>
<input type="text" class="form-control lname" id="txtLastName"
placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-md-9"></div>
</div>
<button id="btnAdd">+</button>
<div id="container"></div>
Now wire up a click event handler to the Add/+ button. You may use the jQuery clone() method.
$(function () {
$("#btnAdd").click(function(e) {
e.preventDefault();
var childCount = $("#container").children().length;
var c = $("#template").clone().show();
c.attr("id", "Div" + childCount );
c.find(".lname").attr('id', 'txtLastName' + childCount);
$("#container").append(c);
});
});
For deleting, you can add a event handler on the delete button and remove the specific div from dom. jQuery remove() method will do it. Use closest() and find as needed to get the correct div to remove.
Here is a working simple jsbin sample for your reference

How to handle events on markup inserted through jQuery

I have the following markup:
<div id="section">
<input type="text" id="myInput">
</div>
On click of a button, I'm cloning and inserting a copy of this markup with unique IDs using this script:
var newSection = $("#section").clone();
$(newSection).attr('id', "section" + ($("div[id^=section").length + 1));
$(newSection).find("input").attr('id', "myInput" + ($("input[id^=myInput").length + 1));
$("div[id^=section").last().after(newSection);
My resulting markup:
<div id="section">
<input type="text" id="myInput">
</div>
<div id="section2">
<input type="text" id="myInput2">
</div>
My question: is it possible to manipulate this new markup with jQuery? I assume since it has loaded dynamically after a click it's not part of the initial DOM and jQuery doesn't recognize it? I'm having trouble getting a click event to register on #myInput2. Thanks for any insight.
Add classes to your markup:
<div id="section" class="section">
<input type="text" id="myInput" class="section-input">
</div>
Simplify your code
var $newSection = $('#section').clone();
var $sections = $('.section');
var index = $sections.length +1;
$newSection.attr('id', 'section' + index);
$newSection.find('input').attr('id', 'myInput' + index);
$sections.last().after($newSection);
Make sure click handlers are added to existing and new elements
$(document).on('click', '.section-input', function(){
... your code
})
if you wrap them in a container, you can delegate that container keep track of the buttons. For example, if you have:
<div id="container">
<div id="section">
<input type="text" id="myInput">
</div>
<div id="section2">
<input type="text" id="myInput2">
</div>
</div>
you can delegate the task to the container like this:
$("#container").on("click","input",function(){
var newSection = $("#section").clone();
$(newSection).attr('id', "section" + ($("div[id^=section").length + 1));
$(newSection).find("input").attr('id', "myInput" +
($("input[id^=myInput").length + 1));
$("div[id^=section").last().after(newSection);
}
This way you can manipulate them if not defined while binding
EDIT: Updated from .delegate() to .on()

Adding dynamic form elements jQuery

I am attempting to use jQuery to add the dynamic form elements to my page. At the moment I can get one of my form elements to be added when the user clicks the button but the second element isn't being added alongside it.
I do this by appending some html to divs with a specific class when a button is clicked.
I have created a JSfiddle. As you can see the 'ingredient' part is working, however the quantities is not.
https://jsfiddle.net/fe0t3by2/
$('.recipe-ingredients #addNewIngredient').on('click', function () {
var i = $('.recipe-ingredients .ingredient').size() + 1;
$('<div class="form-group ingredient"><label class="control-label" for="searchinput">Ingredients</label><div><input id="ingredient_' + i + '" name="ingredients[]" type="text" placeholder="Ingredients" class="form-control input-md"></div></div>Add Ingredient</div>').appendTo($('.recipe-ingredients .ingredients'));
$('<div class="form-group"><label class="control-label" for="buttondropdown">Quantity</label><div class="input-group"><input id="quantity_' + i + '" name="quantity[]" class="form-control" placeholder="Quantity" type="text"><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Measure<span class="caret"></span></button><ul class="dropdown pull-right"><li>Grams</li><li>Ounces</li><li>Option three</li></ul></div></div>').appendTo($('.recipe-quantities .quantities'));
});
Thank you
You have misspelled the 'recipe-quantities' class on your quantities div.
<div class="col-md-6 recipe-quantites">
changed to
<div class="col-md-6 recipe-quantities">
At the moment I can get one of my form elements to be added when the user clicks the button but the second element isn't being added alongside it.
With dynamically added content you should delegate the click to the document for example (something where the object is contained in).
jQuery documentation .on()
$(document).on('click', '.recipe-ingredients #addNewIngredient', function () {
JSFiddle demo

Find an element and then find first from it with a certain class and inject an html in jQuery

I have this code to add error message next to the field input:
$("#" + index).after('<span class="text-error validation-error-inline">' + value[0] + '</span>');
And the result looks, for example, like this:
<div class="middle">
<input id="username" class="form-control" type="text" name="username">
<span class="text-error validation-error-inline">The username has already been taken.</span>
</div>
<div class="right"></div>
However, I would like to inject the span with the message inside the div with the class="right", so it would end up like this:
</div>
<div class="right">
<span class="text-error validation-error-inline">The username has already been taken.</span>
</div>
How to do that? btw. one thing is important that class="right" could be within class="middle" to, so I somehow need to go one lebvel back in hierarchy and only then find the first right class.
$("#"+index).closest(".middle").next(".right")
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');
Why don't you try this if you want to add span to the .right div
$("#" + index).closest(".middle").next(".right").empty()
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');

Categories