I have the following javascript code:
function ClickButtons() {
document.getElementById('Button1').click();
document.getElementById('Button2').click();
}
only Button2 seems to be clicked. If I reverse the order of the statements then only Button1 (which would be called 2nd then) seems to work.
FYI (don't think this is impacting this issue, here for futher information): The button clicks are doing ajax/partial page updates (they call data services and populate data on the page)
EDIT: The solution setTimeout works, but puts an lower bound on performance. I've done a bit more looking and the two buttons are asp.net buttons and are inside update panels. If I click them sequentially they work fine, but if i click one and then quickly click a second one (before the first has completed) then the second one will work and the first will fail. This appears to be an issue with update panels and asp.net? Is there anything I can do on that front to enable the above javascript and avoid the setTimeout option?
It should work. Try putting a setTimeout call for the second button after the first button is clicked. It's ugly but maybe it will work.
function clickButton() {
document.getElementById('#button1').click();
setTimeout(button2, 300);
}
function button2() {
document.getElementById('#button2').click();
}
How about using IE's fireEvent() function?
function ClickButtons() {
document.getElementById("Button1").fireEvent("onclick");
document.getElementById("Button2").fireEvent("onclick");
}
Working example (tested in IE6):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Click Test</title>
</head>
<body>
<button id="Button1" onclick="alert('Button1 Clicked');">Click 1</button>
<button id="Button2" onclick="alert('Button2 Clicked');">Click 2/button>
<script type="text/javascript">
document.getElementById("Button1").fireEvent("onclick");
document.getElementById("Button2").fireEvent("onclick");
</script>
</body>
</html>
Since your use of click() is to my knowledge IE-specific, so is this answer. Events are fired differently in different browsers, but it shouldn't be too tough to make wrappers and hide the difference.
They should both fire a click event. What happens if you remove your ajax requests and other heavy lifting and just put an alert or console.log in each event listener. Oh, and how are you listening to events?
Related
I am using javascript and I need to display an alert only once when the user click anywhere in the site. But make sure it will not pop up everytime the user click anywhere.
Im not professional but I need this code to embed in my e-commerce site. I have tried a regular onload alert. but it will show once the page is loaded. then i tried this automatic code:
</html>
<head>
<script language="JavaScript">
<!--
document.onclick = myClickHandler;
function myClickHandler() {
alert("All orders require minimum two weeks notice due to the nature of event and wedding products");
}
-->
</script>
</head>
<body>
</html>
and works, but every time I click appear and that is annoying. I need a onclick event, anywhere in the page... to display an alert only once. to advise the user about important info.
Desperatly need some solution. Thanks
$(function () {
$(document).on('click.once', function () {
alert("Alerted once");
$(document).off('click.once');
})
});
This makes use of the .off() and named event feature in jQuery.
.off feature
event namespaces
I have a really odd behavior here: I created a little popup dialog in jQuery UI, and in my test HTML page, it works flawlessly. When I click on the button, the popup comes up, covers the background, and remains on screen until I click on one of the two buttons (OK or Cancel) provided.
So now I wanted to add this into my ASP.NET 3.5 app. I wanted to add it to a GridView inside a user controls (ASCX), which is on a page (ASPX) contained inside a master page.
The jQuery 1.4.2 and jQuery UI 1.8.1 scripts are referenced on the master page:
<body>
<form id="XXXXXX" runat="server">
<Ajax:ScriptManager ID="masterScriptManager" runat="server" ScriptMode="Auto">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.1.custom.min.js" />
</Scripts>
</Ajax:ScriptManager>
I had to change this to use the Ajax script manager, since adding them to the as never worked.
So in my gridview, I have a column with image buttons, and when the user clicks on those, I am calling a little javascript function to show the jQuery UI dialog:
function showDialog()
{
$("#dlg-discount").dialog('open');
$("#txtAmount").focus();
}
When I run this page in MS IE 8, I get a separate page, and at the top of the page, I get the contents of my , with proper background color and all. In Firefox 3.5.6, I do get the dialog as a popup.
In both cases, the dialog page/popup disappears again after a second or less - without me clicking anything!
It seems similar to this question but the solution provided there doesn't work in my case. This one here also seems similar but again: the solution presented doesn't seem to work in my case...
Any ideas / hints / tips on what the h**** is going on here??
Thanks!
Update: OK, one problem is solved - it appears that for whatever reason, the default MS Ajax stuff is adding some kind of an "observer" to my popup dialog and closes it right away after it shows up :-(
So I changed the OnClientClick="showDialog();" to OnClientClick="showDialog(); return false;" and how that doesn't happen anymore - the dialog box pops up and stays there until I click on either of the two buttons (OK and Cancel).
Where are you creating the dialog? There should be some code like this which gets called when the DOM is ready;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 620,
height: 660
};
$("#dlg-discount").dialog(dialogOpts);
}
And then you can call $("#dlg-discount").dialog('open') in your onclick method.
I'm implementing a search service called SearchInsideOut.
This search service simply replaces web page results by full web pages (Yes, I used iframe).
The problem I have to deal with is iframe-breaking pages.
The promising solution I found is using onbeforeunload to let users decide whether to stay or leave my site.
But this also creates another annoying behavior.
When users click other links in my site, onbeforeunload will also be triggered.
Fortunately, I could solve this case by placing window.onbeforeunload=null in the onclick event of those links of my site.
Unfortunately, I have no idea how to detect external events like clicking "refresh/back" buttons.
What should I do to solve this difficulty?
All suggestions and comments are highly appreciated.
Take as example this site. Try to refresh the page after u typed some text answering to a post. You will see that the page it will ask you to continue ur work or exit. Make another test without answering to a post, just refresh, you will see that the confirm will not showed, because the site is making a test if the "answer" is empty or not.
Example:
<html>
<head>
<script>
function closeIt()
{
var mytext = document.getElementById("mytext").value;
if(mytext != "")
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
</script>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>
So it's up to u to decide when the box will show or not. Visit also Microsoft Msdn to understand when and how onbeforeunload works
net website, I would like to add button by which user can view the page in Full Screen mode and switch back to Normal mode. [This is same as happens with F11]
I have seen many javascript code but all of them is opening new window in full screen.
But i would like have same window in Full screen
If it happn then i will put that button in MASTER page.
Please help?
I don't think it is possible to do what you are asking.
The only possible way is using window.open:
<span onclick="window.open('http://www.yourdomain.com/page.html','', 'fullscreen=yes, scrollbars=auto');">Open Full Screen Window</span>
(I'm not sure it's a good idea to force a user to use full screen mode...)
ugly solution but it works
<head>
<script type="text/javascript">
function max()
{
var obj = new ActiveXObject("Wscript.shell");
obj.SendKeys("{f11}");
}
</script>
</head>
<body onload="javascript:max()">
</body>
User already has this button, it's called F11.
DO NOT try to be 'smart'. This kind of functionality is in browser's scope, not in web application scope. It should not be your concern at all.
Instead focus on features that are truly relevant to your application.
I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.