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
Related
In my metro app ..I am using iframe to load a web application - basically a form which contains some controls and finally user click on finish button and i want to show alert
i know in metro app. we can give the alert using "new Windows.UI.PopupMessage" to show the alert. but how can i do the same from the web context(Iframe).
i have a function (showalert();) in my default.js where i am using the "new Windows.UI.PopupMessage" to show messages. if i am trying to access this function from iframe page like "window.parent.showalert();". i get exception saying access denied.
Please someone reply to this as this is very critical for me.
thanks & regards
Goutham
You can use HTML 5's postMessage to communicate between contexts.
Below is an image of a simplistic example with the relevant code snippets following it; the Bing Maps trip optimizer example uses this same technique on a grander scale.
The main page (default.js), which is running in the local context, includes an IFRAME loaded in web context via the following markup (I left out the unchanged <head> element to save space):
<body onload="localContext.onLoad();">
<p style="margin-top: 150px">This is default.html in the local context</p>
<div style="background-color: azure; width: 300px">
<iframe src="ms-appx-web:///webpage.html" />
</div>
</body>
localContext is defined in default.js as
var localContext = {
onLoad: function () {
window.attachEvent("onmessage",
function (msg) {
if (msg.origin == "ms-appx-web://bfddc371-2040-4560-a61a-ec479ed996b0")
new Windows.UI.Popups.MessageDialog(msg.origin).showAsync().then();
});
}
};
and it defines an onLoad function for default.html that registers a listener to the onmessage event, and when that event fires a MessageDialog is shown (or you can take whatever action you want to do in the local context).
Note that the parameter to the message event callback (msg here) also includes a origin property that you can check to make sure you're only handling messages from expected senders.
The web page hosted in the IFRAME calls postMessage in the onclick event handler of a button (you'll probably want to pull the invocation a separate .js file versus in-line)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
This is webpage.html loaded into an iFrame
<button id="button" onclick="window.parent.postMessage('Hello from Web Context', '*');">Say Hello</button>
</body>
</html>
My project is master/content. The client validation always scrolls the first control that is not valid to the top of the page (0, 0). I am trying to override the default window.scrollTo by putting following client-side script in the content page, but it doesn't seem working. Can anyone tell me what is wrong? I tried put this in the master page, not working either.
<script type="text/javascript">
window.scrollTo = function() { }
</script>
You need to disable FocusOnError Property
I have this script in the tag that's making the header row in the grid frozen.
It's working good, but after I add a row to the grid with Ajax, the row goes back to regular mode, and it's not frozen anymore.
What am I missing?
<script type = "text/javascript">
$(document).ready(function () {
$('#<%=gvPayments.ClientID %>').Scrollable({
ScrollHeight: 500
});
});
</script>
Thanks.
Actually I believe the problem is $(document).ready() isn’t called after an asynchronous postback, so I suggest you have a look at this page:
http://web.archive.org/web/20101109152029/http://blog.dreamlabsolutions.com/post/2009/02/24/jQuery-document-ready-and-ASP-NET-Ajax-asynchronous-postback.aspx
I'm using jQuery at WordPress (#the HOME page) and the ready function doesn't work for me. I have a index.php which is including (php) a header, footer and a sidebar. I tested this code:
<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("test text");
});
</script>
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sidebar has been loaded. This means while I'm seeing the index page (sidebar is not loaded yet) I have to wait a few seconds until the sidebar has finished loading, and only then the jQuery code is executed: the alert is popping up. So the ready function just wont work.
Can anybody tell me why and how I can solve this problem? Thanks.
within the WordPress environment, use this:
jQuery(function($){
// now you can use jQuery code here with $ shortcut formatting
// this executes immediately - before the page is finished loading
});
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
});
The alert is popping up after the sidebar is loaded because ready() is supposed to be executed AFTER the whole page is done loading.
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded.
That's exactly the advantage of using ready. When you want it to popup right away, simply do
<script type="text/javascript">
alert ("test text");
</script>
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?