We Keep Coding

Unable to access value i inside function onSelect of autoComplete. [Dynamically generate jquery]

Cannot get the value of i inside onSelect. Im calling the below jQuery function in a loop. I need the value of i to populate data in onSelect.
Is there a better way to generate jquery? Please help me on this.
for (i = count; i > 1; i--) {
jQuery(function ($) {
$(`input[name="company${i}"]`).autoComplete({
minChars: 1,
source: function (term, response) {
$.getJSON('https://autocomplete.clearbit.com/v1/companies/suggest', {
query: term
}, function (data) {
response(data);
});
},
renderItem: function (item, search) {
default_logo = 'https://s3.amazonaws.com/clearbit-blog/images/company_autocomplete_api/unknown.gif'
if (item.logo == null) {
logo = default_logo
} else {
logo = item.logo + '?size=25'
}
container = '<div class="autocomplete-suggestion" data-name="' + item.name + '" data-val="' + search + '">'
container += '<span class="icon"><img align="center" src="' + logo + '" onerror="this.src=\'' + default_logo + '\'"></span> '
container += item.name + '<span class="domain">' + item.domain + '</span></div>';
return container
},
onSelect: function (e, term, item) {
$(`input[name="company${i}"]`).val(item.data('name'))
},
});
});
}

You have several problems in this code:
jQuery(function ($) { will execute when all resources have been loaded, by that time the for loop has ended (because it's outside the ready function) and i will have its last value so it won't bind to all your elements. This function is acting as a closure, this is why you can't get the expected value in onSelect. Also, the loop will never get to 1, since the condition is i > 1 and it should be i > 0.
You can move the for inside the ready function and scope the element of the current iteration, but I'm choosing a jQuery approach here using .each.
jQuery(function($) {
$(`input[name^="company"]`).each(function() {
// This is what makes this work.
// If you use the 'for' you can set it to `input[name="company${i}"]`
let $input = $(this);
$input.autoComplete({
minChars: 1,
source: function(term, response) {
response([{
"name": "Amazon",
"domain": "amazon.com",
"logo": "https://logo.clearbit.com/amazon.com"
}, {
"name": "Amanda",
"domain": "iambaker.net",
"logo": "https://logo.clearbit.com/iambaker.net"
}]);
},
renderItem: function(item, search) {
default_logo = 'https://s3.amazonaws.com/clearbit-blog/images/company_autocomplete_api/unknown.gif'
if (item.logo == null) {
logo = default_logo
} else {
logo = item.logo + '?size=25'
}
container = '<div class="autocomplete-suggestion" data-name="' + item.name + '" data-val="' + search + '">'
container += '<span class="icon"><img align="center" src="' + logo + '" onerror="this.src=\'' + default_logo + '\'"></span> '
container += item.name + '<span class="domain">' + item.domain + '</span></div>';
return container
},
onSelect: function(e, term, item) {
// Reference the current input element
$input.val(item.data('name'))
},
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css" />
<input name="company1" />
<input name="company2" />

You should use let keyword with 'i' because as you are not using any keyword 'i' would remain in the global scope and when this onSelect event would fire, it would pick the latest value of 'i' at the moment of event fire which in your case would be 1. So your code should be
for (let i = count; i > 1; i--){ // rest of the code reamins same }
Please read about
let, var and const
hosting

Array list display online one result from json

I wrote this code and it works:
function getJsonResult(retrieve) {
var result = retrieve.results;
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
document.write(search);
}
}
When I tried to display the results in a div, I change the last line with:
$("#divId").html(search);
But it only displays the first result. How can I make the whole list appear?

That happened because you're overriding the search variable in every iteration :
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
You need to declare the search variable outside of the loop then append the string in every iteration like :
function getJsonResult(retrieve) {
var result = retrieve.results;
var search = "";
___________^^^^
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search += '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
___________^^
document.write(search);
}
}
Then finally you could put your variable content to the div :
$("#divId").html(search);

$('#divId').append(search);
This appends the element included in search to the div element.

Javascript or Jquery to get div by key of div and change value of it

I have a list of tables.
var tables = "";
for (var i = 0; i <= data.length - 1; i++) {
if (data[i].current_order == null) {
tables += '<button class="table_btn" value="' + data[i].id + '">' + data[i].table_number + '</div>';
} else {
tables += '<button class="table_selected" key="' + data[i].current_order + '"value="' + data[i].id + '">' + data[i].table_number + '</div>';
}
And tables have two color, when it is busy or not busy. If there is current_order in table, it shows busy. What I want to do is that when a user clicks empty table, it gets table_id, changes class from table_btn to table_selected and add keyof div, which is current_order.
I use phoenix-framework for my backend, so when a user clicks an empty table, it creates order and passes value of clicked table_id and created order_id. But I am not sure that how can I get a table by value of table div and put key into div...
Can anyone give me advice for this??

So as you tagged Jquery, i'm gonna post this. Change key for ID and you can do the following. I would then wrap the add table and remove table in functions where u pass in the data[i].current_order into and use that.
Edited based on user feeback, not tested
/*If you are not comfortable using the variable 'This',
you can just pass in the id of target table and
change the syntax to $("#"+targetTable)*/
var tables = "";
for (var i = 0; i <= data.length - 1; i++) {
if (data[i].current_order == null) {
tables += '<button class="table_btn" value="' + data[i].id + '">' + data[i].table_number + '</div>';
} else {
tables += '<button class="table_selected" id="' + data[i].current_order + '"value="' + data[i].id + '">' + data[i].table_number + '</div>';
}
// On Click set table to busy
$(".table_btn").click(function(){
addTable($(this).val(), $(this));
});
// Add table function
function addTable(tableId, targetTable){
$.ajax({
url: "YourBackEndHere",
data: tableID
cache: false,
success: function(html){
$(targetTable).removeClass("table_btn");
$(targetTable).addClass("table_selected");
$(targetTable).attr("id", data[i].current_order);
}
});
}
// On click set table to empty
$(".table_selected").click(function(){
removeTable($(this).val(), $(this));
});
// Remove table function
function removeTable(tableId, targetTable){
$.ajax({
data: tableId
url: "YourBackEndHere",
cache: false,
success: function(html){
$(targetTable).removeClass("table_selected");
$(targetTable).addClass("table_btn");
$(targetTable).attr("id", "");
});
}
});
}

JQuery Ajax button isn't working

I am extremely new at writing ajax and working with a restful api... so, bear with me.
I have a Laravel 5.2 RESTful API that I am using on the backend, and I'm attempting to simply load a list of categories using Jquery / Ajax. As you click through the categories, each child category loads fine, but I cannot seem to get the "back" button to work (by this, I mean the LI I am generating, not the browser back button). When you click it, it shows the alert - and the data is correct, but that's it. The list doesn't refresh and populate with the appropriate items.
EDIT
There are no errors being thrown to the javascript console either. It just won't populate from the ajax call.
EDIT
I removed the request.abort() right after I made the original post.
EDIT
Here is the JSON returned from the URL api/categories/4 - as an example.
[{"id":6,"parent":4,"name":"sub_subcat4_1","slug":"sub_subcat4_1","description":null,"created_at":null,"updated_at":null},{"id":7,"parent":4,"name":"sub_subcat4_2","slug":"sub_subcat4_2","description":null,"created_at":null,"updated_at":null}]
EDIT
Here is the HTML for the #categories
<div class="row">
<div class="col-sm-12">
<ul id="categories">
</ul>
</div>
The Javascript
<script>
/*
* This loads the default / root categories.
*/
function getRootCategories() {
$.getJSON("api/categories", function(data) {
var categories = [];
$("#categories").html("");
$.each(data, function(key, val) {
$("#categories").append("<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
});
});
}
/*
* This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
*/
function getSubcats(cat) {
var dataID = cat.getAttribute("data-id");
alert(dataID);
if(dataID == "null") {
getRootCategories();
}
else {
$.getJSON("api/categories/" + dataID, function (data) {
if (data.length != 0) {
$("#categories").html("");
var newCats = '';
var parent = '';
$.each(data, function (key, val) {
parent = "<li class='subcat' data-id='" + val.parent + "' onClick='getSubcats(this);'>Back</li>";
newCats += "<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
});
$("#categories").append(parent + newCats);
}
});
}
}
$(document).ready(function() {
$.ajaxSetup({ cache:false });
getRootCategories();
});
</script>

Ok, I just had my variables all mixed up. I wasn't setting the correct parent id.
The new script looks like this -
<script>
var previous = null;
/*
* This loads the default / root categories.
*/
function getRootCategories() {
$.getJSON("api/categories", function(data) {
var categories = [];
$("#categories").html("");
$.each(data, function(key, val) {
$("#categories").append("<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
previous = val.parent;
});
});
}
/*
* This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
*/
function getSubcats(cat) {
var dataID = cat.getAttribute("data-id");
previous = cat.getAttribute("data-parent");
if(dataID == "null") {
getRootCategories();
}
else {
$.getJSON("api/categories/" + dataID, function (data) {
if (data.length != 0) {
$("#categories").html("");
var newCats = '';
var parent = '';
$.each(data, function (key, val) {
parent = "<li class='subcat' data-id='" + previous + "' onClick='getSubcats(this);'>Back</li>";
newCats += "<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
});
$("#categories").append(parent + newCats);
}
})
.fail(function(jqxhr, textStatus, error) {
console.log("Request Failed: " + textStatus + " - " + error);
});
}
}
$(document).ready(function() {
$.ajaxSetup({ cache:false });
getRootCategories();
});
</script>

Change data property using checkbox from false to true using jQuery

I have created list of items in a table. I want to calculate the price of checked items, but can't figure out how to update the data property when a checkbox is checked/unchecked. I have included the code for generating the list and updating the price calculation.
$.each(shopList, function (i, elem) {
var item = elem.item;
var link = elem.link;
var user = elem.user;
var price = elem.price;
var priority = elem.priority;
$(".listItems").append(
'<tr class="items" data-priority="' + priority + '">' +
'<td><input type="checkbox" class="priority"' + ((priority) ? 'checked' : '') + ' /></td>' +
'<td>' + '' + item + '' + '</td>' +
'<td>' + user + '</td>' +
'<td class="price">' + price + '</td>' +
'<td><button class="btn btn-default deleteItem">Del </button></td>' +
'</tr>'
);
});
And the code to update the price:
function updatePriority(){
sumPriority = 0;
$('tr.items[data-priority=true] .price').each(function () {
var total = $(this).text();
if (!isNaN(total) || total.length != 0) {
sumPriority += parseFloat(total);
};
});
$('.totalPriority').html(sumPriority.toFixed(2));
};
When the page renders it has checked and unchecked items and everything works that way at first, but not when a change is made.
How can I update the data-property true/false in the DOM?

Do not use data-property but just use the Checkbox :checked status
Instead of looping over the [data-priority=true] checkboxes you can loop over the checked checkboxes instead, and use parent().find('.price') to find the correct price labels.
function updatePriority(){
sumPriority = 0;
$('.priority:checked').each(function () {
var priceElement = $(this).parent().parent().find('.price');
var total = priceElement.text();
if (!isNaN(total) || total.length != 0) {
sumPriority += parseFloat(total);
};
});
$('.totalPriority').html(sumPriority.toFixed(2));
};
How can I update the data-property true/false in the DOM?
If you really want to keep your code as it is and only update the data-priority attribute when you change a checkbox you can implement change listeners on the checkboxes and change the parents attribute:
$('tr.items .price').change(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().attr("data-priority",true);
}else{
$(this).parent().parent().attr("data-priority",false);
}
});

You can try this :
function updatePriority(){
sumPriority = 0;
$('.listItems tr td .priority').each(function () {
if ($(this).is(":checked"))
{
var price=$(this).parent().find('.price').text();
var total = price;
if (!isNaN(total) || total.length != 0) {
sumPriority += parseFloat(total);
};
}
});
$('.totalPriority').html(sumPriority.toFixed(2));
};