I have this site - / - which, if you visit on a chrome browser and select gas oil as a fuel type then with jquery I'm changing the options in the select below. If you have home heating oil you can choose lots of options, not so with gas oil.
Anyway, when I choose gas oil and choose one of the limited options then click to go to the next page, if I then hit the back button, when I get back to the previous page I see the fuel type is still gas oil, but the options in the select for quantity isn't the correct limited options.
This only happens in Chrome, with Firefox everything works like I'd expect. Can anyone help me out?
The js/php I'm using is :
var homeOptions = {
<?php foreach($oilHome as $liter) {
echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
}?>
};
var businessOptions = {
<?php foreach($oilOil as $liter) {
echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
}?>
};
$("#fueltype").change(function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
if(fueltype == 'Home Heating Oil') {
var newOptions = homeOptions;
} else {
var newOptions = businessOptions;
}
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
});
I have this site - http://kingsberryfuels./ - which, if you visit on a chrome browser and select gas oil as a fuel type then with jquery I'm changing the options in the select below. If you have home heating oil you can choose lots of options, not so with gas oil.
Anyway, when I choose gas oil and choose one of the limited options then click to go to the next page, if I then hit the back button, when I get back to the previous page I see the fuel type is still gas oil, but the options in the select for quantity isn't the correct limited options.
This only happens in Chrome, with Firefox everything works like I'd expect. Can anyone help me out?
The js/php I'm using is :
var homeOptions = {
<?php foreach($oilHome as $liter) {
echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
}?>
};
var businessOptions = {
<?php foreach($oilOil as $liter) {
echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
}?>
};
$("#fueltype").change(function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
if(fueltype == 'Home Heating Oil') {
var newOptions = homeOptions;
} else {
var newOptions = businessOptions;
}
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
});
- I can't see the problem.. dropbox./s/vdeblok0k3yctct/video.webm?dl=0 – Mosh Feu Commented Dec 6, 2015 at 14:00
- Try to fix this problem on your site before: Failed to load resource: the server responded with a status of 404 (Not Found) --> kingsberryfuels./js/jquery.js – Vixed Commented Dec 9, 2015 at 18:17
5 Answers
Reset to default 11 +25The problem you're experiencing isn't necessarily the code, and it's actually not a "problem" with Chrome. It's actually Firefox doing more than perhaps it 'should'. What's happening is when you go "back", firefox is re-selecting your options based on what it remembers (for ease of use for the browser user). When firefox does this, it looks for "change" events, and fires them. Chrome does not. Just add a trigger to the function to force the update to occur when the page first loads.
$("#fueltype").change(function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
if(fueltype == 'Home Heating Oil') {
var newOptions = homeOptions;
} else {
var newOptions = businessOptions;
}
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
}).trigger('change');
The last item in the js object (homeOptions and businessOptions) should not end with a ma. You could use PHP to create an array with all the puted items and then json_encode() to create the javascript object.
There are a bit of problems on the website, and you bind the element #fueltype with a lot of stuff. I tryed using:
$("#fueltype").unbind().on('change',function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
if(fueltype == 'Home Heating Oil') {
var newOptions = homeOptions;
} else {
var newOptions = businessOptions;
}
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
});
It seems to work. But please fix this error on your website:
Failed to load resource: the server responded with a status of 404 (Not Found) --> kingsberryfuels./js/jquery.js
I think your "newOptions" variable is inside if statement there for this is local variable and can't access is gloabaly try to make it out side of if statement.
Try This
$("#fueltype").unbind().on('change',function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
var newOptions=[];
if(fueltype == 'Home Heating Oil') {
newOptions = homeOptions;
} else {
newOptions = businessOptions;
}
$el.empty(); // remove old options
if(newOptions.length>0)
{
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
}
});
The answer which @RefutingLogic has mentioned is the real reason behind the behavior. But the way you have mentioned the default options within the quantity dropdown box is also a problem. So if I were you I would do as shown below. Here is the link to the plnkr.
DEMO
<div class="select">
<div class="label">
<span>Choose your fuel type:</span>
</div>
<div class="field">
<select name="fueltype" id="fueltype">
<option value="Select">select</option>
<option value="Home Heating Oil">Home Heating Oil</option>
<option value="Gas Oil">Gas Oil</option>
</select>
</div>
<div style="clear: both;"></div>
</div>
<br />
<br />
<div class="select">
<div class="label">
<span>Select your quantity:</span>
</div>
<div class="field">
<select name="quantity" id="quantity">
<option value="0">select</option>
</select>
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
//if user changes from home oil to business
var homeOptions = {
"100": "100",
"150": "150",
"200": "200",
"250": "250",
"300": "300",
"350": "350",
"450": "450",
"500": "500",
"600": "600",
"675": "675",
"700": "700",
"800": "800",
"900": "900",
"1000": "1000",
"1100": "1100",
"1125": "1125",
"1200": "1200",
"1300": "1300",
"1350": "1350",
"1575": "1575",
"1800": "1800",
"2025": "2025",
"2250": "2250"
};
var businessOptions = {
"450": "450",
"900": "900",
"1350": "1350",
"1800": "1800",
"2250": "2250"
};
var selectOptions = {
"Select": "0"
};
$("#fueltype").change(function() {
var $el = $("#quantity");
var fueltype = $("#fueltype").val();
if (fueltype == 'Home Heating Oil') {
var newOptions = homeOptions;
} else if (fueltype == 'Gas Oil') {
var newOptions = businessOptions;
} else if (fueltype == 'Select') {
var newOptions = selectOptions // remove old options
}
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
});
</script>