I am working on an app where I need an input with the autocomplete function provided by jQuery. Everything is okay, until I add some more elements into the <ul> where the options are actually added.
What I need, is some 'contextual help' where I can show to the user some basic queries he can enter there.
They appear and they seem to work, until you press the UP arrow key multiple times. If you are on the first element and press the up arrow key, the focus moves to the input. If I press the up arrow key again, an error appears and my app crashes:
uncaught TypeError: Cannot read property 'value' of undefined
at $.(fiddle.jshell.net/_display/anonymous function).(anonymous function).menufocus (https://code.jquery.com/ui/1.12.1/jquery-ui.js:5831:25)
at HTMLUListElement.handlerProxy (jquery-ui.js:606)
........
The down arrow key is working without problems.
You can check a jsfiddle here or the one below.
How to replicate the error:
Focus on the input box and write COM; a dummy autocomplete will apear
Use the down arrow key to move down 1-2 elements; then, use the up arrow key to move back to the first element;
Press the up arrow key to move the focus onto the input box
Press the up arrow key again
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
open: function(e, ui) {
var autocompleteElement = $('.ui-autocomplete');
contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]
autocompleteElement.append('<li class="ch">Contextual Help</li>');
for (var i = 0; i < contextualItems.length; i++) {
autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
console.log(contextualItems[i]);
}
},
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
}
});
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
I tried changing the Contextual Help in a div, I tried to use categories, but I did not succeed. Can you please give me a hint or an idea on how I might solve this?
Thanks!
Jquery-UI's autocomplete always will create a menu with an items option that accepts all children as menu items. Unfortunately, it's hardcoded in the autocomplete class. You can change the option to avoid selecting elements that aren't proper items, but JQuery recommends against changing it after the menu is already created. Still, you can still do it, and it seems to work for me. To change the items option in the ui-menu that is created after the autocorrect input, I did:
$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)" );
In my example, I used the sibling selector so that you can have it particular to the autocomplete id (assuming there's only at most one autocomplete per container) if you want to. Whatever is the best way for you to select the ui-menu is what you should use; this was just an example.
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
open: function(e, ui) {
var autocompleteElement = $('.ui-autocomplete');
contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]
autocompleteElement.append('<li class="ch">Contextual Help</li>');
for (var i = 0; i < contextualItems.length; i++) {
autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
console.log(contextualItems[i]);
}
},
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
}
});
$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)");
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
JSFiddle at:
https://jsfiddle.net/p1y2587a/7/
As mentioned in the comments, I doubt you're supposed to manually change the contents of .ui-autocomplete.
What you can do instead is add a contextual help element outside of the dropdown and position it dynamically upon focus (or any other event, depending):
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
},
focus: function(event, ui) {
$('[data-context-help]')
.css({
top: $('.ui-autocomplete').position().top + $('.ui-autocomplete').outerHeight(true),
left: $('.ui-autocomplete').position().left,
width: $('.ui-autocomplete').outerWidth(true)
})
.text('Help for ' + ui.item.value)
.show()
},
close: function(event, ui) {
$('[data-context-help]').hide();
}
});
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold;
position: absolute;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<div data-context-help class="ch" style="display:none">Help goes here</div>
</body>
</html>
Related
I know this gets asked a lot and I've already tried some examples from SO, but no luck.
I have a function that allows me to change text in a div and it works, but only as plain text. I want it to work as HTML, but I've tried placing in innerHTML, perhaps in the wrong spot, and separated HTML in my script with + symbols. Nothing seems to work. Either I get the HTML in my text raw or the function simply does not work.
Here's my script as of this time:
$(function() {
var copyStack = [
'<strong>This is bold text within strong tags,</strong>' + ' this is the remainder of my copy.',
'<strong>This is more bold text within strong tags,</strong>' + ' this is the remainder of my second copy.'
];
$("#swatch-0").click(function () {
$(".product-shop-description").text(copyStack[0]);
console.log(copyStack[0]);
});
$("#swatch-1").click(function () {
$(".product-shop-description").text(copyStack[1]);
console.log(copyStack[1]);
});
});
I think This is what you want to do:
var copyStack = [
'<strong>This is bold text within strong tags,</strong>' + ' this is the remainder of my copy.',
'<strong>This is more bold text within strong tags,</strong>' + ' this is the remainder of my second copy.'
];
swatchOne = document.getElementById("swatch-0");
const changeInnerHTML = (elm, inner) => (elm.innerHTML = inner);
swatchOne.addEventListener("click", () => {
changeInnerHTML(swatchOne,copyStack[0]);
});
swatchTwo = document.getElementById("swatch-1");
swatchTwo.addEventListener("click", () => {
changeInnerHTML(
swatchTwo,copyStack[1]);
});
.btn{
background: #cecece;
padding: 1em;
width: max-content;
margin-bottom:1em;
}
#swatch-0{
background: #000;
color:#fff
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class='btn' id='swatch-0' >Hello</div>
<div class='btn' id='swatch-1' >Hello22</div>
<script src="./script.js"></script>
</body>
</html>
The getElementById property is used to access an HTML element
more info [HERE][]
The innerHTML property is used to access and modify the HTML inside of an HTML element
more info HERE
Solved it! Thanks to some help and some guesswork, here's the answer:
$("#swatch-0-peanut-butter-chocolate-chip").click(function () {
$(".product-shop-description").html(copyVariety[0]);
console.log(copyVariety[0]);
});
I've been looking thru the docs and another question that was close to what I needed for help with the jRate star rating jQuery plugin, but I was not able to get the output I was looking for. What I am looking to do is to get an output of the numerical rating value when I click a button.
With this html :
<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />
</div>
and this javascript :
function getRatingValue(){
$(document).ready(function(){
$('ratingContainer').jRate({
onSet: function(rating){
$('ratingValue').text(rating);
}
})
});
}
function getSimpleStarRatingHtml(){
$(document).ready(function() {
$("#ratingContainer").jRate({
width: 60,
height: 60,
startColor: '#3366FF',
endColor: '#9966FF'
});
});
}
The getSimpleStarRatingHtml() function populates the empty stars in the ratingContainer div when the user pulls a select dropdown.
The getRatingValue code was cribbed from the other StackOverflow question I linked to.
I realize this is probably a basic jQuery Q; I'm a little bit of a noob with it. Thanks.
Update
The code below does give me the output for the rating value I want, but does not allow me to set any options for the appearance of the stars (height, color, etc):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function createJrate(){
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text(rating);
}
});
}
</script>
<style>
#rating{
width: 300px;
height: 140px;
border: 1px black solid;
}
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>
<div id="rating"></div><div id="ratingValue"></div>
</body>
</html>
Have tried a bunch of variations, like adding the rating function after the close bracket that ends the options, tried tying the $('#ratingValue').jRate() to a var, and then calling the function, as in jRate.change(function(){// stuff in here});.
Any other ideas you may have?
thanks
If your logic works and you're just looking to change the styling, have you considered simply overriding the standard CSS for the script to have it render with the colors and formatting that you'd prefer?
was able to get it working by defining the jRate obj this way...
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text("rating " + rating);
},
startColor: 'blue',
endColor: 'blue',
width: 50,
height: 50
});
Hi i have looked every where for this but cant find a good way of doing it :/
I have a dynamically populated list on my website that looks like this:
<li>
name: blue<br/>
procesor: blue<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short">
</li>
I have been looking for a way to have a small popup show with the contents of the hiddent text field in the list.
I have tried many free modal javascript code but they all seem to either stop working or destroy my template.
Dose anyone know how I could do this. I have no working javascript code as from now and am looking for the best way todo this. It doesn't need to be fancy. Just a white boc with the popup
The easiest way is to add title property to li:
<li title="Some short desc">
...
</li>
This should work on all desktop browsers, but not on mobiles.
Another way is to use excellent hint.css from http://kushagragour.in/lab/hint/
It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. You can fine tune orientation, colours, and even animations.
Try this one
$(function() {
$(".list li input[type=hidden]").each(function(index, obj) {
$(".popup").append($(obj).val() + "<br/>");
});
$(".popup").show();
});
.popup {
position: relative;
top: 10px;
border: solid 2px #E5988A;
width: 200px;
text-align: left;
margin: 0px auto;
z-index: 2;
background-color: #FFF;
padding: 10px;
}
.disabled {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
display: block;
background-color: #333;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
<li>
name: blue
<br/>procesor: blue
<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short" />
</li>
<li>
name: green
<br/>procesor: gree
<br/>
<div class="right top">2002</div>
<input type="hidden" name="Description" value="anothershort">
</li>
</ul>
<div class="popup"></div>
<div class="disabled"></div>
Html Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<div>
Select <select id = "MyList"></select>
</div>
<input type="hidden" name="Description" value="short" id="hiddendiv">
</body>
</html>
Javascript
$(document).ready(function(){
var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
$('#MyList').hover(
function(){
var value=$('input').val();
alert(value);
}, function() {
}
)
});
I want to create a contextmenu of a div tag to append some contents into it.
But when i right click many times continuously,my div tag contains more contents than i want.Here is my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
#MyMenu{
position: absolute;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});
});
</script>
</head>
<body>
<div id="container">
</div>
<ul id="MyMenu">
<li>Add</li>
<li>Delete</li>
</ul>
</body>
</html>
For example,if i right click 5 times continuously,in my div will contain 5 lines "My Content" although i only want 1 line.Can anyone explain why and solution for me?Thank a lot!
Try (See DEMO):
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
});
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});
The deal is that in your version you bind to #add element click event hendler each time user open context menu. So after 5 times it heppens there will be 5 click event hendlers, so if you then click on #add element you add '<p>My Content</p>' string to #container element 5 times.
I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?
I'm using the following code in a custom code module for Joomla.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p>More</p>
</body>
</html>
This is my article:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
IDs must be unique identifiers. For multiple elements, use class names.
Id's should be unique on a page.
You could wrap your slider divs in a wrapper div and use that as basis for iterating through your sliders something like this.
HTML:
<div id="sliders">
<div class="boxVisible"></div>
<div class="boxHidden"></div>
</div>
Javascript:
function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");
for (s in sliders) {
if (sliders.hasOwnProperty(s)) {
if (sliders[s].className == "boxVisible") {
sliders[s].className = "boxHidden";
alert('changed visible');
} else if (sliders[s].className == "boxHidden") {
sliders[s].className = "boxVisible";
alert('changed hidden');
}
}
}
}
showHide2("sliders");
the dom elements can't have the same id's! if you give the same id to the multiple dom elements, javascript will take only the first one.