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 ..
Related
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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
I am working with a book and in the book I am learning jquery's slideDown/Up method. I ran the code originally on my main web page and it will not work. So I just created a simple YES.html(seen above) to make sure I was coding it correctly. However it will not slide up or down image. I don't know what I am missing for this to work. I am a beginner so I could be missing something simple. Please explain your answer/solution in steps if possible or maybe guide me to a web page tutorial of some sort. Thanks.
are you looking for something like this?
$('#make_visible').on('click', function (e) {
/* method 1 */
/*if ($('#dramatic').css('display') === 'none') {
$('#dramatic').slideDown();
$(this).html('Hide');
}
else {
$('#dramatic').slideUp();
$(this).html('show');
}*/
/* method 2 */
$('#dramatic').slideToggle();
this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />
You didn't import jQuery, to use jQuery UI you have to import jQuery first.
Think this helps:
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
jQquery UI needs jQuery to function, so you should include that first. I used jQuery 1.3.2 as that seem to be the best fit for jQuery UI 1.8.
The book might be a bit dated as the latest version is 1.12.
I also changed the "onclick" code a bit:
$( "button#make_visible" ).click(function() {
$("img#dramatic").slideDown();
});
img#dramatic { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
</body>
I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})
I used a radio button to display the dropdown list with three options. I need to display a textbox when the user selects the blank option. If anyone has a suggestion that would steer me in the right direction, I would be grateful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="">
<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div5" />
</div>
<div id="div5" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers" onchange="if(this.selected index==blank){this.form['box'].style.visibility='visible'}else{this.form['box'].style.visibility='hidden'};">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
} }
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</form>
</body>
</html>
<select name="selWaiver" id="waivers" onchange='if ($(this).val()=="") {
$("#box").show(); }else{
$("#box").hide();}'>
I recommend JQuery because it will save you a lot of cross browser compatibility issues!
Are you using jQuery in this project. It is so much easier to perform DOM manipulation using the jQuery library. I would use the jQuery toggle() method for this (more info at http://api.jquery.com/css). You could do something like this on the click event for the blank option:
$('.hide').toggle();
Javascript version (untested) :
<select name="selWaiver" id="waivers" onchange='check(this);'>
<script>
function check(sel)
{
var value=frm1.selWaiver.options[frm1.selWaiver.options.selectedIndex].value;
//alert(value) to see if it works
var box=document.getElementById("box");
if (value=="")
box.style.display="block";
else
box.style.display="none";
}
</script>
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' });
}
});