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
Related
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.
I am interested in opening a webPanel on the right side of the Firefox window. Based on an MDN article, I determined that this could be done by setting the browser element's direction style. However, I wish to clear out this setting after the webPanel is closed. Is there a way I can detect this? Thus far, the only way I can think of is to poll sidebarWindow.location.href (to detect if the sidebar is changed) and sidebarHidden (to detect if the sidebar is closed).
var browser = document.getElementById('browser');
browser.style.direction = "rtl";
var sidebarWindow = document.getElementById("sidebar").contentWindow;
var sidebarBox = document.getElementById('sidebar-box');
var sidebarHidden = sidebarBox.collapsed || sidebarBox.hidden;
sidebarWindow.addEventListener("unload", function (event) {
alert("1"); //This code fires when the web panel is opened
//but not when it is closed.
});
sidebarBox.addEventListener("unload", function (event) {
alert("2"); //This code does not fire.
});
sidebarWindow.addEventListener("close", function (event) {
alert("3"); //This code does not fire.
});
sidebarBox.addEventListener("close", function (event) {
alert("4"); //This code does not fire.
});
openWebPanel('Test', 'http://www.google.com');
IIRC there are essentially three ways a sidebar can be "closed":
The user closes it using the GUI (X-box) or keyboard shortcut. In this case, the web panel will not necessarily get unloaded, so there is no unload event.
Another document is loaded into the web panel. In this case you might get an unload.
The user opens another panel. There is not necessarily an unload.
Should you go forward with your implementation, you need to make sure your code handles all three correctly.
and 3. should be observable by the <broadcaster id="viewWebPanelsSidebar"> changing the checked attribute (see the implementation of toggleSidebar()), so you could have another element observing and acting on onbroadcast.
should listen for unload and act accordingly.
To get proper unload events, I think the following should do the trick:
sidebar.contentDocument.getElementById("web-panels-browser")).
addEventListener("unload", ...);
But my memory there is a bit wonky, so you might need to fiddle with that a bit. (The sizebar has a <xul:browser id="web-panels-browser"> which displays the actual content...)
After having said all that: I think it is a bad idea to mess with the sidebar like this.
The MDN wiki(!) has bad advice in this case.
The sidebar was not designed to be messed with like this.
There are other add-ons "competing" with yours when it comes to messing with the sidebar.
The sidebar code is, for the most part, pretty archaic and under-maintained. Getting things like your requirement to work correctly is pretty hard. There still might be other code (in add-ons) that could dismiss the sidebar that you and I didn't think of.
The sidebar might not be the best place to display your content in the first place (what that content would be you didn't say). If it's something like context-help, dictionary/definition lookup results, login forms, then it won't be a good fit.
Some users might not like that their always-on bookmarks/history sidebar gets replaced by yours. You could handle this by re-opening the previous one, but that will only complicate matters further.
You might be better off using some other way to display information - e.g. a new tab, a panel, a new sidebar like the social sidebar... E.g the social sidebar is not only on the right, it actually is a standalone sidebar not part of the "main" sidebar.
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)
I have a Flex application where I want to give the user a warning if they hit the back-button so they don't mistakenly leave the app. I know this can't be done entirely in Actionscript due to cross-browser incompatibility. What I'm looking for is just the Javascript implementation to catch the back-button.
Does anyone have a simple non-library cross-browser script to catch the back-button? I can't seem to find a post that shows an example.
You can use the window.onbeforeunload event.
window.onbeforeunload = function () {
return "Are you sure you want to leave my glorious Flex app?"
}
The user can press okay to leave, cancel to stay.
As you stated, this throws the alert any time the page changes. In order to make sure it only happens on a back button click, we have to eliminate the alert message whenever they're leaving the page from natural, expected sources.
var okayToLeave = false;
window.onbeforeunload = function () {
if (!okayToLeave) {
return "Are you sure you want to leave my glorious Flex app?"
}
}
function OkayToLeave() {
okayToLeave = true;
}
You'll have the responsibility of setting the variable to true whenever they click a button or link that will take them from that page naturally. I'd use a function for unobtrusive javascript.
Set your event handlers in the DOM ready:
referenceToElement.addEventListener('onClick', OkayToLeave(), false);
This is untested, but should point you in the right direction. Although it may seem like a nuisance to do this, I imagine it's more complete functionality. It covers the cases where a user may click on a favorite, or be redirected from an external application.