I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>
Related
I was trying to make a play-pause button using jQuery but the mouse click event is not being captured. I am trying to remove and add font-awesome class on each click such that it can change its icon.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycarousel").carousel({interval: 2000});
console.log("document is ready");
$("#mycarousel").on("click", "#carouselButton", function(e) {
e.preventDefault(); //added after reading from one of the answers on stackoverflow
console.log("this is a click!");
if ($("#carouselButton").children("span").hasClass("fa-pause")) {
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass("fa-pause");
$("#carouselButton").children("span").addClass("fa-play");
}
else if($("#carouselButton").children("span").hasClass("fa-play")) {
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass("fa-play");
$("#carouselButton").children("span").addClass("fa-pause");
}
// return false;
});
});
</script>
</head>
<body>
<div id="mycarousel">
.......
<button type="button" id="carouselButton" class="btn btn-danger btn-sm" >
<span class="fa fa-pause"></span>
</button>
</div>
</body>
At the console I am only getting "document is ready" as output.
I also tried using $("#carouselButton").click(function() {...}); instead of $("#mycarousel").on("click", "#carouselButton", function() {...}); but the button didn't budged at all.
I tested it on edge and chrome after disabling caching on browser.
Any body has any suggestions how can I make this work or where am I going wrong?
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
This page: http://rippertshirts.co.uk/products/bazinga-t-shirt-brand-new-funny-geeky-big-bang-theory-ripper-s-m-l-xl/
I cannot add an item to the cart in Google Chrome.
Here is the input:
<input type="submit" value="Add to Cart" class="Cart66ButtonPrimary purAddToCart" name="addToCart_68" id="addToCart_68" disabled="disabled">
Can anyone think of a reason for this? Could it be the disabled="disabled feature"
I tried adding this to my header.php but no luck :(
<script type="text/javascript">
jQuery(document).ready(function(){
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input").removeAttr("disabled");
return(true);
});
});
</script>
Try to wrap your code inside DOM ready handler since you'are putting your jQuery code in the <head> section of your page:
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input:text").removeAttr("disabled");
return(true);
});
});
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.
you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.