Calling a greasemonkey function on a user clicking a button - javascript

I have written a script that adds an additional column and a link in each row. The problem is I wan the links to call a function in my greasemonkey script and pass a variable to it.
I have read that due to the nature of greasemonkey being in a sandbox its not possible without a function called 'unsafeWindow'. I can't for the life of me figure out how and a lot of the information seems to be out of date.
Please someone put me out of my misery :)

The exact approach depends on details that are not in the question. You might need to post the code and exactly what variable you want passed.
But, in general, you could do something like this:
NewlyAddedLink.addEventListener ("click", function() {YourFunc (SomeGlobalVariable);}, false);
You don't necessarily have to worry about unsafeWindow.

Related

"Next" button does not cycle through answers as expected

I'm trying to build a very basic, pure JavaScript app (no jQuery).
Using jQuery I feel like I'd be able to do this easily. But JavaScript not so much.
Here is my JSF app:
http://jsfiddle.net/abustamam/CLenJ/2/
So the purpose is for the question and its accompanying answers to be cycled through when the "Next" button is pressed.
Problem is, nothing happens when "next" is pressed. Even if I set the next() function to be something like
function next() {
alert("pressed!");
}
nothing happens.
At the suggestion of another question, I changed the "onLoad" into No wrap - in head.
At this point, the question and values are not initially loaded.
On looking at the console errors, it seems like the load order plays a big difference on whether or not the button works, or whether or not the first question will load, but I can't find a way to get them both work concurrently.
Can someone shed some light? Thanks!
In the fiddle, your script was under the load callback which means the next method is inside a closure so it is not available in the global scope.
If you look at the browser console you could see a script error saying Uncaught ReferenceError: next is not defined
In the left hand side panel in the second dropdown under Frameworks and Extensions select No Wrap - In Body
Demo: Fiddle

setTimeout not executing the passed function

I'm working on a simple interface for testers to use, which I'm writing as an HTML page. What I need to do is open a specific URL when the user presses a button (the URL triggers a Hudson/Jenkins job on another server). Here is the code I'm using to accomplish this:
function triggerJob() {
var url = "...";
var trigger = window.open(url);
setTimeout(function() {trigger.close();}, 1000);
}
A couple of notes:
I know this a bad way of accomplishing what I want to do. I have already implemented the solution using jQuery, and for some reason the job on the Hudson server does not get kicked off when querying the URL in that way. The weird thing is that when I query it using a Ruby script from the same machine, it works just fine.
I have to do the timeout because if I just open the window then immediately close it, the browser does what it is supposed to, but it's too quick for the Hudson server to register it and start the job.
I have tried putting other statements besides trigger.close(); inside the anonymous function, and they are not executed either. There is no question that setTimeout is not executing the block it is supposed to be.
Thank you for any help you may be able to give me. I have been toying with this for hours and cannot figure out why my code is not doing the timeout right.
figured out this problem in the course of doing something else, so I thought I'd share the solution in case anyone else has the same problem. The issue was that I was calling this function using the onClick attribute of a submit button in a form. When the form is submitted it calls the function, and then the page is immediately reloaded after the function executes, which cancels the timeout that was set in the triggerJob function. You must use a link, radio button, etc. if you want to use setTimeout in this manner. Thanks for everyone who tried to help me.
Drew

Can't locate a hiding JavaScript function

