Adding Material-UI Select with generated number range - javascript

I am trying to create a select with material-ui that give a range of number from 0 - 20,000,000 in 25,000 increments. I was able to achieve this with a for loop
for (let price = 0; price <= 20000000; price = price + 25000) {
priceOptions.push({ id: price, title: `$${price.toLocaleString()}` });
}
I feel like this is not the best way to go about it as it takes a 2-3 seconds when you click on the dropdown for to display the options.
If anyone has an idea of how to speed this up it would be greatly appreciated.

As NearHuscarl mentioned in the comments:
You can integrate Select component with some virtualized library
like react-virtualized. Personally, I'd use the Autocomplete
component and tell the user to filter it out.

Related

How to make a dynamic form from db w/o framework?

I'm on a project using php for the back-end part, and without any framework.
I have a database, my main table, the car table, is linked to other tables (color, weight, max speed, price).
I have a form that allows me to give back to my user his "perfect" car according to all these criteria.
I would like that, when the user selects his car color, let's say blue, in the weight field below, with the options ["car < 2t"; "2t < car < 2.5t"; "car > 2.5t"], if none of the blue cars in my database weighs more than 2.5t, this choice is not displayed.
I'm not sure how to do this without a framework... Does anyone have any clues to give me?
You can do this via SQL directly:
SELECT
weight.id,
weight.value
FROM
weight
JOIN color
ON color.car_id = weight.car_id
AND color.name = "blue" # <-- Join only blue cars
WHERE
weight.value > 2500 # <-- only show above 2500
Working example.
This should help you to get to your desired solution. If you need further help please create a fiddle containing your db-structure and some example content.

How I can make a checkbox filter?

I need to find a solution for my script, because I gives me duplicated results.
There is something that I made:
https://jsfiddle.net/4m3twsjd/1/
function myFunction() {
if(a % 2 == 0){
document.getElementById('h1').innerHTML += M
}
else {
document.getElementById('h1').innerHTML = document.getElementById('h1').innerHTML.replace(M, '')
}
a++
}
How to make it to not show the same element when clicked two or three checkboxes ?
Thanks you in advance all for this. I need some simply code, because I'm not a coder.
I need to have something that there are 4 brand and 5 power ranges. And If I click on checkbox with 1 brand it shows me all devices that belong to this brand. Also If I checked 1 power range it shows me all devices with that power range. And I works like this right now.
The problem is that if I checked 1 brand and 1 power range it shows me all deviced that belong to this brand and all devices with that power - so the devices are sometimes duplicated. How to fix it?
Also how can I make it posible to show each device with name, photo, description and link (when some checkbox checked)?

jquery manipulation post page load

I'm currently using a script on an ecommerce website that shows or hide a free shipping stamp based on a number(price). Initially the stamp shows for all products and i hide it where necessary. My problem is, the script reads from the 'regular price' and will display the stamp accordingly, but i have products with promotions that hides the regular price and displays the promo price then bringing the actual price of the product under the appropriate limit and i can't figure out a way to hide the free shipping stamp on those particular items.
I'm using the following to remove the tag if the price goes under 99, but with my hackish promotion price display, i cant figure out how to read that post load promo price display to apply the function as needed. I've tried replicating this script and applying it to the promo price div to no avail. Any suggestions as to how i can read a divs numerical contents post load and hide the stamp? I'm beginner to intermediate when it comes to jquery so help in layman's terms would be helpful.
$('#results-table .redprice, #pp-wrap #big-price span').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 50){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over50');}
if(number > 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over99');}
if(number < 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('under99').removeClass('freeshipping');}
});
Thank you.
A good idea would be to use html attribute for the real price.
something like
<span realP=12>16</span>
and then getting the number would be easier:
var number = $(this).attr("realP");
goog luck

Using Jquery to manipulate checkbox of a form

i am trying to do a form which is so strange to me.
The basic concept is I have a column of product checkboxes in my form, and if you choose that product, then you need to check the relative product checkbox.
In the form, I have another two columns are the prices and sizes of the products. i want to calculate the amount of prices and sizes depends on which products are being ticked. What i only achieve so far is get the value of the product which are being checked, but not the prices and sizes' values. Also, how to do the calculation dynamically.
Here is the html, http://jsfiddle.net/DDEzm/2/
Hope some one can help, many thanks.
try this, this solution is based on your markup:
$(function(){
$('#cb1').live('change',function(){
if ($(this).is(':checked')) {
var val = 0;
val = parseInt($('#tb1').val(), 10) + parseInt($('#tb2').val(), 10)
$('#presult').val(val)
} else {
$('#presult').val('0')
}
});
});
DEMO
All you need to do to get the value is the following:
$(function(){
$("[name='chkProduct']").live('change',function(){
var totalCost = 0;
$("[name='chkProduct']").each(function(i){
if($(this).attr("checked")) {
var price = $(this).parent().next().find("[name='price']").val();
var size= $(this).parent().next().next().find("[name='size']").val();
totalCost = totalCost + (price * size);
$("#presult").val(totalCost);
}
});
});
});​
But you might want to add checks to make sure that it is numbers that you are trying to add, either by limiting the input, or checking when you click the checkbox. You could use javascripts parseInt, for instance.
Also, you could have a name, or class to identify the checkboxes. That way you don't have to write a change function for each checkbox.
Edit
I modified it so that it would work with all checkboxes and caluculate the total.

conditional change of quantity text box using jquery?

I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.
The crucial part for kit products is:
if (parseInt($("#kitProduct #Quantity").val()) < 25) {
$("#kitProduct #Quantity").attr("value", "25");
It knows its a kit product because i have a div.id wrapped around the page called Kit Product.
My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:
<div class="ProductNameText">Exclusive Handmade Box</div>
If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.
I have tried the following code:
quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
if(quantity)
{
$("#kitProduct #Quantity").attr("value", quantity);
$("#kitProduct #Quantity").keypress(function(){
var quantity = parseInt($.trim($(this).val()));
if( quantity < 1) {
$(this).val('1');
} else {
$(this).val(quantity);
}
But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.
Really hope you can help?
More infomation:
For the most part Kit products are defined in an xml package which is applyed to a kit product in the admin section. However i have a few products which are still products but dont require 25 to be put into the quantity.
At the moment the jquery checks for a text area box because if the user adds a personalisation into that it means they are wanting a kit product therefore min quantity is 25.
But i have a product i want to check based on its div contents that i want to have as 1 or more...
so i should be able to enter 1-25 into the box without my current code saying oppps you entered less than 24 so im going to change it back to the min kit product quantity..
if you try the jsfiddle you can see that it wont let you put in a value of say 3? thats the problem.
http://jsfiddle.net/FB5MQ/3/
You should just have a variable minimum in the "crucial part for kit products" code:
var minValue = 25;
if ($('div.ProductNameText').text().match(/Exclusive Handmade Box/)) {
minValue = 1;
}
if (parseInt($("#kitProduct #Quantity").val(), 10) < minValue) {
$("#kitProduct #Quantity").prop("value", minValue);
// rest of code...

Categories