I'm just starting with JQuery and generally web development, so this question might be really easy but I would appreciate your help.
Javascript code:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML button:
<button name="conversion" type="button" id="#convbut">Convert</button>
When clicking Convert button I am not getting alert message.
I don't know what error you have in your console. Make sure you have loaded the jquery library first. I have added full code here so as you haven't and is working great
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button name="conversion" type="button" id="convbut">Convert</button>
<script>
$(document).ready(function(){
$("#convbut").click(function(){
alert( "Handler for .click() called." );
});
});
</script>
</body>
</html>
Your html
<button name="conversion" type="button" id="#convbut">Convert</button>
use this by remove # before id;
<button name="conversion" type="button" id="convbut">Convert</button>
I realized the problem, I need HASH in JQuery before ID name without ID actually having it in index.html
Javascript:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML:
<button name="conversion" type="button" id="convbut">Convert</button>
Related
Using jquery can click based on class and id attributes but can click be invoked based on ref attribute ?
I've based below code on ref="btFirst", but unsure how to access ref.
JSFiddle src:
<button class="ag-paging-button" onclick="alert('Hello world!')" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
$( ".btFirst" ).click(function() {
alert( "Handler for .click() called." );
});
Use CSS attribute selector (nice and thorough CSS Tricks reference):
$('[ref="btFirst"]').on("click", function(e) {
alert( "Handler for .click() called." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button ref="btFirst">Click me</button>
You can use
$('button[ref="btFirst"]').on('click', function(e){
alert('ref button clicked');
});
$('button[ref="btFirst"]').on('click', function(e){
alert('ref button clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="ag-paging-button" onclick="alert('Hello world!')" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
If you want to be more specific:
Html:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button class="ag-paging-button" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
</body>
</html>
jQuery:
$(document).ready(function(){
$( "button.ag-paging-button[ref='btFirst']" ).on('click', function() {
alert( "Handler for .click() called." );
});
});
You dont need to add onclick="alert('Hello world!')" in button tag
Hope this may help you.
I want to trigger click on an icon(image) with specific class/id using onclick (or using any other way) of another button. Please see image for reference. Clicking "1" should trigger "2". Currently I am calling a javascript function "launchTopWM" which use following code to trigger click:
$(".custom_toggle_menu_default").trigger("click");
But i am wondering if i can call this code or perform this fucntionality using its click etc, something like href='javascript:$(".custom_toggle_menu_default").trigger("click");'
Following is the Code:
HTML 1:
<img class="custom_toggle_menu_default" src="cc/tt/uu/images/launchTopWM.png">
HTML 2:
<a id="tsp" class="sp" href="launchTopWM()">CNw</a>
Give an id to the element and show the second anchor through pure javascript.
<!DOCTPE html>
<html>
<head>
<title> Button style </title>
<style>
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="getElementById('button').click()" > click me </a>
<button id="button"> Buton </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#button').click(function(){
alert('Buttons has been clicked');
});
</script>
</body>
</html>
Trigger example, Hope it will give you the idea
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triggger</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="tiggerCall">Trigger Focus</button>
<input type="text" placeholder="Onclick Call Focus" value=''>
<script>
$( "#tiggerCall" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "input" ).focus(function() {
$( "<span>Text box clicked</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
I'm having an issue using jQuery 1.4.2 .delegate function with IE 9. I would love to use the latest version of jQuery and just use the .on function but I am forced to use 1.4.2 due to a vendor product.
My goal is to have a function fire off when the text field changes. So if it's empty and it gets set to "test" then a function will run.
Here's what I'm trying to do, the alert never shows...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result);
}
$("body").delegate("#txtTest", "change",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
I have also tried using myCustomEvent:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result).trigger("myCustomEvent");
}
$("body").delegate("#txtTest", "myCustomEvent",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
Thanks in advance
The problem is that you named your submit button "Submit". This is a no-no for HTML!! Browsers default to using internal submit functions when buttons are named submit. see [*] below.
Also, a val() inject doesn't trigger the change() event, so we need to call that manually.
Change Submit to xSubmit and trigger the change event at the end of the chain manually and it works. It should also be in a dom ready wrapper:
html
Test: <input type="text" id="txtTest"/><br />
<input type="button" value="Test" name="xSubmit" id="btnTest" onclick="test('testing the call')" />
js
$(function() {
$("body").delegate("#txtTest", "change", function() {
alert( "Handler for .change() called." );
});
});
function test(result) {
$("#txtTest").val($("#txtTest").val() + result).change();
}
demo:
http://jsfiddle.net/at7eoarL/1/
Further Reading: * - https://issues.apache.org/jira/browse/TAP5-947
I have this java script function:
function copyToClipboardCrossbrowser2(text) {
alert(text);
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: text
});
}
when I make path: js/ZeroClipboard.swf , google chrome tells me that this file is not exist. but when I put the / it doesn't tell me that it is not working. so the swf is installed.
the alter is printing the correct value. but the copy is not working.
why please?
I already include these:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.zclip.js"></script>
Note
In another project, I am working with this library, which means my flash player is working
This is the html of the button that has the id Button
<button type="button" id="Button1" class="copyToBtn" onclick="copyToClipboardCrossbrowser2('00971509396782',this);" title="Copy">
Copy Phone Number</button>
I am working asp.net
and this is the code of the button
<button type="button" id="Button1" class="copyToBtn" type="button" onclick="copyToClipboardCrossbrowser2('<%#Eval("Telephone")%>',this);"
title="Copy">
Copy Phone Number</button>
The id is not changing that is why I gave you the html
js fiddle:
http://jsfiddle.net/6HPuC/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<title>Test</title>
</head>
<script>
$(function() {
$("#Button1").zclip({
path: 'http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/ZeroClipboard.swf',
copy: function() {
return $(this).data("copy");
}
});
});
</script>
</head>
<body>
<button type="button" data-copy="<%#Eval('Telephone')%>" id="Button1" class="copyToBtn" title="Copy">Copy Phone Number</button>
</body>
</html>
In your code you have used on button click event to bind zClip with button which is Wrong.
When you attach ZClip to button it will automatically handles OnClick event, no need to write on button event
Below is your modified code
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: $('#Button1').attr('data-copy')
});
});
</script>
And button event will be as below:
<button type="button" id="Button1" class="copyToBtn" data-copy="<%#Eval('Telephone')%>" title="Copy">
Copy Phone Number</button>