I have a weird one here. I am working on a JSF2 (Java) based system using Primefaces component library (not sure its relevancy), and I have a number of buttons that execute a JavaScript function called checkParams() on a onclick event. I need to edit this function to reivew its code and adapt it to some newly added components but I cannot for the life of me actually find the JavaScript function. I am working in NetBeans & I have performed a project search for this function and the only search results returned are the button references to this component. Similarly I have done a search for the function in Google Chrome's developer console, which again only returned the button references. I have also tried creating a quick dirty function that calls an alert(checkParams()); on the body load, but Chromes console tells me the function is undefined.
However the buttons work perfectly, checking various input boxes and submitting the information to the backing Java files...
Does anyone have any idea where this function may be hiding or how I can locate it?
It might be contained in a JavaScript Closure in a script file that is executed and then removed from the DOM. It would be a neat trick to 'hide' it a little bit. But, that is only if the checkParams() in the onclick is not in the onclick attribute. It would have to be assigned in JavaScript.
If this is the case, you would want to see what scripts are loaded initially, and look through those. Also, this is a lot of effort to hide a function for your own site unless you're trying to make sure people don't see how you are validating your parameters. There are ways to obfuscate it to assign the function without having it defined by name directly in the file, but, again, that is a lot of effort.
Outside of the above, I'm not sure there is a lot I can say for finding it. But I'm not sure that this is actually the case. One thing to note is that alert(checkParams()) will alert the return value, which means the function could be defined. Try running alert ( typeof ( checkParams ) ) instead. If that is undefined, than your function doesn't exist. If its not, you can also do console.log(checkParams) which should output the toString() of the function, which will often show you the code.

Javascript how do I find what function call resulted in a specific UI event?

I want to find out what triggered an event. Namely, the notification bar on this site stackoverflow.com (the bar that tells you when someone has posted an answer to a question you're writing an answer on. It scrolls down slowly from the top and provides a really nice UI for user notifications. I've seen it work on just about ever page.
I imagine it working something (I need to find its name):
special_notification( message );
In the abstract, how do I go about finding out what the call (function name and arguments) looks like that generates that effect when all of the javascript is minified, and I have no idea what include provided it.
Download and install firebug in Firefox.
Go to the URL you're interested in, and open firebug. You might need to reload the page.
Now click on the little arrow icon on the top right hand side of firebug. This will let you highlight any element on the page and provide the corresponding HTML to that element.
Now that you have the id of the element, you should be able to find it in the javascript code. Even if it's minified, the name needs to correspond the DOM name.
To read minified js, you can use a tool like http://jsbeautifier.org.
Regarding your other concern, you want to listen to all the events on a page and know what triggered them and what is the code executed? is that correct?
Update:
There is no way to listen to all the events. If you really need to, you can set up listeners for every event, but you will still miss the custom events, which i guess are what you are after.
I'd suggest you inspect the code using Firebug to learn how the events are used in each case.
You can also listen to all the DOM Events, in jQuery you will do:
$('body').bind('DOMSubtreeModified', function(e){
console.log('DOMSubtreeModified triggered');
console.log(e); //Firebug console.
});
Where e will hold the event information.
Hope that makes sense.

How do I do ajax navigation on pageload?

I have a page with several reports that are produced via ajax calls. I am prototype.js framework on this page for some of the display functions.
The links for each report have anchors/tags like #Report1, #Report2 etc, which are hrefs with onClick functions that do lots of work to create the report via javascript.
I would like to make it so if a user bookmarks a page with a link or navigates directly with a anchor/link in the url for my page to load the report.
So if the user goes to : http://mysite/myPage.jsp#Report2 it should load the page and go to the 2nd report.
Is there anyway in my pageload I can look at the anchor/link and perform the onlcick for that anchor? I was thinking I could create a big case/if statement to figure out what to do, but maybe there was an easier way.
It all depends on how you're Ajax calls are structured really. I do something similar for opening the correct tab within a tab navigation. The code would start off like this, if you let me see how your Ajax events are hooked up then i should be able to show you the rest.
document.observe("dom:loaded", function() {
if(window.location.hash){
var report = window.location.hash.replace("#","");
}
});
EDIT
Looking at your code you would be much better off (imv) switching to an unobtrusive method where you attach events to your elements e.g.
$('ele').observe('click',doStuff.bindAsEventListener($('ele')));
This would enable you to more easily connect the same functionality to a click or a pageload but is also better practice anyway and would prevent code duplication etc. Obviously this is missing large chunks but hopefully you get what i mean

Categories

Resources