Javascript - how does this button fires something? - javascript

Javascript is not my speciality.
I have a page that contains an image. This image, when clicked, fires an Ajax code, that shows a floating box. Analyzing the page code, I don't see how this button can fire the code.
The button is declared like this:
<div class="leaderboard-text">
<span id="addon-add-language-button">
<image class="ajaxListAddButtonEnabled" listId="localizationList"
src="/itc/images/blue-add-language-button.png" />
<image class="ajaxListAddButtonDisabled" listId="localizationList"
style="display:none;"
src="/itc/images/blue-add-language-button-disabled.png" />
</span>
</div>
just after this code, I see this var being declared:
<script language = "Javascript">
var createList_localizationList = function() {
var reorderEnabled = false;
var preventLastRowDeletion = false;
var searchEnabled = false;
var list = new LCAjaxList();
list.initialize():
}
document.observe("dom:loaded", createList_localizationList);
</script>
As far as I see, the image is firing somehow this javascript, but how can the button do that if there's no "onclick" or href reference tied to it? Where is the line that tells which method should run when the image is clicked?
What should I look on the code to get a clue how this button works?
What I need is to fire the method used by this button using javascript.
any clues?
================
after reading all that you guys have written, I have used Safari's Inspect Element and identified this listener attached to the object:
is this of any help? Now the question: how do I fire the method associated with this image from javascript? Thanks guys.

My guess is that it's either one of the two statements
var list = new LCAjaxList();
list.initialize():
They seem really bad designed. A list object should take a DOM object to act upon. LCAjaxList probably hardcodes the element to bind to.

What you're looking for is .observe. That adds an event listener, so somewhere there may be
$('addon-add-language-button').observe('click', SomeFunction)
Event listeners are the preferred way to handle javascript events, rather than using an HTML onClick.

When the DOM is completely loaded on the page it fires the event listener "createList_localizationList", so there is no need for a user to click on anything. You can add an event liseter to the button for onclick, instead of when the DOM loads with your button.
You could try this:
$('ajaxListAddButtonEnabled').observe('click', createList_localizationList);
I am not sure if that class is used again, but maybe if you add an id to that element (id='someidname') to make sure you are not adding this to another element on the page.

Related

stopping onclick event handler

I have some working code that I'm now using in slightly different context. The working part is that I use objects onclick event to bring up a form to send an e-mail. When this in an HTML page, it works fine. I would have a lot of buttons that look like this:
<button id="mail-c1" onclick="initMailFormButton(this.id, 'someone','somedomain.com','a subject')">Someone's Name</button>
The entire form is created in javascript and has its own submit and cancel buttons but is within the button element. In order to be able to enter data into the form, I need to kill the onclick event then restore it after I've submitted or cancelled the e-mail. The onclick handler starts out with:
function initMailFormButton(mailId, eName, eDomain, eSubject) {
myFormLocation = document.getElementById(mailId);
stopFormClick(myFormLocation);
where the stopFormClick function is:
function stopFormClick(myFormLocation) {
saveOnclick = myFormLocation.onclick;
myFormLocation.onclick = null;
}
This has the bug that it doesn't handle someone opening multiple forms at once, but that's not my immediate concern. I'll fix it outside of this discussion.
The submit and cancel buttons in the generated form both restore the onclick event handler so you can open and close the form multiple times quite happily.
My new case is that I'm generating HTML page from a database. I'm using HTML datasets to store the previously hard-coded information like so:
emailButton.setAttribute("data-mailname", emailName);
emailButton.setAttribute("data-maildomain", emailDomain);
emailButton.addEventListener("click", function() { initMailFormButton(this.id, this.dataset.mailname, this.dataset.maildomain, ""); }, false);
The information being retrieved is correct and the form appears in the correct location. However, I can't enter information because the original onclick handler kicks in when I click in the first form field and generates another form...
The only clue I have is that when I look at the value of the onclick event being saved in the static HTML pages, it has the expected value but it is null in the generated pages. I find this confusing because I am passing the (unique) element id to the routine so it should be getting to the correct element.
Can anyone help me on this one. Meanwhile, I'll fix the event handler bug I mentioned above.
OK. So it's that there is a difference between click and onclick. The onclick event handler wasn't set so it is null. I changed setting the click event listener to setting the onclick attribute as:
emailButton.onclick =
function() { initMailFormButton(this.id, this.dataset.mailname, this.dataset.maildomain, ""); };
and everything works nicely.
To handle the limitation I'd noted earlier, I made the saveOnclick variable into an associative array keyed by the button id. Now people can have as many buttons clicked as they want - although wanting to have more than one is probably rare.

removing dynamic javascript tag does not remove attached events

i'm creating an application where a user can make a html layout and attach javascript to it.
Now i'm trying to make it so when they click a button, they go to a preview mode where they can see it in action.. so when they click i add the javascript tag ( with their javascript) in the head of the iframe.. this all works fine!
But the problem is when they leave the preview mode, i remove the javascript tag, however when i have code like this:
$('#button').click(function()
{
alert("ok");
});
it still alerts ok when i click the html button (when not in previewmode!), which shouldn't happen!
It seems that when removing the javascript tag, the listeners aren't removed.. Or am i doing it wrong?
Now my question: is there a way to make it so these added eventlisterens are removed when i remove the script tag?
AND YES: i know you can remove eventhandlers with .off(), but since i already have event handlers attached, these will be removed also, and i don't want this!
So two options i can think off:
- rebuild the whole iframe
- store the eventhandlers that were added by the user and when leaving the preview mode, removing them.
Thanks in advance
Each time you "evaluate" JavaScript, it becomes part of the browser's "image", and whether the source is present on the page no longer matters. You need to manually unbind the event, or replace the html segment to which the event was bound.
To remove events from an html element, you can use:
element.parentNode.innerHTML = element.parentNode.innerHTML
This rebuilds the DOM tree using the same HTML.
you need to unbind event.
You can do it by using jquery unbind() or off()
like this:
$("#button").unbind("click");
or
$("#button").off("click");
Demo: http://jsfiddle.net/a6NJk/664/
jquery Doc: http://api.jquery.com/off/
Another good answer: Best way to remove an event handler in jQuery?
Set the event:
var $button = $('#button');
$button.on("click", function() {
alert("ok");
});
Take off the event:
$button.off("click");
You can take off that specific function too
var $button = $('#button');
var eventFunction = function() {
alert("ok");
});
// Set event up
$button.on("click", eventFunction);
// Take event off
$button.off("click", eventFunction);
If you want to remove all events from an element you can use
$("#yourSelector").off()
Because it's not jQuery in general but also vanilla javascript, it would be too much work to keep track of javascript changes, so rebuilding the iframe would be the best option here.

