so I'm starting to experiment with javascript/jquery and I have an input field with a datalist attached to it. The only problem I have is that when i "hover" over the datalist (once it appears) I want to trigger an event.
I have managed to trigger click and change events, but mouseover just won't work and I can't seem to find an example that works. Here is the code
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(function(){
// This works
$("#browserList").on("change", function(){
console.log("changed val=" + $(this).val());
});
// This does not
$("datalist#browsers").mouseover(function(){
console.log("hovered");
});
});
</script>
<input list="browsers" id="browserList" placeholder="Find a browser">
<datalist id="browsers">
<option>Explorer</option>
<option>Firefox</option>
</datalist>
Please tell me what I am missing,
Thank you!
For mouse over use the below syntax
$("#browserList").mouseover(function(){
//do something
})
If you want to trigger the event on options of datalist, it's not possible because they are shadow elements. please see the explanation from another SO question. This explains better about it.
Related
Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>
I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags
I'm confused on how this set of code is suppose to select the button by pressing the "g" on the keyboard:
Any help on this?
Concept of keypress in jquery
$(selector).keypress(function)
You may follow http://www.k68.org/wp-content/uploads/2010/11/Key_Codes.htm
Use this code :
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).keypress(function(event){
if(event.which == 103) {
//Your Code
}
})
})
</script>
</body>
</html>
As i can read your provided code image will work.
it has one problem which trap all event of this element which is not right based on description of provided example.
their should be $('.btn').toggleClass("btn-like")
So what i want to do is when i click on a button, it will pass this click event to another element in webpage, or you can say it will create a new click event in another element. Below is my code, it does not work, please let me know what is wrong with it, it looks make sense...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onClick=alert("error") /></p>
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
</body>
</html>
Since you are using jQuery you can use this onClick handler which calls click:
$("#datepicker").click()
This is the same as $("#datepicker").trigger("click").
For a jQuery-free version check out this answer on SO.
The smallest change to fix this would be to change
onClick="document.getElementById("datepicker").click()">
to
onClick="$('#datepicker').click()">
click() is a jQuery method. Also, you had a collision between the double-quotes used for the HTML element attribute and those use for the JavaScript function argument.
To simulate an event, you could to use trigger JQuery functionnality.
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
The reason your code isn't working the way you would expect is because this line:
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
should be changed to:
<button type="button" value="submit" onClick="document.getElementById('datepicker').focus()">submit </button>
There are two things to notice here:
1: The "s around datepicker have been changed to 's so that they do not interfere with the quotes surrounding the onclick event.
2: The click() has been changed to focus() to activate the datepicker calendar. When the button is pressed.
Now, this fixes your issue...but I do agree with the other posts that using jQuery to access the DOM element and trigger the event is the better way to go. Since you're already doing this for the jQuery datapicker plugin via <script src="http://code.jquery.com/jquery-1.8.3.js"></script>, this should not be a problem.
Inline events are not recommended.
Or you can use what JQuery alreay made for you:
http://jqueryui.com/datepicker/#icon-trigger
It's what you are trying to achieve isn't it?
try this
document.getElementById("datapicker").addEventListener("submit", function())
Use this
jQuery("input.second").trigger("click");
I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?
<html>
<script>
//test.Attributes.Add("readonly","readonly")
//document.getElementById('testtt').setAttribute('readonly', 'readOnly');
// document.getElementByID('test').value=readOnly;
//document.getElementByID('test').readOnly = true;
// $("#test").attr("readonly", "readonly");
//$("#test").removeAttr("readonly");
//$('#test').attr('readonly', 'readonly');
$("#test").attr("readonly")
</script>
<body>
<input id="test" type="text" value="text" />
</body>
</html>
$('#test').attr('readonly', true);
working example : http://jsfiddle.net/FBUDt/
this should work for you:
$("#test").attr("readonly", "readonly");
remember that the DOM needs to be loaded before you try to find the element
you could use jquerys DOM-ready
$(function() {
$("#test").attr("readonly", "readonly");
});
what version of jquery are you using?
You should try wrapping your code into $('document').ready();
According to the documentation,
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
So it would be:
$('document').ready(function(){
$("#test").attr("readonly", "readonly");
});
You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+
$(function(){
$('#test').prop('readonly', true);
});
I would go with
document.getElementById('test').setAttribute('readonly', 'readOnly');
But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>testcase</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="some container">
<input id="test" type="text" value="text" />
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById('test').setAttribute('readonly', 'readOnly');
</script>
</body>
</html>
If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.
And please. Stop using JS libraries to do the most basic things.
you are missing
$(document).ready(function() {
$('#test').attr('readonly', 'readonly');
});
sample
http://fiddle.jshell.net/Pe4J5/