In the below jquery mobile html code, onchange function (onchangeInDropDown();) is called whenever there is a change in multi-select option in drop down. I'm doing some time consuming operation (updating the UI, based on item selected) whenever there is a change. I'm seeing some strange behaviour if I select more than one options quickly (one after another). Could you please suggest me a better way to handle this.
Thought of implementing the following solution, but do not know how to implement it.
Removing the onchange function and put the OK button in the overlay menu. On selecting the OK button, will call a function to get all the item selected and update the UI with respect to the item selected, ie., update all together instead of every change. The problem here is I do not know how to put OK button in the overlay menu. Is there a way to put ok button in overlay menu
Please help me!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Multiselect item </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- below three tags , link and script are for showing pop up toast dialogs -->
<link href="css/toastr.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/toastr.js"></script>
<link href="css/toastr-responsive.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
function onchangeInDropDown (){
//Performing some time consuming operation and updating the ui based on item selected
}
function getDropDownValue() {
var inputElems = document.getElementById("item_drop_select");
count = 0;
for (var i=1; i<inputElems.length; i++) {
if (inputElems[i].selected == true) {
count++;
alert (inputElems[i].value);
// Update the UI based on item inputElems[i].value
}
}
}
</script>
</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >
<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
<option >Multi-select list of item to buy</option>
<option value="milk" id="milk" >Milk</option>
<option value="oil" id="oil" >Oil</option>
<option value="rice" id="rice" >Rice</option>
<option value="softdrinks" id="softdrinks" >Softdrinks</option>
<option value="detergent" id="detergent" >Detergent</option>
</select>
<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>
</div>
</form>
</body>
</html>
Can you please replace this data-native-menu="true". It will open Select menu as native control.
Related
I've been searching for a while, and I found that I can send a value from doGet to html created.
But I want to do smth different, I want to have a button and label where where every time I press on that button it increments the label.
something like a counter for pressing that button.
I already has the HTML that renders button and label it's pretty simple
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDP Test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function incrementCounter() {}
</script>
</head>
<body>
<label> Counter 0 </label>
<button onClick="incrementCounter"> Increment counter</button>
</body>
</html>
I want to link the incrementCounter function to this label, or whatever html element that can be done that whenever the button is pressed it gets incremented and rendered on the screen
can someone guide me to go through this ?
You have some errors in your code. Firstly it should be onclick not onClick and the function should be called as onclick="incrementCounter()".
Secondly, a label should be used with a input, textarea or select element.
Now coming to the code
HTML
<p>Count: <span id="counter">0<span></p>
<button onclick="incrementCounter()">Increment Counter</button>
JS
function incrementCounter() {
const counterElem = document.querySelector('#counter'),
count = +counterElem.innerHTML;
counterElem.innerHTML = count+1;
}
What is happening inside the code is I'm selecting the target element where the count would display. Then I'm getting the value of its innerHTML and parsing it as an integer using + before the counterElem.innerHTML. Then I'm adding 1 to the value and setting it as the innerHTML
I've been working with laravel. I have created the form below. I want users depending on their selection to be directed to specific webpages that I have already created (for better understanding, please check my comments in code ()). Routing is ok but I need some help with the form. If possible I need help using only html (no javascript). My code is below. The problem is that the form action redirects to /research for every selection user does.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Please choose department</title>
</head>
<body>
<form method="post" action="/research" id="tmima">
{{csrf_field()}}
Select:<br>
<select name="Department" id="dpt">
<option value="0" selected="selection">Select</option>
<option value="geo">Geology</option> <!--should place /geology page link-->
<option value="phs">Physics</option> <!--should place /physics page link-->
<option value="chm">Chemistry</option> <!--should place /chemistry page link-->
</select>
<input type="submit" value="Αναζήτηση Στοιχείων Φοίτησης">
</form>
</body>
</html>
I think you could do this in the controller like so:
if (request('Department) == 'geo') {
return view ('/geology);
} else if (request('Department) == 'phs') {
return view ('/psychology);
} else if (request('Department) == 'chm') {
return view ('/chemistry);
} else {
redirect->back();
}
An HTML exercice I'm working on is asking me to dynamically create options of certain artists. I've done this, but can't find a way to do the next question. I am asked to alert() the index value of the composer/band selected.
It seems simple but I don't know what to refer to it as.
<html>
<head>
<title>Page Title</title>
<script type='text/javascript'>
classical=["Beethoven","Mozart","Tchaikovsky"];
pop=["Beatles","Corrs","Fleetwood Mac","Status Quo"];
var s="";
function show(choice){
if(choice==1)
music=classical;
if(choice==2)
music=pop;
s="<html><head></head><body>"; //start of the line
s+="<form id='mySelect'><select size='"+music.length+"'> "; //make length of number of artist
for(c=0;c<music.length;c++)
s+="<option>"+music[c]+"</option>"; //add groups as options
s+="</select></form></body></html>"; //close line
var line = s
with(document.getElementById('examples').contentDocument){
open();
write(s);
close();
}
alert(document.getElementById("mySelect").selectedIndex)
}
</script>
</head>
<body>
<p>Dynamically written content</p>
<form>
<select onchange="show(this.selectedIndex);">
<option>choose...</option>
<option>classical</option>
<option>pop</option>
</select>
</form>
<iframe id='examples'></iframe>
</body>
</html>
Thanks for the help!
I am currently making a web page in html with a series of drop down menus. The web site is here: http://tc.met.psu.edu/tcgengifs/index2.html
I am using the following code to make the drop-down menus
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getUrl() {
var part12 = document.getElementById("firstChoice2").value;
var part22 = document.getElementById("secondChoice2").value;
var part32 = document.getElementById("thirdChoice2").value;
return "http://tc.met.psu.edu/tcgengifs/CMC/"+part12+"/"+part22+part32;
}
function gotoSelection() {
var urlToGoTo = getUrl();
alert(urlToGoTo);
//location.href=urlToGoTo;
function setupLink() {
var urlToGoTo = getUrl();
document.getElementById("gotoLink").href=UrlToGoTo;
}
</script>
</head>
<body onload="setupLink();">
<div id=leftcol>
<select id =firstChoice2 onchange="setupLink();">
<option value=2012072600>2012072600</option>
<option value=2012072512>2012072512</option>
</select>
</div>
<body>
<div id=leftcencol>
<select id =secondChoice2 onchange="setupLink();">
<option value=rain>Rainfall</option>
<option value=slp>Sea Level Pressure</option>
<option value=850virt>850mb Virtual Temperature</option>
</select>
</div>
<div id=rightcencol>
<select id =thirdChoice2 onchange="setupLink();">
<option value=.anim.html>Animation</option>
<option value=0.png>000hr</option>
<option value=1.png>006hr</option>
<option value=2.png>012hr</option>
</select>
</div>
<div id=rightcol>
<a id="gotoLink" href="">Submit</a>
My problem is that I need to use this code (with modifications) multiple times, but when I do that, the submit button for each series of 3 dropdown menus takes me to the site that the last piece of code is designed to take me to. How do I separate the code so that the first series of three dropdowns is not influenced by any other series?
Your second function gotoSelection() is missing a closing brace but that is not what is causing your problems.
The way you are passing the URL back into the anchor isn't correct try;
document.getElementById("gotoLink").setAttribute("href",urlToGoTo);
In your setupLink() function to replace the line;
document.getElementById("gotoLink").href=UrlToGoTo;
I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.
It is working fine in other browsers.
I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.
My simple code is here:
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').bgiframe();
});
</script>
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
</head>
<body>
<h1>Autocomplete using YUI !</h1>
<label for="myInput">Search names in our database:</label>
<div id="myAutoComplete" class="yui-skin-sam">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<br>
<div>
<form action="#" method="get" accept-charset="utf-8">
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</form>
</div>
</body>
Here select is displayed over myContainer (myContainer displays populated suggestions).
I know I am making some blunder.
Please help me to figure it out.
One thing you can do is hide the <select> (use visibility:hidden as not to mess up the layout) at the beginning of the process and show it at the end.
BTW: The likelihood of finding another StackOverflow user using YUI + jQuery + bgiframe + ie6 is quite low. Most users like to help with debugging code, not plug-ins.
jQuery and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?
Could use jQuery autocomplete instead?
Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.
Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.
Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="myAutoComplete">
<label for="myInput">Enter a state:</label><br/>
<input id="myInput" type="text"/>
<div id="myContainer"></div>
</div>
<div>
<form action="#" method="get" accept-charset="utf-8">
<p>
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</p>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#myContainer').bgiframe();
});
YAHOO.example.Data = {
arrayStates: [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'Wyoming'
]
}
YAHOO.example.BasicLocal = function() {
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
var restoreHeight = function(sType, aArgs) {
$('#myContainer').css({height:'auto'});
};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
// oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
oAC.doBeforeExpandContainer = function () {
$('#myContainer').css({height:'50px'}); // might need to play around with this value
return true;
}
// restore height
oAC.containerCollapseEvent.subscribe(restoreHeight);
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
</body>
</html>