I am newbie to jQuery,
can someone explain what this code does:
$("#currency form").submit(function(e) {
triggers.eq(1).overlay().close();
return e.preventDefault();
});
The first line begins a function that handles the submit event of all form tag(s) in the element with ID currency.
Documentation: Selectors, submit event
The second line closes an overlay in the second element in the triggers variable.
Documentation: eq method, overlay plugin
The third line tries to prevent the submit, but isn't completely correct. (It should be e.preventDefault(); and/or return false;)
Documentation: event.preventDefault, event handlers
triggers = a jQuery object
triggers.eq(1) = get the second element from the matched elements inside the jquery object
triggers.eq(1).overlay() = get the overlay instance (a plugin) on the second element
triggers.eq(1).overlay().close() = close the overlay.
return e.preventDefault(); = prevent the default action (form submission)
On the submit event of the form, it will:
Get the second element in the triggers collection (of jQuery elements).
Get the overlay on that element.
Close that overlay.
Prevent the submit event from bubbling to the parent handler.
Related
I'm curious if there is a way to add event listeners to form fields which are dynamic and not present at page load? My issue is I'm working with a form which is dynamic and changes based on selections made. The issue is, I need to attach event listeners to specific fields in the form but on page load, not all these form elements exist? For example, the dropdown below will always exist on the page:
`var employmentStatusSelect = document.getElementById('mainForm:cont_appRequestStatus');
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);`
but the next field will show if there is a specific selection from above element
var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
Since it doesn't exist when the page loads, I can't attach an event listener to it and the above code throws an error. Is there any way to attach the event listener to the 2nd element once it appears? JavaScript only, please! * I cannot make changes to the form or page and can only inject my code via a Tag Management system *
Update a better way. Turn out if you add a blur event listener to form, all input element will trigger that event too. https://developer.mozilla.org/en-US/docs/Web/Events/blur
var form = document.getElementById('mainForm');
form.addEventListener('blur', function( event ) {
if(event.target.matches('#cont_appRequeststart_job')){
console.log('blur event triggered');
}
}, true);
// add input
var input = document.createElement('input');
input.id = 'cont_appRequeststart_job';
form.appendChild(input)
<form id="mainForm">
</form>
You can keep trying every 0.5s until the element exists. Not recommended.
function tryBindEvent(){
var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
if(startCurrentJobInput){
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
}else{
setTimeout(tryBindEvent, 500);
}
}
tryBindEvent();
You can attach a event listener on the document body and check the element type inside the callback and do the modifications.
document.addEventListener('change', function(e) {
if(e.target && e.target.id === 'mainForm:cont_appRequeststart_job') {
//do something
}
});
First of all, if you share more codes, you may get better help. But, I guess what you should do is to run a function (I will call it assign() for now) to assign a value to startCurrentJobInput when employmentStatusSelect has a value.
So, I recommend you to define startCurrentJobInput variable globally like this (I guess you would need it globally to use in other funcs):
var startCurrentJobInput;
And do not add event listener yet. Then, when employmentStatusSelect is selected and new form element created, run assign func to assign document.getElementById('mainForm:cont_appRequeststart_job') to startCurrentJobInput. Then, you can add event listener to it with:
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
I have two buttons using javascript.
First creates text and removes the link and Second creates link and removes the text
Can a click on the link change the text? When they are on a page at the same time it works.
Otherwise it does not.
Yes it can change the text.
Any event on most HTML elements can have their default action overridden.
Having the onclick event object you should use event.preventDefault() to cancel the default action.
An example:
document.getElementById("my-link-element").addEventListener("click", function(event) {
event.preventDefault();
// and here change the text ..
});
Some code that looks like the following is firing the click event via the Enter key, but is not responding to the mouse click.
//a is an anchor element
a.addEventListener('click', function (e)
{
//Do Stuff...
});
This page demonstrates the problem. The relevant bit of code is at line 176. This is in the middle of development and currently only (sort of) works in Chrome.
Also, I just verified that it works if I use mousedown, so it's not just the case of an invisible element sitting in front of the anchor.
Any ideas?
Edit: Now that you've shown us the actual code you're using, the problem is related to the fact that the autoSuggest() function has it's own click handler and in that click handler, it is clearing the container which removes all <a> elements in the container so your link object gets destroyed (probably before your click event gets to process). So, you can get events that happen before the click (like mousedown), but after a click, the element is removed from the DOM.
If you tell us what you're trying to actually do when an auto-suggest item is clicked that is different than the default behavior of the autoSuggest() function and you point to any documentation for that function, then perhaps we could offer a better way to solve your issue.
The link may be firing and taking you off to a new page (or reloading the current page), thus preventing you from seeing the click code run. Usually when you process a click event on a link element, you need to prevent the default behavior:
//a is an anchor element
a.addEventListener('click', function (e) {
e.preventDefault();
//Do Stuff...
});
Another possibility is that you are trying to install the event handler too soon either before the DOM has been loaded or before this particular link has been created and thus no actual click event handler is attached to the DOM object. You can verify whether the event handler is even getting called by temporarily putting an alert("Click handler called"); in the event handler and see if that pops up or not.
https://dl.dropboxusercontent.com/u/63617776/Capture.PNG
So as on the image, when you click on the map, a div is changed. Now when I click on a link in the div, I want the google maps div to change to another map.
But, the code I wrote either doesn't trigger at all or it triggers when I click anywhere on the page.
$('#nowydwor').ready(function(){
$(this).click(function(){
alert('foo');
});
});
Ofcourse the link looks like this:
{a id="nowydwor"} text {/a} (for some reason i couldn't enter < so I replaced it with {)
This triggers when user clicks anywhere on the page, for some reason. Also this is only a testcode for now, it is meant to display the alert. :) Any ideas?
EDIT: The link is contained in .html(), in a switch() statement.
case '#mazowieckie':
$('#info').html("CONTENT </h5><hr><strong><a id='nowydwor'>Skład Nowy Dwór Mazowiecki</a></strong> CONTENT");
break;
Calling ready only makes sense if you call it on the document/window to get notified as soon as the DOM is ready.
Try to bind the click handler on your DOM element directly:
$('#nowydwor').on('click', function(){
alert('foo');
});
I think what you were trying to do, is assign the click handler after the content of #info has changed. Unfortunately .ready() is only an event handler for the document ready event. It only fires once. Also changing the html of '#info' isn't triggering any events (IMHO).
You can work around this, using the .on-method on a parent element. Consider this html structure:
<div id="info">
<!-- This content is dynamically loaded -->
<a id="nowydwor">Click this to change map</a>
<!-- End of dynamic content -->
</div>
This makes it possible to call:
$('#info').on('click', '#nowydwor', function(){ /* Change map here... */ })
This assigns the event handler to #info, which is only called if the clicked element matches '#nowydwor'. Since '#info' is never removed, only the content changes, you don't have to apply it again.
The only point is, you have to determine what the id of the map/place is, because the event handler will be the same for all links.
I've got an onsubmit handler added to a form like so:
$('#content_form').bind('submit',function(e) {
source = $(e.target).attr('name');
alert(source);
return false;
});
so e.target = the form element. I'm using several submit buttons, and need to determine which one was actually clicked (in modern browsers, that clicked button is the only one that submits, I'm doing this for IE6 compat - it submits the values of all the buttons).
My only thought it to kill any onsubmit events, and then tie click events to the buttons themselves. This would kill the form functionality entirely if javascript wasn't enabled, so I'd like to avoid this.
An easy (but possibly naive) implementation would be to have the onclick handler for each button set a field indicating which one was the last one clicked. In your submit handler, you could then check the value of this field.
$('#content_form input:submit').bind('click', function(e) {
$('#content_form').submit();
// you can now reference this or $(this),
// which should contain a reference to your button
});
Have you checked out the jQuery Form Plugin? It handles submitting forms via ajax very nicely and will handle this problem (along with many others) for you.
Something else you could do is use preventDefault(); instead of return false