Adding {% csrf_token %} to javascript HTML insertion - javascript

All,
I have a popup that is inserted via javascript when a button is clicked:
function loadTypeManagement(existingDocTypes) {
const typeManagementModalDiv =
'<div class="modal fade" id="typeManagementModalDiv" >' +
'<div class="modal-dialog" style="max-width: none;">' +
'<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
'<form class="feedback_form" autocomplete="off" action="/" method="post" id="taskitem_form">' +
'<h1 id="djangoInsert">Type Management</h1><br>' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
'<label class="">No</label>' +
' <input type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
'<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
' <input class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
'</div>' +
'</div>' +
'<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
'</div>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<input class="submit_button" type="submit" value="Remove Document Type">' +
'</div>' +
'<hr>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m2" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">To Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-4"></div>' +
'<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
'<div class="col-4"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<hr>' +
'</form>' +
'</div>' +
'</div>' +
'</div>';
const newDiv = document.createElement("div");
newDiv.innerHTML = typeManagementModalDiv;
var data = $('form').serialize()
document.body.appendChild(newDiv);
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}
I am trying to submit the form and keep getting the error "CSRF token missing or incorrect." I've tried to insert it via string '{% csrf_token %}', but that just leaves the string value and Django doesn't pick up on it.
Any idea how I can do this? Is there a better way?


I'm not completely sure if there are any security concerns using this method (please let me know if there are), but I was able to initiate the {{ csrftoken }} within the template using:
<script>
var csrftoken = '{{ csrf_token }}';
</script>
and then passing that token value to the JS function like so:
<a onclick="loadTypeManagement({{ existingDocTypes }}, csrftoken);" id="feedbackButton" data-toggle="modal" data-target="#typeManagementModalDiv" class="hide_table_button underline_none" href="{% url 'admin:login' %}">Type Management</a>
Then, within the JS, I was able to add the line:
'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
which holds the token value.
So, the full JS looks like this:
function loadTypeManagement(existingDocTypes, csrftoken) {
console.log(csrftoken)
const typeManagementModalDiv =
'<div class="modal fade" id="typeManagementModalDiv" >' +
'<div class="modal-dialog" style="max-width: none;">' +
'<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
'<form class="feedback_form" autocomplete="off" action="/adminFunct/" method="post" id="taskitem_form">' +
'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
'<h1 id="djangoInsert">Type Management</h1><br>' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
'<label class="">No</label>' +
' <input type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
'<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
' <input class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
'</div>' +
'</div>' +
'<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
'</div>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<input class="submit_button" type="submit" value="Remove Document Type">' +
'</div>' +
'<hr>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m2" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">To Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-4"></div>' +
'<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
'<div class="col-4"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<hr>' +
'</form>' +
'</div>' +
'</div>' +
'</div>';
const newDiv = document.createElement("div");
newDiv.innerHTML = typeManagementModalDiv;
document.body.appendChild(newDiv);
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}
For any curious, this portion is used for dropdown stuff and not needed for anything related to the csrf_token
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}

Related

how to Auto Increment the value in input field (type=text) that is dynamically added on a button click?

I want to have a value in "sr.no." field that is auto incremented every time i click on button that adds new clause.
html:
<div id="clauseDiv">
<div class="col-sm-12">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="clause">Clause: </label>
<div class="col-sm-10">
<input type="text" class="form-control clauseHeader" v-bind:id="'clauseHeader-' + clause.contractGroupId"
name="clause" :key="index" v-bind:value="clause.contractGroupName" readonly="readonly"/>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-sm-2" for="sequence">Sr.no.: </label>
<div class="col-sm-4">
<input type="text" class="form-control clauseSequence" v-bind:id="'clauseSequence-' + clause.contractGroupId" name="sequence"
:key="index" v-bind:value="clause.sequence" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-1" for="subClause">Subclause: </label>
<div class="col-sm-11">
<div>
<textarea class="form-control subClause" v-bind:id="'subClause-' + clause.contractGroupId"
:key="index" readonly="readonly"></textarea>
</div>
</div>
</div>
</div>
</div>
js:
var clauseHtml = '<div class="col-sm-12" id="clause-'+this.count+'">'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="clause">Clause: </label>'+
' <div class="col-sm-10">'+
' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-'+this.count+'" name="clause" />'+
' </div>'+
' </div>'+
'</div>'+
'<div class="col-sm-4">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>'+
' <div class="col-sm-4">'+
' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-'+this.count+'" name="sequence"/>'+
' </div>'+
' </div>'+
' </div>'+
'<div class="col-sm-2">'+
'<div class="form-group">'+
' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-'+this.count+'" v-on:click="deleteClause">Delete</button>'+
' </div>'+
' </div>'+
'<div class="col-sm-12">'+
' <div class="form-group">'+
' <label class="control-label col-sm-1" for="subClause">Subclause: </label>'+
' <div class="col-sm-11">'+
' <textarea class="form-control clauseAddlTermSubClause" id="subClause-'+this.count+'" ></textarea>'+
' </div>'+
' </div>'+
' </div>'+
'</div>';
$('#clauseDiv').append(clauseHtml);
this.count++;
From html, I am adding div which contains 'clause', 'sr.no.' and 'subclause' fields. I have a button, and when clicked on that button the js part gets executed and the div appends and more 'clause', 'sr.no.' and 'subclause' fields are added. I want the newly appended 'sr.no' field to get a value in it that is auto incremented from the previous field. How do I do that?

