jQuery link confirmation - javascript

I am implementing a form which has got links in it,
like this:
<form>
<a>FAQ </a> /* something this way */
<submit button>
</form>
I have to display a confirmation box to the user, if the link is clicked and only when it tries to load the href. In case the user is opening the link in new tab or uses 'CMD-Click' (Mac), the prompt must not be shown.
In Firefox, the browser itself takes care of this when the user tries to navigate to another page when he is in the middle of the form, but I need this functionality to work in all browsers.
Does anyone know how to do this?

that's simple
Google
but i'm not sure if CMD+Click doesn't alert the user. Most of these event can't be controlled by javascript as they are coded into browsers.

Maybe something like this? demo
<form>
FAQ /* something this way */
<submit button>
</form>
$("a").click(function() {
if (!confirm("Do you want to leave?")) {
return false;
}
});
As for not displaying on new tab/new window, there are no such javascript events, thus you cannot capture them.

Related

How to use `document.getElementById("a_link").click();`

So, I need to use document.getElementById("a_link").click(); in the website but I am not sure where or how to place it.
The setting that I have is that there is a submit button and link (http://demodemo.com)
I am trying to redirect users to the link when they press submit button.
I was told that document.getElementById("a_link").click(); will do the job.
But I am not sure how to do it.
Any help will be appreciated.
Thanks
Have your submit button and link look like this:
<button onclick="redirect()">Google.com</button>
Click the button instead fool
Then, in your javascript, have this:
function redirect() {
document.getElementById("a_link").click();
}
However, a much more eloquent way would be something like this:
<button>Click me for google.com</button>
This is simply a button inside of a link, making it so when you click the button, it will redirect you to google.com (or any other page of your choosing).

How to make the url change appropriately for a single page jQuery login, register and forgot password forms

I'm doing an application using CodeIgniter, jQuery etc.
It has a page in which there are 3 forms to login, register and forgot password. All these reside in a single page.
By default the login page (login form) is shown and on clicking 'register', a register form will be shown without reloading. I accomplished this by making different sections in the view for each forms and then used jquery to call that section which makes the register form show and hide the login form and there is this back button which takes me back to login page.
Code of which is :
jQuery('#register-form').click(function () {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});
jQuery('#back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});
I would like to know how to make the url behave properly so that I can reach out to each form by just going to its url.
for example, example.com/#register-form would take me directly to my register form, also by clicking the back button, my url should change appropriately just like how the getbootstrap.com work. Same goes with forgot password.
I tried the jquery-hashchange plugin but just couldn't figure out exactly how.
Can any one tell me the proper way to accomplish this without the help of any plugin? And if a plugin is must, please suggest one.
OK, so if I understand you correctly you are looking to dynamically show or hide the correct form based on either a button click or by the URL itself using the hash tag. And, if possible you would like this without the aid of a plugin.
Assuming that I understand this correctly then the following code may be something along the lines of what you are looking for. Please note that I did not put all the error handling, etc. in the example but there is enough here I believe to help "kick start" you n the direction you are looking for.
Some initial jquery / javascripting to set everything up.
var urlHref = window.location.href;
var urlHostName = window.location.hostname;
var urlPathName = window.location.pathname;
var urlHashParam = urlHref.split("#");
$(document).ready(function() {
$("#hostName").html(urlHostName);
$("#pathName").html(urlPathName);
$("#hostHref").html(urlHref);
$("#hashTag").html(urlHashParam[1]);
switch(urlHashParam[1]) {
case "register":
manageForms("register");
break;
case "forgot":
manageForms("forgot");
break;
default:
manageForms("login");
}
$('#btnRegister').click(function() {
manageForms("register");
});
$('#btnLogin').click(function() {
manageForms("login");
});
$('#btnForgot').click(function() {
manageForms("forgot");
});
});
function manageForms(visibleForm) {
$("#login").hide();
$("#register").hide();
$("#forgot").hide();
$("#" + visibleForm).show();
if (history.pushState) {
// only works if the browser supports pushState.
window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
}
}
Basically what we are doing here is getting the different properties of the windows.login so that we can get the values that we are looking for.
We are defaulting to the login form during the switch (as you want that one first if no hash tag is requested in the url or the one that is requested is unknown)
You also asked to dynamically modify the URL (with the new tag if selected from a button click) without reloading the form again. This is possible in modern browsers but older ones it is not. This is managed by the
if (history.pushState) {
// only works if the browser supports pushState.
window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
}
Because not all browser support it yet, a quick check is made for support before using the command.
And finally here is the HTML section for this code test.
HREF: <span id="hostHref"></span>
<br>
Host Name: <span id="hostName"></span>
<br>
Path Name: <span id="pathName"></span>
<br>
Hash Tag Parameters: <span id="hashTag"></span>
<br>
<hr>
<input type="button" id="btnLogin" value="Login">
<input type="button" id="btnRegister" value="Register for Access">
<input type="button" id="btnForgot" value="Forgot Password">
<hr>
<div id="login">
This is the Login Section
</div>
<div id="register">
This is the Register Section
</div>
<div id="forgot">
This is the forgot password section
</div>
Hope that at least some of this is helpful.
There are libraries that handle all this scenario. Maybe you should take a look at Sammy.js (there are more, but I do only know this one).
Sammy let you define routes like /#something and whenever your application get to that route, specific code is executed.
http://sammyjs.org/

Prevent this page from creating additional dialogs

Firefox4 has a new feature → 【Prevent this page from creating additional dialogs】
But it was also a trouble with me when I hope an alert dialog opened more than once.
Now, A new problem has appeared ...like below ↓
1) I call the alert dialog more than once , and check the
【Prevent this page from creating additional dialogs】
2) I click a download button , My web application is down....
(my button' event is below.... and because it hasn't into the action , so I'm just write the client source....)
My Button Event
getDownloadFile:function(){
$('xform').submit();
}
My Page Code
<div style="display:none;">
<form id="xform" action="down.do" method="post" target="xfra">
</form>
</div>
<iframe id="xfra" name="xfra" src="/?scid=dummy.htm" style="width:0px;height:0px;visibility:hidden;"></iframe>
Hope anybody can help me ...thanks...
I am guessing the $ on your code means you are using jQuery (you should mention it in the tags if this is the case).
If you are not using jQuery, then I don't know much of the other frameworks' selectors. However, if it is jQuery, your selector is not correct, it should be:
$('#xform').submit();
not
$('xform').submit();
Since you are using PrototypeJS, the above is incorrect.
Here's a simple fix:
function myAlertMsg() {
alert("Whatever message you want");
location.reload(); /*This prevents the browsers pop-up disabler*/
}

Support Middle Clicks on my Fancybox Lightbox

Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.
I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.

My website alway scroll up when i click link?

I have a link
Text
when i click this link my page alway scroll up to the top. How do i manage it that when i clik this link my page not scroll up to the top.
Javascript? or something
thank you
you can add some javascript to deny the default behavior.
function myClickHandler(e) {
// your code here
// ...
// new code
if(e.preventDefault){ //firefox,chrome
e.preventDefault();
}
else { // ie
return false;
}
}
if you provide some more detail/example code, we can give you a more specific answer.
Not sure what you are trying to do, but maybe you are thinking of:
<a href="JavaScript:void(0);" >Text</a>
that'll do nothing.
You might want to post an example of a link that does this. My guess is that it's because you don't have an href set for the link or you ended the link href with a "#someId"
It's not that it's scrolling to the top of the page, it's refreshing the page.
An example of a top link:
Some Link
Somewhere <!-- will refresh and you end up at the top -->
EDIT
Ah... Now that you've provided the link... it's the Hash # that's the problem.
To avoid that from happening ( I'm guessing you want to do some Javascript on the link and you're trying to get it to do something.. ) then you need return false; in your javascript. This will return false from the link and won't follow it.
It is because you have only the hash # as "URL". It makes the browser jump to the top of the page (normally it would jump to the element with the corresponding ID if you specify any).
But what is the purpose of such a link if you don't use it?
The [relative] URL # is treated by browsers as the top of the page. Either change the link's href attribute to refer to another resource, or add a click event handler that prevents the default action. Better yet, if you intend it to be a button that triggers a click event, replace the <a> tag with a <button> which is more semantically correct anyway.
<body>
<h1 id="top">First Headline</h1>
<!-- your document here-->
go to Top
</body>
With Javascript you could add some smoothness like slowly scroll up. HTML Links

Categories