javascript dependant drop down not working in IE 8 - javascript

I have searched through here to find a javascript drop down that changes based on another drop down and the code I have works in Chrome. However, it doesn't work in IE 8.0.6 and I was wondering if anyone could highlight the part that isn't working, or suggest another workaround (JQuery, CSS etc).
When I load this in IE, the second drop down is completely blank. The first drop down has a variation of the arrays, when a user selects one of those, they are then presented with the options in the array. So if I select iAffordability, i will be presented with the three values in the array.
Here is the code I am using
iAffordability = new Array("Unable to Get Mortgage", "Cant Afford to Move", "Price");
iDisintruction = new Array("Branch Disinstructed");
iCourtOrder = new Array("Court Order");
iLackofComms = new Array("Marketing", "Viewings", "Offers");
iLackofOffers = new Array("Not Happy with Amount", "Not Happy with Quality");
populateSelect();
$(function () {
$('#WD').click(function () {
populateSelect();
});
});
function populateSelect() {
WD = $('#WD').val();
$('#Sub').html();
if (WD == 'iAffordability') {
$('#Sub').empty();
iAffordability.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iDisintruction') {
$('#Sub').empty();
iDisintruction.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iLackofComms') {
$('#Sub').empty();
iLackofComms.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iLackofOffers') {
$('#Sub').empty();
iLackofOffers.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
}
JS Fiddle
UPDATE:
The code worked, I just had to add in:
if (!window.console) console = {log: function() {}};
to my existing JS.

I'm going to suggest a refactoring and DRYing of your code:
var lists = {
iAffordability: ["Unable to Get Mortgage", "Cant Afford to Move", "Price"],
iDisintruction: ["Branch Disinstructed"],
iCourtOrder: ["Court Order"],
iLackofComms: ["Marketing", "Viewings", "Offers"],
iLackofOffers: ["Not Happy with Amount", "Not Happy with Quality"]
};
$(function () {
populateSelect();
$('#WD').change(function () {
populateSelect();
});
});
function populateSelect() {
var WD = $('#WD').val(), $sub = $('#Sub');
$sub.empty();
$.each(lists[WD] || ["Error"], function(_, t) {
$sub.append('<option>' + t + '</option>');
});
}
This should work even in older versions of IE because it uses the jQuery $.each function instead of Array.prototype.forEach - as RobG pointed out, this function was only added in IE9 (ah, if only IE forced itself to update like Chrome does...) and it should be much easier to expand in future.

Related

jQuery and JavaScript error in Sharepoint 2010

i have downloaded a very nice script for realtime filter for sharepoint list:
https://instantlistfilter.codeplex.com/
i'm adding the code below. and i have two issues with it.
1. it is calling Google service, and i wonder if i can avoid that, since i'm not sure my company will be happy to know this list is going to Google each time someone is filtering it.
2. i'm getting error "Object doesn't support this property or method" for line 106 of the code, which causing the ribbon of the site including the "site action" dropdown button to disappear. I know it is related to the "show" command, but i have no clue how can i fix it.
As said above, i'm using sharepoint 2010. To install this code, i created a text document with it in my documents folder, then created below my list a CEW which is linked to that document. this method worked for me in another page with no issues.
Here is the full code as downloaded from the site above:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
$(document).ready(function()
{
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}
});
$("table.ms-listviewtable tr.ms-viewheadertr").each(function()
{
if($("td.ms-vh-group", this).size() > 0)
{
return;
}
var tdset = "";
var colIndex = 0;
$(this).children("th,td").each(function()
{
if($(this).hasClass("ms-vh-icon"))
{
// attachment
tdset += "<td></td>";
}
else
{
// filterable
tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";
}
colIndex++;
});
var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
$(tr).insertAfter(this);
});
$("input.vossers-filterfield")
.css("border", "1px solid #7f9db9")
.css("width", "100%")
.css("margin", "2px")
.css("padding", "2px")
.keyup(function()
{
var inputClosure = this;
if(window.VossersFilterTimeoutHandle)
{
clearTimeout(window.VossersFilterTimeoutHandle);
}
window.VossersFilterTimeoutHandle = setTimeout(function()
{
var filterValues = new Array();
$("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
{
if($(this).val() != "")
{
filterValues[$(this).attr("filtercolindex")] = $(this).val();
}
});
$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
{
var mismatch = false;
$(this).children("td").each(function(colIndex)
{
if(mismatch) return;
if(filterValues[colIndex])
{
var val = filterValues[colIndex];
// replace double quote character with 2 instances of itself
val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));
if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
{
mismatch = true;
}
}
});
if(mismatch)
{
$(this).hide();
}
else
{
$(this).show();
}
});
}, 250);
});
});
});
</script>
From what I can see, you're only using the Google code to download jQuery and setup callback when the script gets loaded. To avoid downloading from Google, can't you just load a local copy jQuery?
Download a minimized version of jQuery and upload it to your SharePoint site (Site Assets library or elsewhere).
Then in your code above replace this line
<script src="http://www.google.com/jsapi"></script>
with
<script src="/SiteAssets/{your jquery file name}"></script>
then you can just replace
google.setOnLoadCallback(function() {
$(document).ready(function() {
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0
}
});
});
with
$(function(){
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0
}
});

Jquery: Uncaught RangeError: Maximum call stack size exceeded

