JQuery onclick do something ... after click alert - javascript

I am using this code:
onclick="$('#default').click();" ... is there any way to return an alert of something if it's done sucessfully?
Update:
There seems to be a proble here:
onclick="$('#default').click( function() { alert('clicked'); });"

That syntax is a bit off. Usually you'd use jQuery's click() like this:
HTML:
<a id="something">Text</a>
JavaScript:
$('#something').click( function() { alert('clicked'); });
Update:
Even your updated code seems to work, but it is very bad code like that - you might have some error somewhere else in your javascript, or in the DOM structure. See http://jsfiddle.net/HCQeN/1/
It would be much better to seperate the jquery from the onclick, like: http://jsfiddle.net/ctUgp/

Lets say your example is:
<input type="button" id="myButton" onClick="$('#default').click()" />
What you want is:
<input type="button" id="myButton" />
<script type="text/javascript">
$(document).ready(function(){
// this code will run when the document has loaded
// and all elements are in place
$("#myButton").click(function(){
// this code will be run when the user clicks on
// the button we created above
$('#default').click(); // this calls the click event on #default
alert('Finished'); // now it is finished
}); // close the click handler on #myButton
$('#default').click(function(){
// this code will be run when the user click on
// the element with id "default" OR (in this case)
// when the click event is triggered from clicking the
// button above.
alert('#default was clicked');
}); // close the click handler on #default
}); // close the document.ready code block.
</script>

just like this
$('#default').click( function() {
alert('Handler for .click() called.');
} );

Try:
onclick="$('#default').click(function() { alert('foobar'); });"

Related

Trigger working only after alert inside document ready

I have this code:
$(document).ready(function () {
active_menu('mn_tours');
$('#buscar').val(localStorage.getItem("busqueda"));
$('#btbuscar').trigger('click');
});
I want to trigger the submit event on that button right away when page loads, but it doesn't seem to work, but when I put this:
$(document).ready(function () {
active_menu('mn_tours');
$('#buscar').val(localStorage.getItem("busqueda"));
alert('Something');
$('#btbuscar').trigger('click');
});
It actually works, but I don't know how to correct this.
With preliminary testing, this code works...
<form id="myForm" action="#" method="POST">
<input type="text" id="buscar"/>
</form>
<div id="btbuscar">
help
</div>
$(document).ready(function () {
$('#buscar').val(localStorage.getItem("busqueda"));
$("#btbuscar").bind('click', function(evt){
$("#myForm").submit()
})
$("#myForm").bind('submit', function(evt){
alert("form submitted")
})
$('#btbuscar').trigger('click');
});
without seeing your original button listener assignments, I can't tell if this is exactly what you want, but provided the listeners are set properly, this method will work.
You have a timming problem. When javascript run this:
$('#btbuscar').trigger('click');
the HTML element doesnt exist yet, so the submit never happen.
Alert will pause the javascript execution. So when you click OK, the HTML element #btbuscar is already loaded on page and the submit work.
It's not safe, but you can use setTimeout
$(document).ready(function () {
active_menu('mn_tours');
setTimeout(function(){
$('#buscar').val(localStorage.getItem("busqueda"));
$('#btbuscar').trigger('click');
},1000);
});

Trigger click after load page

I'm working with a wordpress theme and I need to activate a button when the page loads, but none of the following has worked for me (my button has the ID "reset"):
$(document).ready(function() {
$("#reset")[0].click();
});
--
$(document).ready(function(){
$("#reset").click();
})
--
$(window).load(function(){
$('#reset').click();
});
I put the code in the header or in the page where i need to activate the button, but does not work.
Thanks!
I give you example here
$(document).ready(function(){
$("#reset").click();
})
the code above should work.
JavaScript does not allow seamless programmatic triggering of an actual click event.
What you could do is
declare the click callback as a separate, named function
e.g.
function myClickCallback(e) {
// Do stuff here
}
Set this as the click callback of your button (e.g. $('#reset').on('click', myClickCallback)).
Invoke the callback when the page loads (e.g. $(document).ready(myClickCallback);)
I am not sure why you 'd want this functionality, since it sounds weird. From reading your description, by "activating", you could also mean enabling the button. To do that you should do something like the following
$(document).on('ready', function (e){
$('#reset').removeAttr('disabled');
});
You may need to refer to it using jQuery instead of $:
The jQuery library included with WordPress is set to the noConflict() mode...
https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
$(document).ready(function(){
$("#reset").trigger('click');
});
Use the function Trigger with the event click
$(document).ready(function(){
$("#reset").trigger('click');
});
This what works for me:
$(function () {
$('#btnUpdatePosition').click();
});
On the button event, the JQuery binding event doesn't work:
$('#btnUpdatePosition').click(function () {
alert('test again');
});
But it works when I added the event on attribute declaration:
<input type="button" value="Update" id="btnUpdatePosition" onclick="alert('Click has been called')" />
You can also call if you have a function on element:
<input type="button" value="Update" id="btnUpdatePosition" onclick="fncShow();" />

