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,
Related
I would like to change the page language using js I am using google translator.
Drop down value is changing using my code but I think we need to trigger
any ajax so it will get translated.
Please suggest any solutions
I am trying this code but it is not working.
$('.goog-te-combo').val('ur').trigger('change');
$('.goog-te-combo').find('select').trigger('change');
Here is my code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: '/en/ur'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<p>You can translate the content of this page by selecting a language in the select box.</p>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind('load', function()
{
$('.goog-te-combo').val('ur');
});
</script>
</body>
</html>
From the code you provided, it seems you never made an API call requesting for some text to be translated. The following documentation has detailed instructions on the query format needed for an API call. You will need to specify which part of the webpage you need to translate in the query. The translated strings will be returned in an array following the same order they were passed. Here is a sample code based on what you provided:
<body>
<p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
<h1 id="title">My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<form>
<select id="targetLanguage">
<option value="ZH">Chinese (Mandarin)</option>
<option value="CS">Czech</option>
<option value="DA">Danish</option>
<option value="NL">Dutch</option>
<option value="EN">English</option>
<option value="ET">Estonian</option>
<option value="FR" selected = "selected">French</option>
</select>
<input type="button" id="translateButton" value="Translate" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#translateButton").click(function () {
var url = "https://translation.googleapis.com/language/translate/v2";
//Strings requiring translation
url += "?q=" + escape($("#textField").text());
url += "&q=" + escape($("#title").text());
//Target language
url += "&target=" + $("#targetLanguage").val();
//Replace with your API key
url += "&key=YOUR_API_KEY";
$.get(url, function (data, status) {
//Results are returned in an array following the order they were passed.
$("#textField").text(data.data.translations[0].translatedText);
$("#title").text(data.data.translations[1].translatedText);
});
});
</script>
</body>
You can add more target languages by including them in the drop down menu. Here is the complete list of supported languages and their code.
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
});
});
i try to use selet2 jquery library (https://select2.github.io/) to get a Multiple select boxes but that is not working
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#js-example-basic-multiple").select2();
});
</script>
<g:select class="js-example-basic-multiple" id="js-example-basic-multiple" name="tags" from="${tags}" optionValue="name" optionKey="id" multiple="true"/>
i don't know if i have to download something ?
thx
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 ..
In my jsp page i have one text box and two combo box. An alert is coming in my jsp page when i am writing something in the textbox. Alert is coming as "username already exists" and after alert that textbox is autorefreshed but two combo boxes are getting vanished why? i could not find out what may be the reason any help please? I included the following in head section. Full source for alert is here.
http://csscody.com/demo/wp-content/demo/popup/js/jquery.easing.1.3.js
http://csscody.com/demo/wp-content/demo/popup/js/alertbox.js
http://csscody.com/demo/wp-content/demo/popup/js/style.css
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.easing.1.3.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/alertbox.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" media="all" href="js/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").keyup(function () {
$.getJSON('check.jsp', {
textboxname: this.value
},function(data){
if(data.isTrue){
$("#textbox").val(''); //clear the text box
csscody.alert("username already exists");// here alert is coming
}
else{
}
});
});
});
</script>
</head>
<body>
<input type="text" id="textbox" name="textboxname" style="position: absolute; width: 250px; left: 110px; top: 40px;" />
<br/><br/>
// The following two combo boxes are getting vanished after alert why
<select id="" name="" style="position: absolute; left: 600px; top: 40px; width: 250px;">
<option value=""></option>
<option value="somedata">somedata</option>
</select>
<br/><br/>
<select id="" >
<option value="_"></option>
<option value="somedata">somedata</option>
</select>
</body>
</html>
check.jsp
JSONObject jsonObj= new JSONObject();
jsonObj.put("isTrue","true");
response.setContentType("application/json");
response.getWriter().write(jsonObj.toString());
Its all ok with your code. When i started debug you code i saw some interesting thing in alertbox.js: (line 141 and 178)
if (!$.support.maxHeight) { //IE6
$('embed, object, select').css({ 'visibility' : 'hidden' });
}
This code detect ie6(if read a comment) but seems its buggy.
Just comment these lines and your problem will be solved.
And don't forgot to post this bug!
Good luck. And start use debugger :)
following code will solve your problem,
csscody.alert("username already exists",{ onComplete: function(){
$('embed, object, select').css({ 'visibility' : 'visible' });
}
});