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

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()

Including an external JSON file to work with Bootstrap

I have this code and I am looking to include an external JSON file on my foreach() loop in order to display.
The JSON looks like this:
"items":[{"title":"ONE","content":"Something-1"},
{"title":"TWO","content":"Something-2"},
{"title":"THREE","content":"Something-3"}]
I have this code:
var data = 'doc.json';
$.getJSON(data)
var success = function(data) {
data.items.forEach(function(item, index) {
$('.latestinfo').append(
'<div class="panel panel-default">' +
'<div class="card-header top" role="tab" id="heading_' + index + '">' +
'<h4 class="mb-0">' +
'<a role="button" class=" btn btn-link " data-toggle="collapse" data-parent="#accordion" href="#collapse_' + index + '" aria-expanded="true" aria-controls="collapse_' + index + '">' +
item.title +
'</a>' +
'</h4>' +
'</div>' +
'<div id="collapse_' + index + '" class="collapse " role="tabpanel" data-parent="#accordion" aria-labelledby="heading_' + index + '">' +
'<div class="panel-body">' + // improves readability with the +, concatenates strings
item.content +
'</div>' +
'</div>' +
'</div>'
);
});
}
success(data);

You should send a callback function in $.getJSON(jsonpath,callbackFn) method, so that when the JSON gets fetched you can access the JSON in the callback function's data parameter.
var data = 'doc.json';
$.getJSON(data, function(data) {
data.items.forEach(function(item, index) {
$('.latestinfo').append(
'<div class="panel panel-default">' +
'<div class="card-header top" role="tab" id="heading_' + index + '">' +
'<h4 class="mb-0">' +
'<a role="button" class=" btn btn-link " data-toggle="collapse" data-parent="#accordion" href="#collapse_' + index + '" aria-expanded="true" aria-controls="collapse_' + index + '">' +
item.title +
'</a>' +
'</h4>' +
'</div>' +
'<div id="collapse_' + index + '" class="collapse " role="tabpanel" data-parent="#accordion" aria-labelledby="heading_' + index + '">' +
'<div class="panel-body">' + // improves readability with the +, concatenates strings
item.content +
'</div>' +
'</div>' +
'</div>'
);
});
})

You have to change your JSON file like below
{
"items": [
{
"title": "ONE",
"content": "Something-1"
},
{
"title": "TWO",
"content": "Something-2"
},
{
"title": "THREE",
"content": "Something-3"
}
]
}
So now you can access items array using this method.
$.get('https://api.myjson.com/bins/v5ko2', function(result, status) {
var data = result.items;
// console.log(data);
$.each(data, function(i, item) {
console.log(item.title);
// Now follow you append code here
// $('.latestinfo').append("");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Unable to scroll after append

I am trying to fetch data from json file and then attach the data as listitem in a unordered list.
So its getting listed successfully, but I cannot scroll again through it.
Here is how my Javascript looks like:
function ListViewData(allpost) {
allposts = allpost;
$.each(allpost.posts, function (i, row) {
if (row.thumbnail_images) {
$(".list__container").append('<li class="list__item list__item--tappable list__item__line-height list-item-container">' +
'<div class="list-item-main">' +
'<div class="list-item-left">' +
'<img src="' + row.thumbnail_images['full'].url + '" class="thumbnail" width="80" height="80">' +
'</div>' +
'<div class="list-item-right">' +
'<div class="list-item-content">' +
'<span class="list-item-name">' + row.title + ' ' +
'<br/>' +
'<span class="lucent">' +
'<i class="fa fa-map-marker"></i> Paris, France' +
'</span>' +
'</span>' +
'<br/>' +
'<span class="list-item-text" style="margin-top:16px;">Eiffel Tower is the symbol of Paris and named by Gustave Eiffel.' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'<span class="list-item-action" >' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'</li>');
}
$(".list__container").listview();
});
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
}
and here is how my HTML code looks like:
<div class="list list-top">
<ul class="list__container">
//here append data comes in place
</ul>
</div>

Instead of
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
Try
$("html,body").animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);

Uncaught Syntax Error: Unexpected Token }

Yes, that's a chrome's console error that pops up on a click of a button. I think that these errors occur on the basis of the markup but then that's awkward because markup errors should directly come up when the page is loaded but this error comes up on the click of a button.
Here's the important HTML for this question:
<div class="container-fluid">
<script>
var offers = <? php echo PostOffer::GetOffers($_GET["id"]); ?> ;
for (var i = 0; i < offers.length; i++) {
var date = offers[i].Date.split(" ");
document.write('<div class="row-fluid offer">' +
'<div class="span2">' +
'<img class="profile_picture" src="' + offers[i].Picture_Path + '" />' +
'</div>' +
'<div class="span10">' +
'<div class="row-fluid">' +
'<div class="username">' +
'<p style="font-weight: bold;">' + offers[i].Name + '</p>' +
'</div>' +
'</div>' +
'<div class="row-fluid">' +
'<div class="content">' +
'<p class="content">' + offers[i].Text + '</p>' +
'<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>' +
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick="editPostOffer("<?php echo $_GET["id"]; ?>", ' + offers[i].Offer_ID + ', "aaaaaaaaa")">Save Edits</button> ' +
'<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' +
'</div>' +
'</div>' +
'<div class="row-fluid">' +
'<div class="date">' +
'<p class="pull-right"><strong><span class="muted">Offered on: </span></strong>' + date[0] + '</p>' +
'</div>');
if (offers[i].Username == "<?php echo $_SESSION["
username "]; ?>") {
document.write('<div class="controls pull-right">' +
'Edit ' +
'Delete | ' +
'</div>');
}
document.write('</div>' +
'</div>' +
'</div>' +
'<hr />');
}
</script>
</div>
JS:
$.post("admin/post_offer/edit_post_offer.php", { id: offer_id, text: edited_content }, function (data) {
if (data.status == "success") {
console.log("A");
}
}, 'json');
Can you tell me why that's happening?