Develop Reference

How to use Tom-select dynamically?

There is a table contains Tom select input in my modal. And also I made an add button to add Tom select input. So when I click the add button, I clone the that contains tomselect input, but the tom-select input in the cloned tr doesnt work... How can I use tom-select input dynamically?? here's my code..
show modal :
this.show = function(){
var main = this;
var items= main.items;
var modalTitle = "modalTitle";
var modalMsg = ' <div id="modal-id">';
modalMsg += ' <table id = "MyTable" class="table">';
modalMsg += ' <tbody>';
modalMsg += ' <tr>';
modalMsg += ' <th class="col-xs-3"> 25125211 : </th>';
modalMsg += ' <td class="col-xs-9"><label class="col-xs-3"><input type="radio" class="input-val" name="confirm_radio" id="approve" value="100" required>apporve</label>';
modalMsg += ' <label class="col-xs-3"><input name="confirm_radio" id="refer" type="radio" value="900" required>refer</label></td>';
modalMsg += ' </tr>';
modalMsg += ' <tr id = "tomselect-tr">';
modalMsg += ' <th class="col-xs-3"> chooseTomselectOption </th>';
modalMsg += ' <td>';
modalMsg += ' <div class="input-group"><select id="TomSelect_1" placeholder="choose an item..."></select><span class="input-group-btn"><button id="cloneTr" type="button" class="btn btn-tool"><i class="fa fa-plus"></i></button></span></div>';
modalMsg += ' </td>';
modalMsg += ' </tr>';
modalMsg += ' </tbody>';
modalMsg += ' </table>';
modalMsg += ' </div>';
var modalBtn1Text = "done";
var modalBtn2Text = "cancel";
var modalCallback;
var updateCallback = function(){
agreementInfo.saveInfo();
};
modalCallback = updateCallback;
this.modal = new _modal.show(modalTitle
,modalMsg
,modalBtn1Text
,modalBtn2Text
,modalCallback
);
cloneTr function :
function cloneTr(){
trNum++;
var $newTr= $("#tomselect-tr").clone();
$newTr.attr("id", "tomselect-tr""+trNum);
$newTr.find("#TomSelect_1").attr("id","TomSelect_"+trNum);
$("#MyTable").find("tbody").find("#tomselect-tr"").after($addChoiceGrantorTr);
var targetDiv = "TomSelect_"+trNum;
addSelector(targetDiv);
}
addSelector function
function addSelector(_targetDiv){
var selector = new TomSelect("#"+_targetDiv,{
valueField: 'USR_NO',
searchField: ['USR_NM', 'USR_ID', 'USR_EMAIL', 'GP_NM'],
maxItems: 1,
maxOptions: 100,
options: items,
render: {
option: function(data, escape) {
console.log(escape);
return '<div>' +
' <span class="USR_NM">' + escape(data.USR_NM) + '</span>' +
' <span class="GP_NM">' + escape(data.GP_NM) + '</span>' +
' <span class="USR_ID">' + escape(data.USR_ID) + '</span>' +
' <span class="USR_EMAIL">' + escape(data.USR_EMAIL) + '</span>' +
'</div>';
},
item: function(data, escape) {
return '<div id="'+itemDivTxt+'" title="' + escape(data.USR_NO) + '" data-name="' + escape(data.USR_NM) + '">' +
' <span class="tom-select-name">' + escape(data.USR_NM) + '</span>' +
' <span class="tom-select-group">' + escape(data.GP_NM) + '</span>' +
'</div>';
}
}
});
selector.clearCache();
}
How can I use tomselect dynamically or initialize when I click the add button?? thanks

I tried to clone the wrong object... I made a temporary tr object and clone it... and It works

Appending data fetched by an AJAX call to an already existing list in UI & saving the data fetched to the already saved list in localstorage

I have a page in which I have to show list of data in UI through ajax & append the list data in html table save that list data into Local Storage with Jquery, My question is that I want to implement lazy load in UI such that user clicks a button (Click to view more list), and after clicking the button the ajax calls another list with limit & offset to show more list & append the new list below the existing list in UI and also save the data into local storage along with the existing data present.
My Ajax Call for List Data
var sendingData = {
limit: "50000",
offset: "0"
};
$.ajax({
type: 'POST',
url: "/Common/Item/getselleritems?SellerId=" + userid,
data: sendingData ,
crossDomain: true,
success: function (data)
{
localStorage.setItem("productCode", JSON.stringify(data));
},
error()
{
//Do something
}
});
``
My Html design Function
function showProducts()
{
var productsStorage = localStorage.getItem("productCode");
var products = JSON.parse(productsStorage);
var trHTML = '';
$("table tbody").html("");
$.each(products.Data, function (key, value)
{
trHTML += '<tr>'
+ '<td class="d-md-flex align-items-center">' + '<figure style="' + imgStyle + '"><a href="" title="Photo title" data-effect="mfp-zoom-in">' +
'<img src="' + imgSrc + '" alt="thumb" class="lazy"></a></figure>' +
'<div class="flex-md-column">' +
'<h4 class="package_name" id="itemdescription_' + value.Id + '" onclick = "packageDetails(\'' + value.Price + '\',\'' + value.Name + '\',\'' + value.Description
+ '\',\'' + itemTimeSlotType + '\',\'' + value.ServiceName + '\',\'' + value.PreparationTime + '\',\'' + value.Quantity + '\')" >' +
'<i class="icon_box-selected" style="' + style + '; margin-right:3px"></i>' +
value.Name + '</h4>' +
'<p>' + value.Description + '</p>' +
'<em>' + "Available In: " + itemTimeSlotType + '</em>' + '<br>' +
'<span class="stars_sellerItem" style="' + starStyle + '">' + value.FoodtestAvgRating + ' <i class="icon_star"> </i> ' +
'</span>' +
'</div>' +
'</td>' + '<td style="padding: 0.75rem 0 0.75rem 0;">' +
'<strong id="itemprice_' + value.Id + '">' +
'<i class="fa fa-inr" aria-hidden="true"></i>' + value.Price +
'</strong>' +
'</td>' +
'<td class="options">' +
'<div class="dropdown dropdown-options">' +
'<i class="icon_plus_alt2"></i>' +
'<div class="numbers-row number" id="item2_' + value.Id + '" data-id="' + value.Id + '">' +
'<input type="text" value="1" class="form-control" name="quantity" id="itemvalue_' + value.Id + '" onchange="getval(' + itemId + ');" readonly>' +
'<div class="inc button_inc plus">' + '+' + '</div><div class="dec button_inc minus">' + '-' + '</div>' + '</div>' +
'</td>' + '</tr>';
}
$("table tbody").append(trHTML);
}

How to repalce all blank spaces with <br/> tag in Ajax call

I'm showing from DB some data, via ajax, datatype ist "string" that contains blank spases between words. How can I finde every of it and replace it wit tag, so every word will be in a new line?
here is my ajax code:
var tableId = "weekEvents";
function loadWeekData() {
// Append database data here
$.ajax({
type: "GET",
url: "/Home/JsonWeekEvents",
dataType: "JSON",
success: function (result) {
$.each(result, function (i, val) {
var trow = $('<tr class=content/>').data("id", val.Id);
//trow.append('<td>' + val.Id + " " + '</td>');
trow.append('<td style="padding:5px; width:auto; height:60px" class="FSE">'+val.FSE+'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="monVal" class="desc_NumM">' + val.Monday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="tueVal" class="desc_NumT">' + val.Tuesday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="wedVal" class="desc_NumW">' + val.Wednesday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="thurVal" class="desc_NumTr">' + val.Thursday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="friVal" class="desc_NumF">' + val.Friday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="satVal" class="desc_NumSa">' + val.Saturday + '</div >' +
'</td>');
trow.append('<td>' +
'<div style="text-align:center;" id="sunVal" class="desc_NumSu">' + val.Sunday + '</div >' +
'</td>');
tbody.append(trow);
tab.append(tbody);
});
$("#" + tableId).html(tab);
}
Basicly its about valuers "val.Monday", "val.Tuesday", "val.Wednesday"...."val.Sunday", those are my data from DB. Is it possible?

Use string repalce function as explained in [https://www.w3schools.com/jsref/jsref_replace.asp][1] . In your case, it could be like,
var res = str.replace(" ", "</br>");

Vue.js orderBy TotalPrice and Rate asc

Im trying to set the vue.js to orderBy a table of search result items, by TotalPrice or Rate. (clickable column header).
I tried vue.js documentatiom but the ascending ordering is not working.
My code:
var SearchResultComponent = Vue.extend({
template:
'<div class="table-responsive">' +
'<h3 class="selectedItemsHeader" style="margin-top:0;margin-bottom:0;">{{ language.resultsItems }}</h3>' +
'<table class="table">' +
'<thead>' +
'<tr>' +
'<th style="width:15%">' +
'{{ language.company }} <i class="fa fa-caret-down"></i>' +
'</th>' +
'<th style="width:30%">{{ language.service }}</th>' +
'<th style="width:10%">{{ language.servicePrice }}</th>' +
'<th style="width:10%">{{ language.discount }}</th>' +
'<th style="width:15%">{{ language.info }}</th>' +
'<th style="width:10%">' +
'{{ language.totalVat }} <i class="fa fa-caret-up"></i>' +
'</th>' +
'<th></th>' +
'</tr>' +
'</thead>' +
'<tbody v-if="items.length > 0">' +
'<tr v-for="item in items | orderBy itemByTotalPrice">' +
'<td class="clearfix">{{ item.companyName }}'+
'<span class="rate" v-if="item.companyRate"><span class="star"></span><span class="point">{{ item.companyRate }} / 5</span></span>'+
'</td>' +
'<td class="small-text item-name">{{{ getItemName(item) }}}</td>' +
'<td>{{ totalPriceNoDiscount(item) }} €</td>' +
'<td>{{ totalPriceDiscount(item) }} €</td>' +
'<td class="small-text">{{ item.companyNote || \' - \' }}</td>' +
'<td>{{ totalPrice(item) }} €</td>' +
'<td>'+
'<button class="btn btn-primary btn-sm" #click="select(item, $event)">{{ language.select }}</button>' +
'</td>' +
'</tr>' +
'</tbody>' +
'<tbody v-if="items.length == 0">' +
'<tr>' +
'<td colspan="7" style="font-size: 12pt;color: #777;padding-top: 60px;">{{ language.noResultsFound }}</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'<h3 class="selectedItemsHeader" v-if="selectedItems.length > 0">{{ language.selectedItems }}</h3>' +
'<table class="table selectedItems" v-if="selectedItems.length > 0">' +
'<tbody>' +
'<tr v-for="item in selectedItems">' +
'<td style="width:15%">{{ item.selectedItem.companyName }}' +
'</td>' +
'<td style="width:30%" class="small-text item-name">{{{ getItemName(item.selectedItem) }}}</td>' +
'<td style="width:10%">{{ totalPriceNoDiscount(item.selectedItem) }} €</td>' +
'<td style="width:10%">{{ totalPriceDiscount(item.selectedItem) || \'0.00\' }} €</td>' +
'<td style="width:15%" class="small-text">{{ item.selectedItem.companyNote || \' - \' }}</td>' +
'<td style="width:10%">{{ totalPrice(item.selectedItem) }} €</td>' +
'<td>'+
'<button class="btn btn-danger btn-sm" #click="remove(item)"><i class="fa fa-remove"></i></button>' +
'</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>',
props: ['items','selectedItems','removeUrl'],
data: function(){ return { sortBy: 'total' } },
computed: {
'language' : function() { return language; }
},
methods: {
'select' : function(item, ev) {
this.$dispatch('onCompanySelect', item);
$(ev.target).attr('disabled', true).addClass('disabled');
},
'remove' : function(item) {
this.$dispatch('onSelectedItemRemove', {
removeUrl: this.removeUrl,
item: item
});
},
'totalPriceNoDiscount' : function(item) {
return item.priceNoDiscount.toFixed(2);
},
'totalPriceDiscount' : function(item) {
return (item.priceNoDiscount - this.totalPrice(item)).toFixed(2);
},
'totalPrice' : function(item) {
return item.extraServicesPriceVat ? (item.priceVat + item.extraServicesPriceVat).toFixed(2) : item.priceVat.toFixed(2);
},
'itemByTotalPrice' : function(a, b) {
if(this.sortBy == 'total') {
$('a.companyrate').css('color', '#333');
$('a.totalVat').css('color', '#337ab7');
return this.totalPrice(a) > this.totalPrice(b);
} else if(this.sortBy == 'rate') {
$('a.totalVat').css('color', '#333');
$('a.companyrate').css('color', '#337ab7');
return a.companyRate < b.companyRate;
}
}
}
});
Any suggestions ? Thank you in advance

Better way to use html templete with json response

I am getting json response from my server.
I am getting detail of user like school(name,id),major subject(name,id),start ,end etc.
I want to show this is appropriate text fields inside a form where user can edit this and after editing user should submit it again to server.
I am embadding fetched json code with html code inside the jquery.
I am finding it very difficult to manage html inside jquery is there any better way to this with following code.
$(document).on('click', '.edit-edu', function(event) {
event.preventDefault();
var id = $(this).parents('.row').attr('id');
var id1 = id.split('-');
$.post("SingleEdu", {id: id1[1]}, function(data) {
console.log(data);
$.each(data.educationList, function(key, value) {
$('#' + id).replaceWith('<div id="addNewEdu" class="addorEdit">'
+ '<legend>Edit education details</legend>'
+ '<form action="UpdateEducation" id="UpdateEducation" cssClass="form-horizontal">'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>School/College</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ ' <textfield name="ed.pageBySchoolPid.name" value="' + value.pageBySchoolPid.name + '" id="school2" label="School/College" placeholder="College or School Name" cssClass="form-control">' + '</textfield>'
+ '<input type="hidden" name="ed.pageBySchoolPid.id" value="' + value.pageBySchoolPid.id + '" id="schoolId2" label="School/College" cssClass="form-control">'
+ '</hidden>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Major</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.pageByMajorPid.name" value="' + value.pageByMajorPid.name + '" id="major1" label="Class" placeholder="Major Subject" cssClass="form-control">'
+ '<input type="hidden" name="ed.pageByMajorPid.id" value="' + value.pageByMajorPid.id + '" id="majorId1" label="Class" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Start</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.start" value="' + value.start + '" id="sstart1" label="From" placeholder="eg. Start: July 2007" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>End</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.end" value="' + value.end + '" id="send1" label="To" placeholder="eg. End : May 2011 or Till" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Visibility</label>'
+ ' </div>'
+ '<div class="col-md-6">'
+ '<select label="Visibility" name="ed.visibility" value="' + value.visibility + '" id="svisibility1" value="public" cssClass="form-control">'
+ '<option>Public</option>'
+ '<option>Friends</option>'
+ '<option>Me</option>'
+ '</select>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label class="sr-only">Submit</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="submit" value="add" id="submit_education" cssClass="btn btn-sm btn-success"/>'
+ '</div>'
+ '</div>'
+ '</form>')
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>
<div class="row" id="edu-56">
<div>Specialization</div>
<div>School</div>
<div>start end</div>
<i class="fa fa-edit edit-edu">edit</i>
<i class="fa fa-times delete-edu"></i>
</div>

You could store your code inside another .html file and pull it in using another AJAX call:
var FormHTML = '';
$.get('form.html', function(data) {
FormHTML = data;
});
Then to get your values in you can set up your input HTML with something that can be easily replaced out. I've just wrapped the object name in between some #:
<input type="hidden" name="ed.pageByMajorPid.id" value="##pageByMajorPid.id##" id="majorId1" label="Class" cssClass="form-control">
Then to replace out these values with your actual values, just do a loop:
for (var name in value) {
if (typeof value[name] != 'object') { // If not an object, replace the value
formHTML = formHTML.replace('##' + name + '##', value[name])
} else { // Else if it is an object, loop through it
for (var name2 in value[name]) {
formHTML = formHTML.replace('##' + name + '.' + name2 + '##', value[name][name2])
}
}
}
$('#' + id).replaceWith(formHTML);
Hope that works for you, let me know :)

You can use template engine like Mustache https://mustache.github.io/