We Keep Coding

Conditional drop down is not working in IE

I created a filtering drop downs on hover, where by selecting the country name on hover from the first drop down the respective destinations will appear in the second drop down on hover. But It is not working in internet explorer & also in edge why?
function changeddl(obj) {
var text = obj.options[obj.selectedIndex].text;
var ddl2 = document.querySelectorAll('#iOperation option');
for (var i = 1; i < ddl2.length; i++) {
var option = ddl2[i];
option.style.display = 'none';
if (text == 'Pick a Country') {
if (['Pick a Destination'].indexOf(option.text) > -1)
option.style.display = 'none'
}
if (text == 'India') {
if (['Bangalore', 'Delhi', 'Pune','Gujarat','Rajastan','Goa','Haryana','Kerela','Hampi'].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Sri Lanka') {
if (['colombio','fetero','Kandy','Galle','Nuwara','Negombo'].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Swedan') {
if (['Swedan'].indexOf(option.text) > -1)
option.style.display = 'block'
}
}
}
function DropList() {
var n = document.getElementById("iFunction").options.length;
document.getElementById("iFunction").size = n;
}
function handleSelect(elm){
window.location = elm.value;
}
var countryArrays = [ ['Bangalore', 'Delhi','Pune','Gujarat','Rajastan','Goa','Haryana','Kerela','Hampi'],
['colombio','fetero','Kandy','Galle','Nuwara','Negombo'],['Swedan'] ];
function DropNew() {
var index = document.getElementById("iFunction").selectedIndex - 1;
if (index >= 0){
document.getElementById("iOperation").size = countryArrays[index].length + 1;
} else {
jQuery("#popup").show();
}
}
function hidePopup() {
jQuery("#popup").hide();
}
function handleSelect(elm){
window.location = elm.value;
}

Replace text in an <li> tag in an ul

I'm new to web programming, and I'm trying to complete a simple guessing game project.
Right now I'm stuck because I'm trying to update an unordered list with the player's past guesses, but the page does not update.
Here is my jQuery code:
$(document).ready(function() {
game = new Game;
var guessNum
onSubmit = function(event){
event.preventDefault();
var input = $('#player-input');
var guess = +input.val();
input.val('');
var result = game.playersGuessSubmission(guess);
if (result == 'You have already guessed that number.') {
$('#title').text(result);
} else if (result === 'You Win!' || result === 'You lose.') {
$('#title').text(result);
$('#subtitle').text('Press the reset button to play again.')
$('#hint').prop('disabled', true)
$('#submit').prop('disabled', true)
} else { //this is the relevant portion
guessNum = (game.pastGuesses.length - 1).toString();
$('#' + guessNum).text(guessNum);
}
};
$('#submit').on('click', function(e){
onSubmit(e);
});
$('#player-input').on('keypress', function(e) {
if(e.which == 13) {
e.preventDefault();
onSubmit(e);
};
});
});
Here is the unordered list's html:
<div id='guesses'>
<!-- unordered list of guesses -->
<ul id='past-guesses' class="list-inline center">
<li id='0' class="guess list-group-item ">-</li>
<li id='1'class="guess list-group-item">-</li>
<li id='2' class="guess list-group-item">-</li>
<li id='3' class="guess list-group-item">-</li>
<li id='4' class="guess list-group-item">-</li>
</ul>
</div>
I have also tried not using the identifiers in the html, and instead selecting the li elements this way:
var idStr = "#past-guesses:eq(" + guessNum + ")"
$(idStr).text(game.playersGuess.toString());
In either case, the page does not update with the new values in the unordered list displayed. What am I doing wrong?
EDIT
In response to the request in comments, here's my entire JS file (now slightly edited because I was experimenting with changing the list id's to not begin with a number):
function generateWinningNumber() {
num = Math.random()
if (num === 0) {
return 1;
} else {
roundNum = Math.floor(num*100);
return roundNum + 1;
}
}
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
function Game(){
this.winningNumber = generateWinningNumber();
this.playersGuess = null;
this.pastGuesses = [];
}
Game.prototype.difference = function() {
return Math.abs(this.playersGuess - this.winningNumber);
}
Game.prototype.isLower = function() {
if (this.playersGuess < this.winningNumber) {
return true;
} else {
return false;
}
}
Game.prototype.checkGuess = function() {
if (this.playersGuess === this.winningNumber) {
return "You Win!";
}
if (this.pastGuesses.indexOf(this.playersGuess) > -1) {
return "You have already guessed that number.";
}
this.pastGuesses.push(this.playersGuess);
if (this.pastGuesses.length >= 5) {
return "You Lose.";
} else if (this.difference() < 10) {
return "You're burning up!";
} else if (this.difference() < 25) {
return "You're lukewarm.";
} else if (this.difference() < 50) {
return "You're a bit chilly.";
} else {
return "You're ice cold!";
}
}
Game.prototype.playersGuessSubmission = function(num) {
if (num < 1 || num > 100 || typeof num != 'number') {
throw "That is an invalid guess."
} else {
this.playersGuess = num;
return this.checkGuess();
}
}
Game.prototype.provideHint = function() {
return shuffle([generateWinningNumber(), generateWinningNumber(), this.winningNumber]);
}
newGame = function() {
game = new Game;
return game;
}
$(document).ready(function() {
var game = new Game;
var guessNum
onSubmit = function(event){
event.preventDefault();
var input = $('#player-input');
var guess = +input.val();
input.val('');
var result = game.playersGuessSubmission(guess);
if (result == 'You have already guessed that number.') {
$('#title').text(result);
} else if (result === 'You Win!' || result === 'You lose.') {
$('#title').text(result);
$('#subtitle').text('Press the reset button to play again.')
$('#hint').prop('disabled', true)
$('#submit').prop('disabled', true)
} else {
guessNum = (game.pastGuesses.length - 1).toString();
$('#l' + guessNum).text(guessNum);
}
};
$('#submit').on('click', function(e){
onSubmit(e);
});
$('#player-input').on('keypress', function(e) {
if(e.which == 13) {
e.preventDefault();
onSubmit(e);
};
});
});
});