remove this from this.count and make the count as global variable, add value="' + count +'" to the input and it should be like this
'<input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>'
Demo:
var count = 0;
$('#addClause').on('click', function() {
var clauseHtml = '<div class="col-sm-12" id="clause-' + count + '">' +
'<div class="col-sm-6">' +
'<div class="form-group">' +
' <label class="control-label col-sm-2" for="clause">Clause: </label>' +
' <div class="col-sm-10">' +
' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-' + count + '" name="clause" />' +
' </div>' +
' </div>' +
'</div>' +
'<div class="col-sm-4">' +
'<div class="form-group">' +
' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>' +
' <div class="col-sm-4">' +
' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>' +
' </div>' +
' </div>' +
' </div>' +
'<div class="col-sm-2">' +
'<div class="form-group">' +
' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-' + count + '" v-on:click="deleteClause">Delete</button>' +
' </div>' +
' </div>' +
'<div class="col-sm-12">' +
' <div class="form-group">' +
' <label class="control-label col-sm-1" for="subClause">Subclause: </label>' +
' <div class="col-sm-11">' +
' <textarea class="form-control clauseAddlTermSubClause" id="subClause-' + count + '" ></textarea>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
$('#clauseDiv').append(clauseHtml);
count++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addClause">addCaluse</button>
<div id="clauseDiv"></div>

Regarding generate and remove html elements dynamically using jquery

I am working on a project in that there is a requirement of dynamically generate html elements, one is date-picker and another one is time range, and it should generate dynamically whenever i click on add row for date-picker and for multiple time ranges.
Can anyone help me how to do this?

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12"> </div>
<div class="col-md-12"> </div>
<div id="date-selection">
<div class="row" id="date_count_0">
<div class="col-md-12"> </div>
<div class="col-md-11">
<input type="text" name="date[0]" value="" class="form-control datepicker"/>
</div>
<div class="col-md-1" style="text-align: right;">
<i class="fa fa-plus"></i>
</div>
<div class="col-md-12"> </div>
<div class="col-md-12"> </div>
<div class="timing-selection_0">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<input type="text" name="dat[0][from]" value="" class="form-control time-picker" />
</div>
<div class="col-md-5">
<input type="text" name="dat[0][to]" value="" class="form-control time-picker" />
</div>
<div class="col-md-2" style="text-align: right;">
<a href="javascript:void(0);" class="btn btn-info add_timings" id="add_timings_0" data-id="0" onclick="add_timings(this)">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var date_count = 1;
var time_count = 1;
function add_timings(attr){
var thisid = $(attr).data("id");
var inner_timings = "<div id='delete_timing_" + time_count + "'><div class='col-md-12'> </div>" +
"<div class='col-md-12'>" +
"<div class='row'>" +
"<div class='col-md-5'>" +
"<input type='text' name='dat[" + thisid + "][from]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-5'>" +
"<input type='text' name='dat[" + thisid + "][to]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-2' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info add_timings' id='add_timings_" + time_count + "' onclick='deletetimings(" + time_count + ")'>" +
"<i class='fa fa-minus'></i>" +
"</a> " +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".timing-selection_" + thisid).append(inner_timings);
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
time_count++;
}
$("#add_date").on("click", function (row, index) {
var texttoappend = "<div id='delete_row_" + date_count + "'>" +
"<div class='row'>" +
"<div class='col-md-12'> </div>" +
"<div class='col-md-11'>" +
"<input type='text' name='date[" + date_count + "]' value='' class='form-control datepicker' /> " +
"</div>" +
"<div class='col-md-1' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info' onclick='delete_date(" + date_count + ");'><i class='fa fa-minus'></i></a>" +
"</div>" +
"<div class='col-md-12'> </div>" +
"<div class='col-md-12'> </div>" +
"<div class='timing-selection_" + date_count + "'>" +
"<div class='col-md-12'>" +
"<div class='row'>" +
"<div class='col-md-5'>" +
"<input type='text' name='date[" + date_count + "][from]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-5'>" +
"<input type='text' name='date[" + date_count + "][to]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-2' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info add_timings' id='add_timings_"+date_count+"' data-id='"+date_count+"' onclick='add_timings(this)'>"+
"<i class='fa fa-plus'></i>"+
"</a>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
"</div>";
$("#date-selection").append(texttoappend + "<br />");
date_count++;
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
});
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
function delete_date(datecount) {
$("#delete_row_" + datecount).remove();
}
function deletetimings(datecount) {
$("#delete_timing_" + datecount).remove();
}
</script>
</body>
</html>

adding and removing divs dynamically with jquery

Hi guys I've got stuck with this. The add works fine the removing is not working. I can alert the figures but the selection is not work. I have just added the remove function.
this i have modified it and it works thanks
<script>
$(function () {
// Handler for .ready() called.
lastPassengerID = $('.passengersInsert').children().last().attr('class');
});
//addPassenger();
// A $( document ).ready() block.
function addPassenger() {
var passengers = $('.passengersInsert').children().length;
if (passengers > 1) {
//var lastPassengerID = $('.passengersInsert').children().last().attr('class');
//var id = $('.passengersInsert').children().attr('id');
lastPassengerID = parseInt(lastPassengerID.replace('P', ''));
} else {
lastPassengerID = 0;
}
if (passengers === 0) {
//alert('passengers' + passengers);
$(".checkbox1").remove();
}
var seqNo = passengers + 1;
if (seqNo > 1) {
var defaultText = "PASSENGER NO " + seqNo + "";
} else {
defaultText = "LEAD PASSENGER";
}
//alert('last ID' + lastPassengerID);
var template = '<div class="P' + seqNo + '"><div id="' + seqNo + '" class="panel panel-default"><div class="panel-heading">' + defaultText + '<div class="col-xs-2 row pull-right" id="addRemove"><input id="neg" class="col-xs-5 pull-left" type="button" value="-" onclick="removePassenger('+ seqNo +')"> <input id="pos" class="col-xs-5" type="button" value="+" onclick="addPassenger()"></div></div><br/><div class="row">';
template += '<div id="C' + seqNo + '" class="col-xs-12" style="/*border:1px solid blue;*/"><div class="col-xs-12" style="/*border: 1px solid green;*/">';
template += '<div class="row"><em><h5 class="col-xs-12" >Contact Details</h5></em></div><br/></div>';
template += '<div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left" style="/*border: 1px solid red;*/"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span><input type="text" class="form-control" placeholder="First Name" name="FName' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12 pull-right"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span><input type="text" class="form-control" placeholder="Last Name" name="SName' + seqNo + '"></div></div> </div><div class=" col-xs-12">';
template += '<div class="row"><div id="C' + seqNo + '" class=" col-xs-12"><div class="col-xs-12"><div class="row"><em><h5 class="col-xs-12">Address</h5></em></div><div class="checkbox' + seqNo + '"><label class="row col-xs-12 "><input type="checkbox" class="checkbox' + seqNo + ' col-xs-1" name="PAddress' + seqNo + '" id="PAddress' + seqNo + '" value=""> Same as Lead Passenger </label></div></div></div></div>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="number" class="form-control" placeholder="Door No." name="DoorNumber' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Street Name" name="Road' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Town /City" name="Town' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Post Code /Zip Code" name="PostCode' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="County/State" name="County' + seqNo + '"></div></div><div class="col-sm-6 col-xs-12">';
template += '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span><input type="text" class="form-control" placeholder="Country" name="Country' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span><input type="text" class="form-control" placeholder="Contact No" name="Tel' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Email" name="Email' + seqNo + '"></div></div></div></div><br/></div></div></div></div></div>';
//$('.passengersInsert').append(template);
$(template).appendTo('.passengersInsert');
$(".checkbox1").remove();
$('.P' + seqNo).css('border', '1px solid red');
}
//var id = $('div').attr('id');
function removePassenger(seqNo) {
$('.P' + seqNo).remove(); /*nothing happens*/
$('.P' + seqNo).css('border', '1px solid blue');/*this highlights the '-' buttons margin. instead of the expected element.*/
}
</script>

There are two problems in your code:
1)
The variable lastPassengerID is defined inside the addPassenger function and therefore bound to its scope. The variable is not available outside the addPassenger function and its therefore undefined inside the removePassenger function.
To use it as you intend inside the removePassenger function you need to declare the variable in a scope both functions are part of or simply declare it as a global variable right before you open the addPassenger function.
2)
The first line of your removePassenger function does contain a coding error:
$('P+lastPassengerID+').remove();
should be
$('.P'+lastPassengerID).remove();
so the the contents of lastPassengerID are actually combined with the string "P" which results in a valid selector. Additionally you need to add a dot (.) at the start of the selector to identify the selector as an class selector so it actually matches a class.