Click an html element JS

is it possible to make a javascript to "click" a specific element?
on my page I've got a with a specific id, and I want to make a JS script to click the div on certain event. is there any method like:
document.getElementById("idofdiv").click()?
Yes, it is possible to trigger a click event by javascript.
document.getElementById('element').click();
Or with jQuery:
$('#element').click();
Please note that the click event won't work if you are trying to force a click on an anchor tag which opens a page. There are tricks called as "clickjacking" which you can use to force it, but this way you're cheating the user.
you can do:
document.getElementById("idofdiv").onclick = function() {
//your code here
}
or
document.getElementById("idofdiv").onclick = someFunction;
function someFunction() {
//your code here
}
See:: onclick
http://www.w3schools.com/jsref/met_html_click.asp
I guess you answered your own question.

Need to get first child a and create a click event with the result

I am trying to create a JavaScript program that looks through a DOM to find the first <a href> which is NOT a mailto: - it needs to be a 'real link' and return the href value. I then need the to create a click event with the result.
What I need it for is an HTML encapsulating the author stuff of a post.
This needs to be clickable - but without using the onclick in the markup.
It needs to be an event - invisible in the HTML markup.
The wrapping section should also be clickable, but not be affected by whatever happens in what I described above.
Markup is this:
<section>
<figure>
<img>
</figure>
<div>
<h2>
<p>
</p>
</div>
</section>
/* EDIT */
OK found this.
function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,a‌​rguments):b}
This is the string i get in the Event window in FireBug from the site I'm trying to get this function from. Does anybody understand this? That string is what makes it work. I've just copied the entire js over and it works on my site. But I would like to isolate this particular function since the original file is huge. Anyone?
http://jsfiddle.net/LrgQH/
var links = document.getElementsByTagName('a');
var link, i;
for(i=0; i<links.length; i++) {
link = links[i];
if (link.href.indexOf('mailto:') !== 0) {
break;
}
}
link.onclick = function(e) {
alert('allo');
}
Vanilla JS should work anywhere.
Edit:
http://jsfiddle.net/LrgQH/2/
This should do it, and you'll have to prevent other links to work but it's getting complicated. Keep in mind that in Javascript the event system works by bubbling. The most deep object will get the click event, and then if it can handle it, it will handle it. When handling the event, it can prevent it to go further and the event will not propagate further. If it decide not to block the event, it will go to the parent element and so on until it reaches the HTML element.
If the element cannot handle an event, it will go to the parent automatically until if finds one element that can handle the event. If no element can handle the event, then it will not get handled. I suggest you to read more about it on the w3c website.
http://www.w3schools.com/

possible to detect click on an element using a greasemonkey-type user script?

Let's say I have a greasemonkey-type user script running on a page that has a div such as:
<div id="watchme">something</div>
Is it possible to detect if a user clicks on that div from within the user script? The logical way would be to have an onClick() written into the code, but since this is a user script I don't control the code.
Did you try attaching an event listener?
document.getElementById("watchme").addEventListener("click", yourHandler, false);
Note that assigning the onclick method may not work: see this.
document.getElementById("watchme").onclick = function(){
alert("I've been clicked");
}
That's how you assign the onclick event in js.

Categories