Vue.js dynamically appending HTML when clicking on a button - javascript

So basically what I am trying to achieve is allowing the user to be able to add to an existing set of information that will be passed on to Vue from JSON.
So the following code is my HTML code which comprises of the div element with the id objectiveArea that vue will render to and a hard coded button for the users to add more entries.
<div class="form-group" id="objectiveArea"></div>
<div><input type="button" value="Add Objective" id="addButton" /></div>
And here is my Javascript where I pass the JSON into vue for it to render as well as having an onclick event when the add button is triggered. The function addNewObjectiveRow serves as a template to append when the user clicks add and the objectiveElements is a template for vue to render the existing JSON to the HTML.
function addNewObjectiveRow(value) {
var $divElements = "<div class='row'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'></textarea></div></div><hr />"
+ "</div>"
return $divElements;
}
var objectiveElements = "<div class='row'><div v-for='(objective, index) in objectivesData'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' v-if='(index > 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'></textarea></div></div><hr />"
+ "</div></div>";
var data = JSON.parse('[{"Title":"Title One","TargetDate":"21 June 2017","Details":"Details One"},{"Title":"Title Two","TargetDate":"22 June 2017","Details":"Details Two"}]');
var Objectives = Vue.extend({
template: objectiveElements,
data: function () {
return {
objectivesData: data
}
}
})
new Objectives().$mount('#objectiveArea');
$('#addButton').on('click', function () {
$('#objectiveArea').append(addNewObjectiveRow(""));
});//end addButton on click
However, the above code renders the existing information from the JSON just fine in the HTML but when I click on the add button, nothing happens at all. Am I missing something or getting it all wrong?

https://v2.vuejs.org/v2/guide/list.html
HTML
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<button #click="addItem()">Add new item</button>
JS
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods: {
addItem(){
this.items.push({message: 'new message'})
}
}
})
Clicking the button will execute addItem() method which will add a new item into data items and it will automatically render new li

there are many mistakes
the function addNewObjectiveRow(value)you don't use the parameter value.
Vue is data-driven, you should change the objectivesData, not simply append the string. Read the document

Related

Creating an option select from db using ajax

I am trying to create an additional form text field on click of a button which wotrtks fine, my only problem is that the select option is blank and when I inspect element I see that NAN is added to it.
Here is the design for the dynamic form elements container
<div class="col-sm-6" id="prescription-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="drug" class="form-label">Medicine </label>
<select name="drug[]" class="form-control search-select">
<?php echo $drug_drop_down; ?>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Comment</label>
<div class="phone-icon">
<input type="text" class="form-control" name="diagnosis">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<a href="#" id="add_prescription" class="btn btn-warning"><i class="fa fa-plus"></i>Add
prescription</a>
</div>
</div>
This is how I have implemented the onclick listener for the add prescription button
<script>
$("#add_prescription").click(function(e) {
e.preventDefault();
var result="<option value=''>Select Drug<option>";
$.ajax({
type: 'GET',
url: 'drugs',
success: function(data) {
if (data.length > 0) {
$.each(data, function(i, item) {
result += "<option value='" + data.id + "'>"+data.name+"<option>";
})
} else{
result += "<option value='" + data.id + "'>"+data.name+"<option>";
}
$('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
"<div class='form-group'>" +
"<label for='drug' class='form-label'>Medicine </label><select name='drug[]'' class='form-control'>" +
+ result +
"</select>" +
"</div>" +
"</div>" +
"<div class='col-sm-6'>" +
"<div class='form-group'>" +
"<label>Comment</label>" +
"<div class='phone-icon'>" +
"<input type='text' class='form-control' name='diagnosis'>" +
"</div>" +
"</div>" +
"</div>" +
"</div>")
}
})
})
</script>
Finally this is the controller sending back data
function () {
$drugs = Medicine::get();
return response()->json( $drugs);
}
Now my problem is that when i alert(data) I get [object Object],[object Object]. This made me modify the controller as follows
function () {
$drugs = Medicine::get();
$drug_drop_down = "<option>Select drug</option>";
foreach($drugs as $drug){
$drug_drop_down .="<option value='".$drug->id."'>$drug->name</option>";
}
return response()->json( $drug_drop_down);
}
and the onclick listener to
<script>
$("#add_prescription").click(function(e) {
e.preventDefault();
$.ajax({
type: 'GET',
url: 'drugs',
success: function(data) {
$('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
"<div class='form-group'>" +
"<label for='drug' class='form-label'>Medicine </label><select name='drug[]'' class='form-control'>" +
+ data +
"</select>" +
"</div>" +
"</div>" +
"<div class='col-sm-6'>" +
"<div class='form-group'>" +
"<label>Comment</label>" +
"<div class='phone-icon'>" +
"<input type='text' class='form-control' name='diagnosis'>" +
"</div>" +
"</div>" +
"</div>" +
"</div>")
}
})
})
</script>
Now if I alert(data) I get <option>Select drug</option><option value='1'>Quinine</option><option value='2'>Malariaquine</option> but the select is still being added without options and the following appear on inspect element for the added filed
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="drug" class="form-label">Medicine </label>
<select name="drug[]" '="" class="form-control">NaN</select>
</div>
</div>
</div>
What could I be doing wrong here?
After some searching just realized that the second way was supposed to work except that this + + data + "</select>" + means I am using + as an addition operator and not a concatenator, changing it to + data + "</select>" + solved my problem. I do not still understand what the issue could have been with the first approach