Input with wrong size

Hello I'm using bootstrap 3.3.6 and I don't know why this is happen. Basically I am using bootstrap grid system, I have mi first div with col-md-12 and then with jQuery I create 4 divs with class col-md-3 with controls inside but when I resize the window the controls jump to other line and leaves a blank space.
var num = 0;
var lineas = "";
$('#agregar').click(function() {
agregar();
});
function agregar() {
num++;
if (num <= 4) {
if (num == 1) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Quality:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 2) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Manufacture:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 3) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Supp. Produccion:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 4) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Control de Documentos:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
} else {
$('#agregar').hide();
$('#lbl1').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" id="options">
<div class="col-md-4">
<label id="lbl1" class="control-label hidden-print">Add</label>
<span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
</div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>
jsFiddle

There's a typo in the HTML strings in the JS. You have </label"> instead of </label>.
var num = 0;
var lineas = "";
$('#agregar').click(function() {
agregar();
});
function agregar() {
num++;
if (num <= 4) {
if (num == 1) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Quality:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 2) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Manufacture:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 3) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Supp. Produccion:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 4) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Control de Documentos:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
} else {
$('#agregar').hide();
$('#lbl1').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" id="options">
<div class="col-md-4">
<label id="lbl1" class="control-label hidden-print">Add</label>
<span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
</div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>

Javascript onClick event just once?

I'm trying to implement a comment system. Now I have a problem regarding JS and an onClick function.
First the code:
<ul class="comments">
<li>
<div class="comment">
<div class="img-thumbnail" style="margin-left: -98px;">
<img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
</div>
<div class="comment-block-new" style="background-color:#fff;">
<div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
<form action="" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</li>
And the functions.js
function expandComment(inputC,formC){
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
+ '<div class="form-group">'
+ '<div class="col-md-4">'
+ '<label>Your name</label>'
+ '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
+ '<div class="col-md-12">'
+ '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
+ '</div>'
+ '</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}
Now I want the expand function only to run once. I need to create the expanding dynamically cause of the IDs and an upcoming reply system.
How to do that?
Thank you in advance.

Did you try adding a flag for it?
var bExpandFunctionRunned = false;
function expandComment(inputC,formC){
// it won't run again once the flag is set.
if(bExpandFunctionRunned == false){
bExpandFunctionRunned = true;
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
+ '<div class="form-group">'
+ '<div class="col-md-4">'
+ '<label>Your name</label>'
+ '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
+ '<div class="col-md-12">'
+ '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
+ '</div>'
+ '</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}
}

Best way to assign flag value of in element dataSet and when event call, check flag value function, if already call return from top of function, see below code
function expandComment(inputC,formC){
/***return event code****/
if(inputC.dataset.offclickevent === true)
return;
else
inputC.dataset.offclickevent = true;
/****************/
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
'<div class="form-group">'
'<div class="col-md-4">'
'<label>Your name</label>'
'<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
'</div>'
'</div>'
'</div>'
'<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
'<div class="col-md-12">'
'<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
'</div>'
'</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}

Categories

Resources