I want to open a facebox modal after some javascript validation. I am using this code:
<script type="text/javascript" src="facebox.js"></script>
Script:
function validatePage()
{
if(document.getElementById('username').value == '')
{
alert('Please enter Username');
return false;
}
//My Code should go here
}
Markup:
Click Me
For some reason the facebox modal does not open...instread the page is opening in a new window.
Any suggestion will be highly appreciated.
Thanks in advance
Is your onclick overriding the Facebox functionality? I don't know if it would, but that's a thought. Have you tried manually triggering the function instead?
function validatePage(e)
{
if(document.getElementById('username').value == '')
{
alert('Please enter Username');
} else {
$.facebox({ajax: $(e).attr("href")});
}
return false;
}
I just passed the element to the function, to make that extend to other things. You'd just say "javascript:validatePage(this)" in your onclick.
Related
I want to prevent the double/triple clicking issue for my "Done" button in my application.
I have my "Done" button as below in my .jsp file:
<ip:button name="Done"
text="Done"
jsEvent="onclick=\"if(submitPage() && doneSubmit())
{ request.value = 'DONE_REQUEST'; submit(); }\"" />
And the submitPage() is the JavaScript method as below:
function submitPage(){
if (pageLoaded && !hasSubmitted ){
hasSubmitted = true;
return true;
}
else{
return ! showWaitMsg();
}
}
submitPage() method is used by other buttons as well.
So I was thinking to using the submitPage() method to disable "Done" button (only the "Done" button) once the button is clicked and enable it once "hasSubmitted = true;".
Can anyone please advise how could I do it?
Just wondering, is it possible to create an alert with multiple options?
Like for example, in Facebook, when you try to close the tab/window when you have not finished typing your message, an alert with the options "Leave this page" and "Stay on this page" will pop up.
Example with form, you'are looking for window.onbeforeunload:
<script type="text/javascript">
var originalFormContent
var checkForChanges = true;
jQuery(document).ready(function () {
originalFormContent = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
});
function onClose() {
if (checkForChanges && originalFormContent != "undefined") {
var content = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
if (content != originalFormContent) {
return confirm('You have unsaved changes. Click OK if you wish to continue ,click Cancel to return to your form.');
}
}
}
window.onbeforeunload = onClose();
You're referring to window.onbeforeunload:
Best way to detect when a user leaves a web page?
You can also use the window.confirm() function for OK/Cancel options:
http://jsfiddle.net/UFw4k/1
Other than that, you'd have to implement a custom modal alert, such as jQuery Dialog.
Please have a look at http://jqueryui.com/dialog/#default
Copied this from a previous answer: JavaScript alert with 3 buttons
I am looking for a way to set it up so that when an external link is clicked it will warn people that they are leaving the site. Preferably, it would darken the screen and display a message in the middle of the screen in a box with the option to click OK or Cancel.
I tried to use this code:
$("a.external").click(function () {
alert("You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.");
});
and give each link a class of external but it doesn't seem to work. I don't want to use this because it means that the client will have to remember to add the class I would prefer something more automatic.
I also tried to use this code to do so but to no avail:
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
var x=window.confirm('You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.');
var val = false;
if (x)
val = true;
else
val = false;
return val;
});
I am using WordPress 3.8.1.
Thanks in advance for any help you can give.
Your filter logic should be correct, Try using the confirm function, and using jQuery instead of $.
jQuery('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
if(!confirm("You are about to proceed to an external website."))
{
// if user clicks 'no' then dont proceed to link.
e.preventDefault();
};
});
I tried this out in dev tools on your site and it seems to work correctly if you use jQuery. I think you may have some plugin that is causing conflicts with $.
JSFiddle Demo
Try using confirm instead of alert since that will pause and wait for user input. You'll then need function(e){ e.preventDefault(); } to prevent the default link actions.
To identify just external links you might do something like this:
var ignoreClick = false;
$(document).ready( function(){
$('input[type="submit"], input[type="image"], input[type="button"], button').click(function(e) {
ignoreClick = true;
});
$(document).click(function(e) {
if($(e.target).is('a'))
checkLink(e);
});
$('a').click(function(e) {
checkLink(e);
return true;
});
checkLink = function(e){
// bubble click up to anchor tag
tempTarget = e.target;
while (!$(tempTarget).is('a') && !!tempTarget.parentElement) {
tempTarget = tempTarget.parentElement;
}
if ($(tempTarget).is('a')){
if(!!tempTarget && $(tempTarget).is('a') &&
(tempTarget.hostname == "" || tempTarget.hostname == "#" || tempTarget.hostname == location.hostname)){
ignoreClick = true;
}
}
}
});
and to catch people with a message you might use beforeunload and the confirm option
$(window).bind("beforeunload", function (e) {
if (!ignoreClick){
if(!confirm("Leaving website message")) {
e.preventDefault();
}
}
});
It worked pretty well to me. I just removed unnecesary variables, but original script worked fine.
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
return window.confirm('You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.');
});
http://jsfiddle.net/3dkAN/1/
EDIT
Following #user1308743's line, seems that in cgmp.framework.min.js is summoning the jQuery.noConflict() mode, that unbinds the $() function for jQuery. So please use jQuery() for any jQuery implementation
I have found this online:
function submitButtonClick(button) {
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false) {
return false;
}
}
button.style.display = 'none'; // disable won't work
return true;
}
I am not good with Javascript so I couldn't tell what to change...I have a usercontrol with a few buttons, including a submit button. And they are used on every page of my site. And on some pages I have customvalidators. So when a custom validator doesn't validate, the button is gone and there is nothing left to do. What should I change here for the things to work the way I need? Thanks
I my web application I want to Hide/ Remove some for the menus like View Source, Properties using JavaScript coding. This should available in entire webpage.
Do not do it.
You only make your users angry but you can not stop them any way.
See also How do I disable right click on my web page?
If I can't stop you from doing it. You can only disable the whole menu:
<script language="javascript">
document.onmousedown=disableclick;
Function disableclick(e)
{
if(event.button==2)
{
return false;
}
}
</script>
var message="Sorry, right-click has been disabled";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {
if(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;
}
else{
document.onmouseup=clickNS;
document.oncontextmenu=clickIE;
}
document.oncontextmenu=new Function("return false")
This is code disable the right click.