can't combine script and php div.innerHTML += "<form action='\"{{route('stock.store')}}\"' method='post'>#csrf</form>";

I have a button that calls a script method named add_Fields(). I used .innerHTML to add fields in a form.
The problem is when i put the attribute action with a value of {{route('stock.store')}} the whole script code doesn't work.
Can anybody help me with this?
var i = 0;
var d = document.getElementById("content");
d.innerHTML += "<div class='form-group row'>"+
"<span class='col-md-2'>UNIT:<input form='form"+i+"' id='unit' type='text' name='unit' class='form-control' required></span>"+
"<span class='col-md-2'>QTY:<input form='form"+i+"' id='quantity' type='number' name='quantity' class='form-control' required></span>"+
"<span class='col-md-4'>UNIT COST:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"<span class='col-md-4'>AMOUNT:<input form='form"+i+"' id='unit_cost' type='number' name='unit_cost' class='form-control' required></span>"+
"</div>"+
"<form id='form"+i+"' action='\"{{route('stock.store')}}\"' method='post'>#csrf</form>"+
"";
replace below code for form tag and make sure the route is defined in routes\web.php file
"<form id='form"+i+"' action='{{route('stock.store')}}' method='post'>#csrf</form>"+

Generate dynamic li elements depending on how many checkboxes are checked

