This is the first time I’ve ever tried a JSFiddle in Safari. Is there some goofy reason that JSFiddle wouldn’t work right in Safari 4? Someone did report that Safari 5 works fine. So what am I missing here?
JavaScript:
$(document).ready(function(){
$("#productSize").change(function(){
var me = $(this);
var avail = me.find("option:selected").html().split("-")[1].trim();
$("#quantity option").each(function() {
$(this).remove();
});
for(var i=1; i<= avail; i++) {
$("#quantity").append("<option>"+i+"</option>");
}
});
});
HTML:
<label>Sizes
<select name="item_options[product_size]" id="productSize">
<option value="s">small - 10</option>
<option value="m">medium - 1</option>
<option value="l">large - 5</option>
<option value="xl">extra large - 10</option>
</select>
</label>
<label>Quantity
<select name="quantity" id="quantity">
</select>
</label>
JSFiddle demonstrating problem: jsfiddle
UPDATE:
I’m trying this in all other browsers, finding different behavior in all of them. This does exactly what it’s supposed to in Firefox. No problems. IE doesn’t seem to like how I’m calling trim() so I’ve changed the JSFiddle to accommodate that.
$(document).ready(function(){
$("#productSize").change(function(){
var me = $(this);
var myText = me.find("option:selected").text().split("-")[1];
var avail = parseInt($.trim(myText), 10);
$("#quantity option").remove();
for(var i=1; i<= avail; i++) {
$("#quantity").append("<option value='"+i+"'>"+i+"</option>");
}
});
});
Updated JSFiddle This has been tested and works in IE, FF, Chrome, but still I get nothing, the $(document).ready & the .change() don’t even execute in Safari 4.
UPDATE #2
Just to clarify even further, this Jquery code does not run in JSFiddle/safari 4.0.5. I don’t even get the alert so the .change() isn’t running…
$(document).ready(function(){
$("#productSize").change(function(){
alert("Hello World");
});
});
It appears to me that there is a limitation with JSFiddle and Safari 4.0.5. I can’t get even the simplest selectors to work and kick off a very simple binding.
This works in every browser I’ve tried (FF multiple versions, IE 7 & 8, Chrome 12.0.x, & Safari 5.1). If anyone can explain why I’d love to hear it otherwise I’m just going to assume this is a bug in either Safari 4 or JSFiddle. Either way I’m moving onto more current browsers.