Jquery click function not triggering a click

I have this simple HTML page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
$(document).ready(function () {
$('#test').click();
});
</script>
</head>
<body>
<a id="test" href="http://google.com">http://google.com</a>
</body>
</html>
I want to trigger a click event on the element called test on loading the page. The actual code is actually more sophisticated than that but this very basic example is not working. I checked the console log and there are no notices there.
You need to use to trigger the DOM element click
$('#test').get(0).click();
Use .get(), It retrieve the DOM elements matched by the jQuery object. As .click() will trigger the element click event handler. It will not actually click the element.
Using simple Vanialla JS
document.getElementById('test').click()
DEMO
.click() doesn't actually send a click event.
What .click() does is define something that happens when you click on the element.
The .click() you are triggering is correct but you are missing a click event for '#test' as shown :
$('#test').click(function(){
alert('here');
});
Now your complete jquery code is as shown :
<script>
$(document).ready(function () {
$('#test').click(); //or $('#test').trigger('click');
$('#test').click(function(e){
e.preventDefault();
alert('here');
window.location.href = $(this).attr('href'); //redirect to specified href
});
});
</script>
Your #test link should be bound to a function, eg:
$(document).ready(function () {
//do something on test click
$('#test').on("click", alert());
//click test
$('#test').click();
});
http://jsfiddle.net/ub8unn2b/
Here click event is triggered i.e. click event is fired on page load but you can not load href by just triggering the click event,for that you can use
window.location.href = "http://www.google.com";

Javascript change onmouseover to click

I have this working code, I need to change to a click instead of mouseover:
var l1OK_WC = false;
var l2OK_WC = false;
function share()
{
alert('yo');
}
function getIt_wc()
{
if(l1OK_WC && l2OK_WC)
window.open('http://google.ca','_self');
if(!l1OK_WC)
alert("Click button one");
else if(!l2OK_WC)
alert("Click Button two");
}
After this, I have this code:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
How do I change this part into a click instead of onmouseover.
So they need to click instead of onmouseover.
I have tried changing to onclick but the script does not work anymore. It stays false and always displays the message of "click button one"
Unless I'm misunderstanding, it's just this simple...
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"
You can change the HTML attribute to onclick, but that's not really best practice. Instead, why not attach an event handler to the elements in question?
Something along the lines of:
// Assuming you've already grabbed the elements and put them in the variable `myElements`
myElements.addEventListener('click', function() {
l10K_WC = true;
});
This lets you centralize your code (so you only need to make one change, instead of many throughout your HTML, as well as helps caching. For more information, see here: https://softwareengineering.stackexchange.com/a/86595/54164
Replace:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
by
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"
For more info see:
onClick and onMouseOver
Using an event listener:
<input type="button" value="Button 1" id="myButton1"/>
<input type="button" value="Button 2" id="myButton2"/>
<script>
myButton2.addEventListener("click", function() { alert('button 1 clicked!'; }, false);
myButton2.addEventListener("click", function() { alert('button 2 clicked!'; }, false);
</script>
You can use either the HTML this way:
your-element onclick="JavaScript code"
or use JavaScript to fire it...
object.onclick=function(){JavaScript Code};
If it's in a button you will have to wrap the button around it :-)
Hope this helps...

Image not clickable after loaded via AJAX

I have a set of images that are loaded via jQuery AJAX. For some reason, my click handler won't trigger when it is clicked.
JavaScript:
$(document).ready(function()
{
$('img.delete_related_sub').click(function()
{
alert('testing');
});
//I added this part to test, because the above wasn't working...
$(document).click(function(event)
{
alert(event.target.tagName+' '+event.target.className);
});
});
HTML:
<img data-rsid="2" class="delete_related_sub" src="image.png" />
So my 2nd click handler alerts me with "IMG delete_related_sub". But the first one isn't triggered. The is actually in a table that is actually in a pane run by bootstrap tabs, not sure if that'd actually help though.
Try it like this
$(document).on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Just replace document with a static parent of your image.
Use this:
$("body").on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Or, in the success: give this:
$('img.delete_related_sub').click(function() {
alert('testing');
});
Because the line to bind the event runs before the element is added, try using
$(parent).on('click', 'img.delete_related_sub', function() {});
where the parent is a static element that will be there for sure. This works because the event is bound to an element that actually exists, then checks to match your selector. See .on() for more details.
Something like
$(document).on('click', 'img.delete_related_sub', function() {});
would work fine.
$('.delete_related_sub').live("click", function()
{
alert('testing');
});
Use live event to listen clicks

Categories

Resources