You need to escape the CSS selector.
try to replace this line:
$('#' + guessNum).text(guessNum);
with this:
var selector = "#\\" + guessNum.toString().charCodeAt(0).toString(16) + " " + guessNum.toString().substr(1);
$(selector).text(guessNum);
you can read more at:
https://www.w3.org/International/questions/qa-escapes

Table multi column filter

I want to write a multi column filter for one of my tables. I dont want for now to do it with plugins. I found that and its working but only for 1 column. Do you have any ideas how to modify it for all columns ?
$(".filter").keyup(function(e) { // filter is class
if (e.keyCode == 13) {
var indexColumn = $(this).attr('data-id');
console.log('INDEX ' + indexColumn);
console.log("value=%o", this.value);
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr")
//hide all the rows
if (this.value == "") {
jo.show();
return;
}
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this).children(":eq(" + indexColumn + ")");
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
// console.log(data[d]);
return true;
}
}
return false;
}).show(); //show the rows that match.
updateTotals();
}
});
Fiddle demo

You can use each() jquery method in this case.
$(".filter").each(function() {
$(this).keyup(function(e) {
if (e.keyCode == 13) {
var indexColumn = $(this).attr('data-id');
console.log('INDEX ' + indexColumn);
console.log("value=%o", this.value);
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr")
//hide all the rows
if (this.value == "") {
jo.show();
return;
}
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this).children(":eq(" + indexColumn + ")");
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
// console.log(data[d]);
return true;
}
}
return false;
}).show(); //show the rows that match.
}
})
});
JS Demo

how to display "no result found" list search in jquery?

this is work fine..any idea about how to display "no result found"..
Here my code http://jsfiddle.net/UI_Designer/8p426fog/4/
$(".my-textbox").keyup(function() {
var val = $(this).val().toLowerCase()
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide()
} else {
$(this).show();
}
});
});
Thank You..

More elegant and the simplest way it to add extra variable and add <div class="no-results" style="display:none">no results found</div> into DOM, and then toggle visibility of the block jsFiddle
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});

Use the below code for no result found.
$(".my-textbox").keyup(function() {
var val = $(this).val();
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
$(".personsMenu").html("<ul><li><label> NO RESULT FOUND!</label></li></ul>");
}
else {
$(this).show();
}
});
});
Hope this fullfill your requirement.

jQuery load() doesn't work

my problem with load event is that when I test the page it doesn't work(don't hide the preloader image),but when I put the function in the .ready(), the function works(it hides).
here is the code:
JAVASCRIPT:
$(document).load(function(){
$("#loaderHolder").hide("fast");
});
$(document).ready(function(){
$('#slider').cycle();
$('.sf-menu').superfish({
autoArrows: false
});
$('.scroll').slimScroll({
height: '590px',
wheelStep:5,
size:'15px',
width:'590px',
position: 'left',
railColor:'#c5c5c5',
color:'#a2a1a1',
railVisible:true,
alwaysVisible:true,
distance: '565px'
});
$('.scroll').css('width','550px');
$('.gallery').colorbox();
$('#gallery img').hover(function(){ $(this).fadeTo(500, 0.3)}, function(){$(this).stop().fadeTo(500, 1)})
$("#home-link").click(function(){
if ($(".active").length == 0)
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
}
});
$("#about-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#starters-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#starters").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#gallery-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#gallery").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#contacts-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#contacts").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
});

Try $(window).load() not $(document).load()
$(window).load(function () {
// run code
});

Try:
$(window).load
instead of
$(document).load

I think that $.load is method that actualy performs an AJAX request on given url (first parameter). If you want to do something on the document.load event you have to use $(document).ready()