Here is my javascript. It was working well prior to conducting a Git Pull from my partner. On a click the hint loads with fancy box. The load does not work now.
Game = {
loadLevel: function(levelNum) {
$("#level").load("/level/" + levelNum + "/", function() {
// disable all hints except the first
$("#level .hint:not(:first)").prop('disabled', true);
// clicking a hint displays the hint
$("#level .hint").each(function(index, el) {
$(el).fancybox({
href : $(el).attr("data-url"),
type : 'ajax',
});
});
// enable next hint when clicking on a hint
$("#level .hint").on("click", function() {
$(this).next().prop('disabled', false);
});
// if answer is correct load next level
$("#answer").on("click", function() {
$.get("/answer/" + levelNum + "/", {
guess : $('.guess').val()
}, function(answer) {
console.log(answer);
if (answer) {
Game.loadLevel(levelNum+1);
}
});
});
});
},
}
From the error message, it sounds like your partner's code either has an infinatly looping recursive call somewhere or is calling too many functions deep.
Try this:
loadLevel: function(levelNum) {
if (levelNum > 5) return;
$("#level").load("/level/" + levelNum + "/", function() {
I think the problem might be here -- but it could be in code you don't show:
Game.loadLevel(levelNum+1);
This will recurse but there is no way to stop it.

Soundcloud current track Info

Concerning the following site
Pretty simple, but none the less I seem to be falling at the first hurdle on this.
Using the following code currently to try and obtain a track name and artist from the currently active soundcloud player (of which there are 4 ,with the class SCiframe)
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget(iframeElement);
widgets.bind(SC.Widget.Events.READY, function () {
widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
for one, the console is registering 'iframeElement is not defined' as an inital error.
But all in all, I cant seem to get any useful data out of this to process.
Where am i going wrong here?
Kindest regards to the community.
You have the variable names incorrect, they have "$" at the begining,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
EDIT:
getElementsByClassName returns an array of results. So if there is only one iframe with "SCiframe" classname, you should pass first index of $iframeElement as paramater in SC.Widget, try this,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement[0]);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});

adding options to select on focus IE9

I'm trying to lazy load options into a select with jquery. This code works in all browsers I've tested except IE9. (IE7, IE8, FF, Chrome all work)
function LazyLoadOptionsIntoSelect($select, options) {
//get current option
var selectedOptionVal = $select.val();
var selectedOptionDisplay = $select.find("option:selected").text();
//repopulate options
if (selectedOptionDisplay === "--Select a File--"
|| selectedOptionDisplay === "----------") {
$select.html("");
$("<option>").val("").text("--Select a File--")
.appendTo($select);
}
else {
$select.html($("option:selected", $select));
$("<option>").val("").text("----------")
.appendTo($select);
}
$.each(options, function () {
var item = this;
$("<option>").attr("name", function () { return item.display; })
.val(item.value)
.text(item.display)
.appendTo($select);
});
//select previous val
$select.val(selectedOptionVal);
}
$(document).on("focus", ".html-select", function () {
LazyLoadOptionsIntoSelect($(this), HtmlOptions);
});
$(document).on("focus", ".txt-select", function () {
LazyLoadOptionsIntoSelect($(this), TxtOptions);
});
$(document).on("focus", ".xml-select", function () {
LazyLoadOptionsIntoSelect($(this), XmlOptions);
});
I've been trying to solve this for hours but nothing is working.. any solutions or do I need to write a different way to load options in IE9?
options is an array of objects containing value, and display.
This works in simpler use cases, but this apparently is too much for Microsoft to handle. <_<
After hours of fiddling, I tried changing the css to see if redrawing the element worked. It did.
$(document).on("focus", ".html-select", function () {
LazyLoadOptionsIntoSelect($(this), HtmlOptions);
if ( $("body").hasClass("ie9") )
{
$(this).width($(this).width());
}
});

Javascript code error at Internet Explorer

My web + Jquery plugins is working well on Firefox, Chrome, Safari (win & Osx) & Android also. But it sucks with Windows + Internet Explorer because it does not load some js. I am going crazy because it works in all scenarios but IE.
IE shows me 3 errors warnings. My question is. Must IE compile perfect all these 3 errors before showing well the page? For example I have a real time search using jquery, but it does not work on IE due it shows me an error with that code.
Please could you help me validate this "valid" code? Thank you all in advance
$(function() {
// find all the input elements with title attributes
$('input[title!=""]').hint();
}
);
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur'; }
return this.each(function () {
// get jQuery version of 'this'
var $input = $(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = $(this.form),
$win = $(window); function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass); }
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass); }
}
).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove); $win.unload(remove); // handles Firefox's autocomplete
}
}
); }; }
)(jQuery);
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);
Next code in your example maybe have some errors:
original code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);
changed code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value, data) {
// in next line added plus signs before and after *navegante*
window.open('ITEM.PRO?&token=#AVP'+navegante+'&S='+value.substring(value.length-4));
}; // semicolon added
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
// in next line removed comma. I think: it generate error in IE
onSelect : onAutocompleteSelect //,
};
a = $('#query').autocomplete(options);
});
I tried several j queries in my website .. Most common problem i faced was this and there was nothing wrong with j query but i had to download the latest >jquery.js file and rename it also with the jquery.js ..

Categories

Resources