Change your code to
$(function(){ // this will be called when the DOM is ready
$('#searchInput').keyup(function() {
alert('Handler for .keyup() called.');
});
});
to ensure the DOM element exists when you build the jQuery set.
Answer from Denys Séguret on Stack OverflowChange your code to
$(function(){ // this will be called when the DOM is ready
$('#searchInput').keyup(function() {
alert('Handler for .keyup() called.');
});
});
to ensure the DOM element exists when you build the jQuery set.
$(document).ready(function() {
$('#searchInput').keyup(function() {
alert('Handler for .keyup() called.');
});
});
Or
$(function() {
$('#searchInput').keyup(function() {
alert('Handler for .keyup() called.');
});
});
You're using JQuery before declaring jQuery.noConflict();
Also, this statement replace the $ variable by jQuery.
And finally, as Rahul just said in his answer, Salesforce add a prefix to the ids declared on your VF page.
So you should use:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("input[id$='firstName']").keyup(function(){
alert("first Name");
});
});
</script>
In Salesforce, for visualforce components the HTML Id gets generated dynamically.
So you have to use ends with selector or use a class which is cleaner.
In your example, Try replacing:
$("firstName")
With:
$("input[id$='firstName']")
// or with
='firstName']")
Your script should be:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("firstName").keyup(function(){
alert("first Name");
});
});
</script>
Refer this documentation to learn proper of use of noConflict() method.
Issues with your code:
- Improper use of jQuery.noConflict() - thanks @Martin Lezer for identifying this.
- Missed closing ready function - This is why indentation matters!
- Accessing Visualforce component with starts with selector or use a CSS class.
If you are dynamically changing elements in the dom - it is best to delegate the event to an existing parent in the dom
$(document).ready(function(){
$('body').on("keyup",'.incomplete_required', function(){
console.log('keyed');
});
});
Obviously replacing body with the closest parent element that exists on dom ready
By delegating - the event will bubble up to the "parent" element - which is where the event is handled
Seeing this works before the submit I think you are loosing the event bindings as the elements are re-rendered but the document ready event is not firing again.
A dynamic binding solution may be required here:
$(document).ready(function(){
$(document).on('keyup', '.incomplete_required', function(){
console.log('keyed');
});
});
Mind you, document is very far up so the closest static element will be better off course.
Also the url in the ajax call does not support ~/. You need to use razor syntax to generate, or the best sotionis to set the base href in html
Your HTML is malformed (your GetKey function call is using double quotes inside double quotes). That is causing issues potentially but since you're using Razor I haven't tested it. Your initial function is trying to hook up the event before the element is even defined so that would fail as well. The browser's console window should be showing you errors for these.
Here's the simplest equivalent code to do what you want.
-
Search
Apart from a typo around your missing }, when your script.js file runs (in the <head> section), the rest of your document does not exist. The easiest way to work around this is to wrap your script in a document ready handler, eg
jQuery(function($) {
$('#workerID').on('keyup', function() {
alert('key up');
});
});
Alternatively, you could move your script to the bottom of the document, eg
<script src="js/scripts.js"></script>
</body>
</html>
or use event delegation which allows you to bind events to a parent element (or the document), eg
$(document).on('keyup', '#workerID', function() {
alert('key up');
});
You're missing the curly bracket to close the function:
$('#workerID').keyup(function() {
alert('key up');
});
Errors like these are usually seen in the browser's JavaScript console.
Try this delegate on document or closest static element. (If the element is added dynamically)
$(document).on('keyup','#txtSearchUser',function(){
//Code
});
it works :
$(document).ready(function(){
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
else
alert('cucu');
});
});
http://jsfiddle.net/jMk5S/
check if you're referencing your html element properly. Perhaps you mix id with the class?
<td id="price"> is a table cell and as such, you cannot access its value as you are trying to do here
var price = parseInt($('#price').val());
.val() method is intended for input, select, and textarea elements, not td elements. You have a couple of options based on what you actually want to do. I suggest using .text instead of .val().
Also, it is good to note that you need to call .keyup() only after the element #num has loaded. To guarantee this, use $(document).ready(). Full javascript code is as follows:
$(document).ready(function(){
$('#num').keyup(function(){
var price = parseInt($('#price').text());
var num = parseInt($('#num').val());
price = price * num;
$('#total').html(price);
});
});
try wrap you event function in $(document).ready(), or move them in footer area.