I had a problem with a vb.net webpage which I solved by commenting out a .Focus() in the page_load. The customer however, will not receive this amendment until next release.
My question is, is it possible to achieve the same result using jquery through an external js file. ie. I would like to know if I can 'bypass' the '.Focus()' line in the page_load by using some kind of jquery wizardry?
I'm guessing that the answer will be 'no', however I'm still hopeful! :-)
Thank you for your time.
If you have the id of the control (or name) you can set focus to it by calling:
$(document).ready(function(){
$('#elementId').focus();
// or
// $('input[name="elementName"]').focus();
}
This will change WHAT is focused, not un-setting focus
If you know the ID of the focused element you can do:
$(document).ready(function(){
$('#elementId').blur();
// or
// $('input[name="elementName"]').blur();
}
to un-focus it.
you could also do:
$(document).ready(function(){
$('input').blur();
}
if you just wanna unset the focus from all/any input
And in my tests this will override asp.net's attempt to set focus (read: asp.net will focus one thing, your script will afterwards focus another thing, so there might be a race for control here, but at least on my page (asp.net c#) and in chrome this works so that the jquery.focus runs last, thus wins :))
Edit/Update:
Should the problem that the control receives focus rather then having focus, you can overwrite the auto_focus function that asp.net uses when you call .Focus() in your code-behind.
For me this works:
WebForm_AutoFocus = function () { };
However this might cause other things to not work (I do not know if this javascript function is used for other things besides setting the .Focus() from your codebehind, but it might be worth trying.)
You should also set this somewhere "late" in your code, eg: after WebForm_AutoFocus is rendered to your page by the asp.net runtime, and where this is done i do not know.
Related
I have a javascript function that does two things:
Changes a table-row background color
Issues a confirm() popup asking user to confirm the delete of the (highlighted) row
It works fine on Firefox. On Chrome, the popup appears. But the background does not change color until AFTER I dismiss the confirm() box which kinda defeats the objective of letting the user know what row is to be deleted.
I'm sure it has to do with the asynchronous nature of javascript. But I need to know how to get around it. Right now, the two lines of code are:
$(icon).closest( "tr" ).css( "background-color", "yellow" );
if ( confirm( message )) {.......}
What do I need to do to make sure the row is yellow while the popup is displayed and doesn't wait to change to yellow until after the popup goes away? I can try delays, etc. But that's grasping at straws. Is there a 'correct' way to handle this?
Again, works fine on Firefox.... nada on Chrome. Haven't tried other browsers.
Thanks.
Jerry
I can try delays, etc. But that's grasping at straws.
Not really.
It's entirely up to the browser when to render things. Each browser engine has its own optimizations. The only way to handle this is a short delay.
One reliable form of delay is requestAnimationFrame(). I think you can be reasonably sure that once this is fired, the browser will have repainted anything previously. Untested, but try something like this:
$(icon).closest('tr').css('background-color', 'yellow');
requestAnimationFrame(function () {
if (confirm(message)) {
}
});
Also note that you don't have any control over where that confirm box appears. It could be on top of your content. It's up to the browser to decide how to present that, whether it be a traditional tool-style window, or a full-screen modal.
I had the same issue. When I showed a confirm dialog in Chrome, my earlier DOM changes were not yet visible. The user needed to see those DOM changes in order to reply to the confirm dialog.
To fix this I used a delay as follows.
function outerFunction() {
console.log("do stuff");
setTimeout(innerFunction, 0);
return;
function innerFunction() {
if (confirm("really?")) {
console.log("do more stuff");
}
}
}
Note that by using a nested function you don't need to pass any parameters.
Note also that the Chromium team highly recommends that you not use JavaScript dialogs--see Chromium policy on JavaScript dialogs
So I recently started working on Greasemonkey scripts without much prior experience in JavaScript. It was going fine until I hit this roadbloack.
I'm writing a script for a page that has a small table of information. If a link at the bottom is clicked, the table expands fully in the page to display all information. I need to call a function in Greasemonkey when this happens, however, the link doesn't appear to have an ID or anything I can actually reference to watch it. It's simply this:
When it's clicked, the table expands and it then shows as true. I initially used the following to expand the table upon loading the page, but that broke several things:
window.location.href = ('javascript: expandFullTable(false)');
I've attempted using "click", "onclick", and even "mouseover" to have Greasemonkey detect when it's pressed but nothing seems to work. From what I can tell it's simply a link that calls a function, but after some significant searching I wasn't able to find out anything about how to reference it in my script. I'm sure it's incredibly simple, but it's frustrated me to no end.
You can hijack the function like this:
var oldExpandFullTable = unsafeWindow.expandFullTable;
unsafeWindow.expandFullTable = function() {
// Do something
alert("You clicked on that thing!");
// Call the original function
oldExpandFullTable.apply(this, arguments);
};
But since you tagged this jquery this should let you retrieve the link:
var link = $("a[href^=\"javascript: expandFullTable\"]);
It should work if jQuery is injected into your script with #require. If it's already in the page, you can add this before to access it: var $ = unsafeWindow.jQuery;.
And by the way, perhaps you should learn more about unsafeWindow to avoid security holes.
I am working on chrome extension for facebook. If you use facebook, you know that when you scroll down to the bottom of the news feed/timeline/profile it shows more posts. The extension actually adds a button beside the "like" button. So I need to check if there are more posts to add that button to.
Right now to check if the page has been modified, I use setInterval(function(){},2000).
I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() – The Koder just now edit
How can I check if the webpage has been modified WITHOUT using a loop?
Example:
$(document).ready(function(){
window.setInterval(function(){
$(".UIActionLinks").find(".dot").css('display','none');
$(".UIActionLinks").find(".taheles_link").css('display','none');
$(".miniActionList").find(".dot").css('display','none');
$(".miniActionList").find(".taheles_link").css('display','none');
//only this function doesn't work:
$(".taheles_link").click(function(){
$(".taheles_default_message").hide();
$(".taheles_saving_message").show();
});
//end
$(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל´ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{"tn":">","type":22}"><span class="taheles_default_message">תכל´ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
$(".taheles_saving_message").hide();
}, 2000);
});
In the future, this extension will use AJAX, so setInterval() can make even more problems for me.
If I understand correctly you want to get a notification when the page's DOM changes. And you want to do this without using the setInterval() function.
As your problem lies within the attaching event handlers to elements that are created after the page has loaded, you might be interested in checking out the jquery.live event attachment technique. I think it will solve your issue.
In general you want the page to throw a mutation event. There is a mutation event spec that might be what you're looking for. Here are some links that might be useful.
http://tobiasz123.wordpress.com/2009/01/19/utilizing-mutation-events-for-automatic-and-persistent-event-attaching/
Detect element content changes with jQuery
$(document).ready(function(){
setInterval('fun()',5000);
fun();
});
function fun()
{
alert(11)
}
I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.
In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!
Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)
Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);
You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)
My goal is to catch pageloads in my component, insert some javascript into the document and then catch onFocus events. On an event i then want to call the javascript function i injected.
Now i managed to solve most issues, i have the script added to all webpages and i can catch onfocus events. What im not able to do is execute a javascript function from my XPCOM component (C++). In my Internet Explorer BHO i use execScript and it works great. Any ideas?
Currently my workaround is to use setattribute and set the onfocus event of each input element to execute the javascript function, but this is intrusive and overwrites existing onFocus handlers in the webpage. Other ideas are welcome.
Thanks.
If you "have the script added to all webpages", the script can take care of both registering a "focus" event listener and taking an appropriate action when the focus event happens.
I'm not sure why you need to call into the content JS from your component.
If you do need to do this, post what you have already tried and in what way it "didn't work".
I believe this used to resolve your issue (pre FF6?), am looking for a newer solution.
FF6 had some change to security of the navigation bar that prevented executing javascript there. https://support.mozilla.org/en-US/questions/876916
Where to execute java script the url might be javascript:alert('hello');
OnStateChange(nsIWebProgress *aWebProgress, nsIRequest *aRequest, PRUint32 aStateFlags, nsresult aStatus) {
// check for correct state - document load complete...
nsCOMPtr<nsIDOMWindow> domWin;
nsresult rv = aWebProgress->GetDOMWindow(getter_AddRefs(domWin));
nsCOMPtr<nsIWebNavigation> nav = do_GetInterface(domWin);
if (nav)
hr = nav->LoadURI(url, 0, 0, 0, 0);