Develop Reference

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);
}

Cannot read property 'createDocumentFragment'

I'm trying to load from my database using ajax and it work.
here is my source code:
$.ajax({
type: "GET",
url: "a/aa.php",
dataType: "json",
success: function(response){
var trHTML = '';
$.each(response, function (i, item) {
trHTML += '<tr role="row" ><td class="" >' + item.id + '</td><td class="copyte">'+ item.zuser + '</td><td class="copyte"> ' + item.user + '</td><td>' + item.zcode + '</td><td>' + item.zcountry + '</td><td>' + item.zsc + '</td><td>' + item.zip + '</td><td data-id="' + item.zid + '" class=" deltype"><i class="fa fa-trash-alt"></i></td></tr>';
});
$('#myTable').append(trHTML);
}
});
I am trying to make the content in "td" copyable by clicking on it. I made this attempt and it works fine but it is not working on the table created from the connection and it gives this error
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
the code
$('.copyte').click(function(e) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).html()).select();
document.execCommand("copy");
$temp.remove();
Command: toastr["success"]($(this).html() + " copied", "DONE");
});

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>");

How to I save checkbox value with ajax in laravel?

I'm trying to save the value of the check box in laravel. I can save all the text fields and all the code works. When I try to save the value of the checkbox the code breaks. Here is what I've tried. All the help is appreciated.
Here is my controller I've
public function addTodo(Request $request)
{
$status = Todo::has('status') ? true: false;
$todo = new Todo;
$todo->item = $request->item;
$todo->description = $request->description;
$todo->status = $request->status;
$todo->save();
return response()->json($todo);
}
Here is my HTML
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" name="status" id="status" value="1"
placeholder="Your description Here" required>
</div>
</div>
</div>
Here is my script
$(document).on('click','.create-modal', function() {
$('#create').modal('show');
$('.form-horizontal').show();
$('.modal-title').text('Add Item');
});
$("#add").click(function() {
$.ajax({
type: 'POST',
url: '/addTodo',
data: {
'_token': $('input[name=_token]').val(),
'item': $('input[name=item]').val(),
'status':$('input[name="status[]:checked'].val()
},
success: function(data){
if ((data.errors)) {
$('.error').removeClass('hidden');
$('.error').text(data.errors.item);
} else {
$('.error').remove();
$('#table').append("<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.item + "</td>"+
"<td>" + data.status + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id +
"' data-item='" + data.item + "' data-status='" + data.status + "'> +
<span class='fa fa-eye'></span></button> +
<button class='edit-modal btn btn-warning btn-sm' data-id='" +
data.id + "' data-item='" + data.item + "' data-status='" +
data.status + "'><span class='glyphicon glyphicon-pencil'></span></button> +
<button class='delete-modal btn btn-danger btn-sm' data-id='" +
data.id + "' data-item='" + data.item + "' data-status='" + data.status +
"'><span class='glyphicon glyphicon-trash'></span></button> +
</td>"+ "</tr>");
}
},
});
$('#item').val('');
$('#status').val('');
location.reload();
});

try this
$('input[name="status"]:checked').val()

how to trigger dropdown change event manually ? when I am selecting data from Modal?

I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});

$( "#ddlACof" ).trigger( "change" );