I am trying to generate li elements for each checkbox that has been checked. It works when there is only one checked, but when I check 2 checkboxes, only the last checkbox and its hidden inputs (hidden inputs used to populate specific values inside the li element) are generated.
Here is the code I use now:
attachPanelListeners : function() {
$('#sc-accordion').bind('click', function(e) {
var items,
target = $(e.target);
if ( target.hasClass('submit-add-to-menu') ) {
var t = $(this).parent().parent(),
checkboxes = t.find('.sc-pagelist li input:checked');
// If no items are checked, bail.
if ( !checkboxes.length )
return false;
var structure;
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
structure = "<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
"<div class='menu-item-handle ui-sortable-handle'>"+
"<span class='item-title'><span class='menu-item-title'>" + hidden[0].value + "</span></span>"+
"<span class='item-controls'><span class='item-type'>Pagina</span><a href='#' class='item-edit'></a></span>"+
"</div>"+
"</div>"+
"<div class='menu-item-settings sc-clearfix' style='display:none;'>"+
"<p class='description description-wide'>"+
"<label for='edit-menu-title'>Navigatielabel</label>"+
"<input type='text' class='form-control' id='edit-menu-title' value='" + hidden[0].value + "'>"+
"</p>"+
"<fieldset class='field-move hide-if-no-js description description-wide'>"+
"<span class='field-move-visual-label' aria-hidden='true'>Verplaatsen</span>"+
"<button type='button' class='button-link menus-move menus-move-up' data-dir='up' style='display: none;'>Eén omhoog</button>"+
"<button type='button' class='button-link menus-move menus-move-down' data-dir='down' style='display: inline;' aria-label='Verplaats één omlaag'>Eén omlaag</button>"+
"<button type='button' class='button-link menus-move menus-move-left' data-dir='left' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-right' data-dir='right' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-top' data-dir='top' style='display: none;'>Naar boven</button>"+
"</fieldset>"+
"<div class='menu-item-actions description-wide submitbox'>"+
"<a class='item-delete submitdelete deletion' id='' href='#'>Verwijderen</a>"+
"</div>"+
"<input type='hidden' value='"+ $(this).val() +"'>"+
"<input type='hidden' value='"+ hidden[2].value +"'>"+
"</div>"+
"</li>";
});
$('#menu-to-edit').append(structure);
checkboxes.prop('checked', false);
};
})
},
Cheers
You're assigning the string on each loop, rather than appending - meaning you only ever get the last one.
One option is to change...
structure = "<li class='menu-item menu-item-depth-0'>"+
To...
structure += "<li class='menu-item menu-item-depth-0'>"+
An alternative option is to append the string on each loop directly...
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
$('#menu-to-edit').append(
"<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
...
"</div>"+
"</li>");
});
I made a simple example below ( as you didn't share the HTML and a bunch of code you shared is not relevant to the problem itself )
Basically you need to append to the existing HTML. WHat you are doing is replacing it with a new li every time you check a checkbox. So it overrides the previous html.
I also removed the corresponding li when the checkbox is unchecked.
THere might be a more straight forward solution out there but this is the best i came up with for now :)
var chkBox = $(".checkbox")
$(chkBox).on('change', function(){
var index = $(this).index()
var menuItem = `<li class=${index}>${index} list item</li>`
if ($(this).is(':checked') ) {
$('.menu').html($('.menu').html() + menuItem)
} else {
$(`li.${index}`).remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
</ul>
<div>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
</div>

How to generate modal popup of each row creation using datatable js

I am Using datatable js in MVC4. I want to generate modal popup on each row creation when table is create with data fill and open each modal popup on each radio button click.
$('#Hotel').dataTable({
bDestroy: true,
bProcessing: true,
sAjaxSource: '#Url.Action("SelectHotel_TripInfo", "CL_Invoices")',
aoColumnDefs: [
{
aTargets: [0],
"mRender": function (data, type, full) {
NewHotel(full[0]);
return "<input id='btnResp' type='radio' class='open-AddRespDialog btn btn-primary' data-toggle='modal' data-target='#exampleModal1' data-whatever='' data-id=" + data + ">";
}
}],
fnServerParams: function (aoData) {
aoData.push(
{ name: "Trip_No", value: $("#txtTripNo").val() }
);
}
});
My Popup Function :
function NewHotel(i) {
var items = '';
items += "<div class='modal fade' id='exampleModal1"+i+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'>"+
"<div class='modal-dialog' role='document'>"+
" <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>"+
" </div>"+
" <div class='modal-body'>"+
" <form>"+
" <div class='form-group'>"+
" <div class='box-body'>"+
" <div class='row'>"+
" <input name='Item2.HI_Rm_Tariff' class='form-control textDecor abc' type='text' value="+i+"/>"+
" </div>"+
" </div> "+
" </div> "+
" </form>"+
" </div>"+
" </div>"+
" </div>"+
"</div>";
$('#rData').append(items);
items = '';
}
Add a class in Radio-button like '.exampleModal1"+i+"' and Model code add Model property code like this and listen 'i' dynamically from your .net file.
function NewHotel(i) {
var items = '';
items += "<div class='modal fade' id='exampleModal1"+i+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' data-target='.exampleModal1"+i+"'>"+
"<div class='modal-dialog' role='document'>"+
" <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>"+
" </div>"+
" <div class='modal-body'>"+
" <form>"+
" <div class='form-group'>"+
" <div class='box-body'>"+
" <div class='row'>"+
" <input name='Item2.HI_Rm_Tariff' class='form-control textDecor abc' type='text' value="+i+"/>"+
" </div>"+
" </div> "+
" </div> "+
" </form>"+
" </div>"+
" </div>"+
" </div>"+
"</div>";
$('#rData').append(items);
items = '';
}

How to append check box in jquery

How I add checkbox after span in below code.
var aaa = $('<a/>')
.html("<span>" "</span >" + " <span>""</span> ")
.attr('data-transition', 'slide')
.appendTo(li);
Your .html() has several issues with concatenation:
.html("<span>" "</span >" + " <span>""</span> ")
//------^^^^--------------------^^--------useless quotes are here.
this way:
.html("<span></span ><input type='checkbox' value='' />" + " <span>""</span> ")
this way:
.html("<span></span >" + " <span></span><input type='checkbox' value='' />")
or after both:
.html("<span></span> <input type='checkbox' value='' />" + " <span></span><input type='checkbox' value='' />")
just add the html tag for checkbox inside <span>
try this
.html("<span> <input type='checkbox' value='value' />test<input type='checkbox' value='value1' />test1</span >") ;
You can also make use of the html option.
var $a = $("<a/>", {
"data-transition": "slide",
"html": $("<input>", {
"type": "checkbox"
})
})
.appendTo(li);
It will render this HTML:
<a data-transition="slide"><input type="checkbox"></a>

Categories