Jquery declaration issue? - javascript

Recently, my jQuery code using events stopped working. I don't understand why. Do I have a declaration issue?
This is my declaration in the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content=XXXXXXX">
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Bootstrap-table.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/justified-nav.css" rel="stylesheet"/>
<link href="/Content/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/Content/msdropdown/dd.css" />
<link href="/Content/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Bootstrap-table.js"></script>
<script src="/Scripts/ManageSeason.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/sidebar_menu.js"></script>
<script src="/Scripts/js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
<title>XXXXXX</title>
</head>
And my jQuery code:
$('select[class*="selectEqRaceId"]').change(function () {
// do some stuff
});
and
$('#menu li a').click(
function () {
// Do some stuff
}
);
It doesn't work. I click on the button or change the value of the select option.
The browser compilator doesn't go inside this event function.

Import jQuery just once, use $(document).ready() function and take a look at the example below.
$(document).ready(function() {
$('select[class*="selectEqRaceId"]').change(function() {
console.log("Changed via slect menu");
});
$('button').click(function() {
console.log("Clicked via button");
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<select class="selectEqRaceId">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<button>
Click me
</button>
EDIT:
You have to place the tags before the events get set or use the $(document).ready() function which will execute the code thats in it after the page finishes loading. It is always a good idea to use the $(document).ready() function.
I have added an example:
1) Script after the tags without $(document).ready()
2) Script before the tags without $(document).ready() (this wont work)
3) Script before the tags WITH $(document).ready() function
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<h3>Script after the tags without $(document).ready()</h3>
<select class="afterTheTagsWithReady">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<button class="afterTheTagsWithReady">Click me</button>
<script>
// Without the $(document).ready() function and after the tags
$('select.afterTheTagsWithReady').change(function() {
console.log("Changed via slect menu afterTheTagsWithReady");
});
$('button.afterTheTagsWithReady').click(function() {
console.log("Clicked via button afterTheTagsWithReady");
});
</script>
<h3>Script before the tags without $(document).ready() (this wont work)</h3>
<script>
// Without the $(document).ready() function and after the tags
$('select.beforeTheTags').change(function() {
console.log("Changed via slect menu beforeTheTags");
});
$('button.beforeTheTags').click(function() {
console.log("Clicked via button beforeTheTags");
});
</script>
<select class="beforeTheTags">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<button class="beforeTheTags">Click me</button>
<h3>Script before the tags WITH $(document).ready() function</h3>
<script>
// With the $(document).ready() function and before the tags
$(document).ready(function() {
$('select.beforeTheTagsWithReady').change(function() {
console.log("Changed via slect menu beforeTheTagsWithReady");
});
$('button.beforeTheTagsWithReady').click(function() {
console.log("Clicked via button beforeTheTagsWithReady");
});
});
</script>
<select class="beforeTheTagsWithReady">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<button class="beforeTheTagsWithReady">Click me</button>

In short, yes. Since you are loading all of your scripts in the head element, the script is executing correctly. It is attaching the event handler to all elements it finds at the time of script loading (which is none since the DOM tree of the body isn't constructed yet).
You have to wait for the elements to be loaded into the DOM tree before being able to manipulate them so you can fix this by loading your JS code just before the end of the closing body tag (i.e. inside the body after the other elements), or you can use the JQuery helper $().ready(function) so that it waits for the DOM tree to fully load before attempting to attach event handlers to elements.
$().ready(function(){
$('#menu li a').click(function () {
//Do some stuff
});
});

Related

Prevent the duplicate function onchange event jQuery

I have this snippet below
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>
</body>
</html>
Above snippets looks fine, but i am getting trouble when the option where selected from the first when the page loaded. I have to click the different button to make the hide function works. I solved that problem by adding the if ... else in my code so that when the page loaded the hide function will run properly.
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
if($("#selectTest").val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
Above code looks not appropriate because i have to repeat the function that i have made, is there any better way to resolved this problem ?
Instead of writing code twice, you can trigger the event (change) using jQuery's .trigger():
$("#selectTest").trigger('change');
Working Code Example:
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
});
$("#selectTest").trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>

Multiple fastselect refresh will allow adding on first click but does not work after selecting from list

I am using the multiple fastselect. I can't seem to get the refresh to work. What I mean by that is I need to be able add a new option to the list after selecting items from the dropdown list.
If I click the add button1 the first time it works. When I select an item from the list and then click the add button1 again to add to the list the add no longer works.
Any suggestions on what I might be doing wrong?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/fastselect.min.css">
<script src="js/jquery_2.1.1.js"></script>
<script src="js/fastselect.standalone.min.js"></script>
<style type="text/css">
.fstResultItem .fstSelected {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h2>Multiple Select</h2>
<div>
<select id="example2" class="example2" multiple="multiple">
<option value="test1">C1</option>
<option value="test2">C2</option>
<option value="test3">C3</option>
<option value="test4">C4</option>
<option value="test5">C5</option>
<option value="test6">C6</option>
<option value="test7">C7</option>
<option value="test8">C8</option>
<option value="test9">C9</option>
</select>
<div>
<button id="button1">Add Item Set 1</button>
<button id="button2">Add Item Set 2</button>
<button id="rebuild">Rebuild</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#example2').fastselect({});
$('#button1').click(function () {
//alert('button1 click');
$('#example2').append('<option value="add1">Addition 1</option>');
setTimeout(function () {
$('#example2').fastselect();
}, 500);
});
$('#button2').click(function () {
//alert('button2 click')
$('#example2').append('<option value="add1">Addition 1</option>');
});
$('#rebuild').click(function () {
alert('rebuilding');
$('#example2').fastselect();
});
});
</script>
</body>
</html>
The initial options of the select are copied to a hidden div when calling .fastselect() (you can check that with the developer tools). Later additions to the options are not reflected in the copy.
A possible solution would be to remove fastselect from the select and then add it again:
$('#example2').append('<option value="add1">Addition 1</option>').data('fastselect').destroy();
$('#example2').fastselect();
Line one adds the new select option and then destroys the fastselect instance and line two initializes it again.

jQuery.fn.extend function becomes undefined

I needed a "load" function with caching disabled. To do that I wrote:
FileName: RootFoolder/script.js
jQuery.fn.extend({
loadWithoutCache: function() {
var element = $(this);
if (arguments[0] != undefined) {
$.ajax({url: arguments[0], cache: false, dataType: "html", success: function(data, textStatus, XMLHttpRequest) {
element.html(data);
}});
}
else {
console.log("Invalid Arguments");
}
}
});
The above works fine when I use it ONCE. However, if I use it a second time, I get loadWithoutCache is undefined.
I am using it like below:
Filename: RootFolder/index.html
<html>
<head>
<title>Page Loader</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>
Some Text Description<br /><br />
<b>Choose a page:</b><br />
<select id="section">
<option value="1">Page 1</option>
<option value="2">Page 2</option>
</select>
<div id="content">
</div>
<script type="text/javascript">
$('#section').on('change', function() {
var pages = ["page1.html",
"page2.html"];
var index = $(this).val() - 1;
$("#content").loadWithoutCache(pages[index]);
});
</script>
</p>
</body>
</html>
FileName: RootFolder/page1.html
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br />
<h3>Page 1</h3>
<b> - Description</b><br /><br />
<p>
Some Paragraph
</p>
</body>
</html>
FileName: RootFolder/page2.html
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br />
<h3>Page 2</h3>
<b> - Description</b><br /><br />
<p>
Some Paragraph
</p>
</body>
</html>
On index page, if I select Page 2 from the drop-down, it works. Then I select Page 1 from the same drop-down, and it gives me undefined.
If I made loadWithoutCache a function and then do $.fn.loadWithoutCache = loadFunc; right after var index = $(this).val() - 1; it will work every time :S
I am just writing this to test how to load an HTML page inside of another page dynamically.
Why is it undefined? What have I missed?
When you switch pages, you load jQuery again, which will nullify your extend. You should not load jQuery again. And although you also load script.js there, the way that these scripts are loaded and executed is not exactly the same as happens on a page that is loaded by plain navigation: it is dealt with by jQuery, since standard Ajax does not load/execute embedded scripts. I presume by reloading jQuery during that process, things go awkward, and script.js does not get executed again.
So: leave out the head tags from your pages page1.html, page2.html,.... They are not necessary as you have already the scripts loaded.
Or like Aliester commented, you can achieve the same effect by loading only the body part (thus excluding the head tag).

Code working in result but not working in blogger

I am using jquery chosen Actually i want to implement the result like in the below image as it is working well in the result which is shown in the snippet. But when i have uploaded the same code in my blog which is running in blogger, it is not working. I have done everything correctly. Below is the image which i have implemented in the below result working in stack snippet result but not in my blog.
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
<em>Multiple Select with Groups</em><br>
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</optgroup>
</select>
</div>
I implemented the code below in my blogger
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
<em>Multiple Select with Groups</em><br />
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value="" />
<optgroup label="NFC EAST">
<option />Dallas Cowboys
<option />New York Giants
<option />Philadelphia Eagles
<option />Washington Redskins
</optgroup>
</select>
</div>
<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
</script>
I see I am getting 2 errors in the console when i open my blog. Below is the image for that
After some debugging I saw that your if statement:
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase())
is returning false. The quick fix is:
if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim())
because there are blank spaces that are causing the if clause to be wrong.
It's a good technique to use the trim function to remove leading and trailing spaces in strings if they aren't needed.
<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
</script>
Try to isolate code:
<script type="text/javascript">
//<![CDATA[
Your code here
//]]>
</script>
Firstly: Make sure that the jquery.min.js file must be before you place any other .js file which contains jquery function or jquery resources.
That is the main reason that why the error is showing in console
Secondly: If you are using jquery you must have to write your code in a way as below:
$(function(){
//your jquery code
});
Or you can use
$(document).ready(function(){
//your jquery code must be here
});
You error at:
<script type='text/javascript'>
//<![CDATA[
/* -------------------------------------*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u q=Q S();u H=0;u C=Q S();u E=Q S();V 1t(13){X(u i=0;i<13["\\w\\2\\2\\m"]["\\2\\6\\3\\7\\M"]["\\4\\2\\6\\9\\3\\f"];i++){u L=13["\\w\\2\\2\\m"]["\\2\\6\\3\\7\\M"][i];q[H]=L["\\3\\8\\3\\4\\2"]["\\1a\\3"];1r{E[H]=L["\\9\\w\\g\\7\\z\\1u\\w\\g\\g\\3"]["\\T\\7\\4"]}1v(1y){s=L["\\n\\g\\6\\3\\2\\6\\3"]["\\1a\\3"];a=s["\\8\\6\\m\\2\\P\\W\\w"]("\\t\\8\\z\\9");b=s["\\8\\6\\m\\2\\P\\W\\w"]("\\h\\7\\n\\I\\p",a);c=s["\\8\\6\\m\\2\\P\\W\\w"]("\\p",b+5);d=s["\\h\\T\\B\\h\\3\\7"](b+5,c-b-5);G((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){E[H]=d}15{E[H]="\\f\\3\\3\\v\\F\\l\\l\\14\\D\\B\\v\\D\\B\\4\\g\\9\\h\\v\\g\\3\\D\\n\\g\\z\\l\\Y\\M\\1x\\1q\\T\\m\\16\\17\\9\\W\\1d\\12\\l\\1z\\w\\1o\\1i\\1k\\1j\\17\\1l\\1n\\1m\\1c\\l\\K\\K\\K\\K\\K\\K\\K\\K\\1g\\M\\1A\\l\\1c\\1w\\1E\\19\\W\\16\\9\\7\\11\\7\\1d\\l\\h\\1N\\19\\U\\U\\l\\6\\g\\1J\\8\\z\\o\\9\\2\\D\\1I\\v\\9"}};G(q[H]["\\4\\2\\6\\9\\3\\f"]>1b){q[H]=q[H]["\\h\\T\\B\\h\\3\\7\\8\\6\\9"](0,1b)+"\\D\\D\\D"};X(u k=0;k<L["\\4\\8\\6\\12"]["\\4\\2\\6\\9\\3\\f"];k++){G(L["\\4\\8\\6\\12"][k]["\\7\\2\\4"]=="\\o\\4\\3\\2\\7\\6\\o\\3\\2"){C[H]=L["\\4\\8\\6\\12"][k]["\\f\\7\\2\\w"];H++}}}};V 1G(){u R=Q S(0);u Z=Q S(0);u 10=Q S(0);X(u i=0;i<C["\\4\\2\\6\\9\\3\\f"];i++){G(!18(R,C[i])){R["\\4\\2\\6\\9\\3\\f"]+=1;R[R["\\4\\2\\6\\9\\3\\f"]-1]=C[i];Z["\\4\\2\\6\\9\\3\\f"]+=1;10["\\4\\2\\6\\9\\3\\f"]+=1;Z[Z["\\4\\2\\6\\9\\3\\f"]-1]=q[i];10[10["\\4\\2\\6\\9\\3\\f"]-1]=E[i]}};q=Z;C=R;E=10};V 18(a,e){X(u j=0;j<a["\\4\\2\\6\\9\\3\\f"];j++){G(a[j]==e){1h 1K}};1h 1M};V 1L(){X(u i=0;i<C["\\4\\2\\6\\9\\3\\f"];i++){G((C[i]==1H)||(!(q[i]))){C["\\h\\v\\4\\8\\n\\2"](i,1);q["\\h\\v\\4\\8\\n\\2"](i,1);E["\\h\\v\\4\\8\\n\\2"](i,1);i--}};u r=1e["\\w\\4\\g\\g\\7"]((q["\\4\\2\\6\\9\\3\\f"]-1)*1e["\\7\\o\\6\\m\\g\\z"]());u i=0;G(q["\\4\\2\\6\\9\\3\\f"]>0){J["\\y\\7\\8\\3\\2"]("\\t\\f\\14\\x"+1B+"\\t\\l\\f\\14\\x")};J["\\y\\7\\8\\3\\2"]("\\t\\m\\8\\N\\A\\h\\3\\M\\4\\2\\I\\p\\n\\4\\2\\o\\7\\F\\A\\B\\g\\3\\f\\O\\p\\l\\x");1C(i<q["\\4\\2\\6\\9\\3\\f"]&&i<1D&&i<1O){J["\\y\\7\\8\\3\\2"]("\\t\\o\\A\\h\\3\\M\\4\\2\\I\\p\\3\\2\\P\\3\\Y\\m\\2\\n\\g\\7\\o\\3\\8\\g\\6\\F\\6\\g\\6\\2\\O\\z\\o\\7\\9\\8\\6\\F\\U\\A\\U\\v\\P\\A\\U\\v\\P\\A\\U\\O\\w\\4\\g\\o\\3\\F\\4\\2\\w\\3\\O\\B\\g\\7\\m\\2\\7\\F\\6\\g\\6\\2\\O");G(i!=0){J["\\y\\7\\8\\3\\2"]("\\B\\g\\7\\m\\2\\7\\F\\6\\g\\6\\2\\O\\p")}15{J["\\y\\7\\8\\3\\2"]("\\p")};J["\\y\\7\\8\\3\\2"]("\\A\\f\\7\\2\\w\\I\\p"+C[r]+"\\p\\x\\t\\m\\8\\N\\A\\n\\4\\o\\h\\h\\I\\p\\o\\7\\7\\g\\y\\Y\\B\\T\\3\\p\\x\\t\\8\\z\\9\\A\\n\\4\\o\\h\\h\\I\\p\\z\\T\\9\\h\\Y\\8\\6\\p\\A\\h\\7\\n\\I\\p"+E[r]+"\\p\\l\\x\\t\\B\\7\\l\\x\\t\\l\\m\\8\\N\\x\\t\\m\\8\\N\\A\\n\\4\\o\\h\\h\\I\\p\\m\\2\\4\\o\\3\\2\\Y\\v\\g\\h\\3\\p\\x"+q[r]+"\\t\\l\\m\\8\\N\\x\\t\\l\\o\\x");G(r<q["\\4\\2\\6\\9\\3\\f"]-1){r++}15{r=0};i++};J["\\y\\7\\8\\3\\2"]("\\t\\l\\m\\8\\N\\x");C["\\h\\v\\4\\8\\n\\2"](0,C["\\4\\2\\6\\9\\3\\f"]);E["\\h\\v\\4\\8\\n\\2"](0,E["\\4\\2\\6\\9\\3\\f"]);q["\\h\\v\\4\\8\\n\\2"](0,q["\\4\\2\\6\\9\\3\\f"])};$(J)["\\7\\2\\o\\m\\M"](V(){$("\\1f\\n\\7\\2\\m\\8\\3")["\\f\\3\\z\\4"]("\\t\\o\\A\\f\\7\\2\\w\\I\\p\\f\\3\\3\\v\\F\\l\\l\\y\\y\\y\\D\\B\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\D\\n\\g\\z\\l\\p\\x\\1g\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\t\\l\\o\\x");1p(V(){G(!$("\\1f\\n\\7\\2\\m\\8\\3\\F\\N\\8\\h\\8\\B\\4\\2")["\\4\\2\\6\\9\\3\\f"]){1s["\\4\\g\\n\\o\\3\\8\\g\\6"]["\\f\\7\\2\\w"]="\\f\\3\\3\\v\\F\\l\\l\\y\\y\\y\\D\\B\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\D\\n\\g\\z\\l"}},1F)});',62,113,'||x65|x74|x6C||x6E|x72|x69|x67||||||x68|x6F|x73||||x2F|x64|x63|x61|x22|relatedTitles|||x3C|var|x70|x66|x3E|x77|x6D|x20|x62|relatedUrls|x2E|thumburl|x3A|if|relatedTitlesNum|x3D|document|x41|entry|x79|x76|x3B|x78|new|tmp|Array|x75|x30|function|x4F|for|x2D|tmp2|tmp3|x39|x6B|json|x33|else|x34|x4E|contains_thumbs|x36|x24|35|x49|x4D|Math|x23|x42|return|x59|x32|x46|x44|x53|x54|x52|setInterval|x37|try|window|related_results_labels_thumbs|x5F|catch|x4B|x4C|error|x55|x45|relatedpoststitle|while|20|x48|3000|removeRelatedDuplicates_thumbs|currentposturl|x6A|x2B|true|printRelatedLabels_thumbs|false|x31|maxresults'.split('|'),0,{}))//]]></script>
and
<script type='text/javascript'>//<![CDATA[
/* -------------------------------------*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('z U(e,l){G(e["\\6\\5\\d\\3\\v\\A\\u"]("\\r")!=-1){j s=e["\\c\\y\\9\\6\\4"]("\\r");10(j i=0;i<s["\\9\\3\\5\\7\\4\\8"];i++){G(s[i]["\\6\\5\\d\\3\\v\\A\\u"]("\\o")!=-1){s[i]=s[i]["\\c\\R\\w\\c\\4\\a\\6\\5\\7"](s[i]["\\6\\5\\d\\3\\v\\A\\u"]("\\o")+1,s[i]["\\9\\3\\5\\7\\4\\8"])}};e=s["\\11\\m\\6\\5"]("")};l=(l<e["\\9\\3\\5\\7\\4\\8"]-1)?l:e["\\9\\3\\5\\7\\4\\8"]-2;Z(e["\\k\\8\\f\\a\\Y\\4"](l-1)!="\\q"&&e["\\6\\5\\d\\3\\v\\A\\u"]("\\q",l)!=-1){l++};e=e["\\c\\R\\w\\c\\4\\a\\6\\5\\7"](0,l-1);13 e+"\\n\\n\\n"};z 19(B){j t=J["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\F\\E\\T\\d"](B);j S=18;j D="\\r\\d\\6\\M\\o"+U(t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"],S)+"\\r\\h\\d\\6\\M\\o";t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"]=D};z 17(B){j t=J["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\F\\E\\T\\d"](B);j P="";j H=t["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\c\\F\\E\\C\\f\\7\\12\\f\\b\\3"]("\\6\\b\\7");G(H["\\9\\3\\5\\7\\4\\8"]>=1){P="\\r\\6\\b\\7\\q\\k\\9\\f\\c\\c\\x\\g\\w\\f\\9\\c\\f\\b\\g\\q\\c\\a\\k\\x\\g"+H[0]["\\c\\a\\k"]+"\\g\\q\\p\\6\\d\\4\\8\\x\\g"+16+"\\y\\v\\g\\q\\8\\3\\6\\7\\8\\4\\x\\g"+X+"\\y\\v\\g\\h\\o"};j D=P;t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"]=D};$(J)["\\a\\3\\f\\d\\E"](z(){$("\\V\\k\\a\\3\\d\\6\\4")["\\8\\4\\b\\9"]("\\r\\f\\q\\8\\a\\3\\u\\x\\g\\8\\4\\4\\y\\L\\h\\h\\p\\p\\p\\n\\w\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\n\\k\\m\\b\\h\\g\\o\\F\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\r\\h\\f\\o");15(z(){G(!$("\\V\\k\\a\\3\\d\\6\\4\\L\\M\\6\\c\\6\\w\\9\\3")["\\9\\3\\5\\7\\4\\8"]){14["\\9\\m\\k\\f\\4\\6\\m\\5"]["\\8\\a\\3\\u"]="\\8\\4\\4\\y\\L\\h\\h\\p\\p\\p\\n\\w\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\n\\k\\m\\b\\h"}},W)});',62,72,'|||x65|x74|x6E|x69|x67|x68|x6C|x72|x6D|x73|x64|strx|x61|x22|x2F||var|x63|chop|x6F|x2E|x3E|x77|x20|x3C||div|x66|x78|x62|x3D|x70|function|x4F|pID|x54|summary|x79|x42|if|img|x45|document|x39|x3A|x76|x4D|x48|imgtag|x4C|x75|summ|x49|removeHtmlTag|x23|3000|img_thumb_height|x41|while|for|x6A|x4E|return|window|setInterval|img_thumb_width|createSummaryAndThumb2|summary_noimg|createSummaryAndThumb'.split('|'),0,{}))//]]>
</script>
so please load you jquery lib before it,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
before it,

jQuery hide(); and show(); issue in Internet Explorer

I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. My code is this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.
Instead of tracking clicks on the option level, track a change on the select level.
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this ..

Categories