I wan to run all jQuery codes after inline confirmation, Is this possible?
something like this:
<a href="" onclick="return confirm('are you sure ?')" > test link </a>
I want this code run after inline confirmation above:
$('body').on('click','a',function() {
alert('clicked!');
});
It's important to me that confirmation take place inline, not in jQuery on click.
here is the code which will work for you.
test link
and jquery code is below which will help you.
$('body').on('click','a',function() {
var msg = confirm('are you sure ?');
if (msg){
alert('ok is clicked');
}else{
alert("cancel is click")
}
});
You can do something like this,
function onConfirm()
{
if (!confirm('are you sure ?'))
alert('clicked cancel');
else
alert('clicked confirmed');
};
<a href="#" onclick='onConfirm();'> test link </a>
How about this:
test link
function confirmMessage(msg) {
if (confirm(msg)) {
alert('confirmed');
} else {
alert('failed');
}
}
or
test link
function whenConfirm(is_confirmed) {
var d = $.Deferred();
is_confirmed ? d.resolve() : d.reject();
return d.promise();
}
function confirmed() {
alert('confirmed');
}
function canceled() {
alert('canceled');
}
Try to avoid using inline click handlers. I would also set a class or id on the anchor you intend to put this handling on. Otherwise, you would be binding this confirm on each anchor element in the document.
Confirm
$(document).on('click.confirm','a.confirm-me',function() {
if (confirm('Are you sure ?')){
alert('ok is clicked');
// Returns true;
}else{
alert("cancel is click");
// Returns false;
}
});
Related
I have the following href on my site:
a href="http://www.google.com" name="external" onclick="confirmExit(this.name)
I just can't figure out how to make user stay on my website if he/she doesn't want to leave by clicking "cancel" (incomplete code below).
function confirmExit(name){
if(name == "external"){
if(confirm("Go to external site?")){
}
}
}
jQuery/Ajax is not an option.
Just return false.
function confirmExit(name){
if(name == "external"){
if(!confirm("Go to external site?")){
return false;
}
}
}
If you want this to happen on all links, or even when the user closes the tab, check out #megawac's answer.
Use window.onbeforeunload to show a confirm dialog before a user leaves the page
$(window).bind("beforeunload", function() {
if(true) { //display confirm dialog?
return "Are you sure you want to leave?";
}
});
You don't need a function. I suggest you to use this:
$(function () {
$('a[name="external"]').click(function () {
if (!confirm("Go to external site?")) {
event.preventDefault();
}
});
});
If you use this, you don't need to add onclick="confirmExit(this.name)" to everything. Just add the above and your work will be done.
You can do this if you want behaviour of JSFiddle:
window.onbeforeunload = function(){ return "Are you sure you want to leave the page?"; }
Use the return false inside the confirmExit() function and also use return at inline javascript like
HTML
Some Link
//Use return here also ---^
JS
function confirmExit(name){
if(name == "external"){
if(!confirm("Go to external site?")){
return false;
}
}
}
DEMO
Is there away that the confirm box appeared, if i clicked "ok" it will go to another page and if i clicked "cancel" it will just stay and the current page will not reload again? THANK YOU.
function reload()
{
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
window.location = "http://www.yoururl.com";
}
else
{
//do nothing
}
}
call this function when you want to confirmation from user.........
You can use confirm() for this, which returns true on ok or false on cancel.
function myFunction(){
if(confirm("Would you like go to other page?")){
window.location = "http://yahoo.com";
}else{
alert('fine, if not want');
}
}
myFunction();
Updated
DEMO
UPDATED2
<button onclick="return logout()" >logout</button>
<script>
function logout(){
if(confirm("Would you like go to other page?")){
window.location = "failed.php";
}else{
//do your stuff on if press cancel
}
}
</script>
You may try doing
<script>
function myfunction(){
if(confirm("The confirm message")){
youDoTheThingsHere();
return false;
}else{
console.log("I cancelled the dialog!");
return false;
}
}
</script>
I'm not sure about your certain situation and the code that is involved when you call the confirm, but this has worked for me. The other option you may look at as a last resort is using something like a bootstrap modal to trigger a "confirm" modal. With the bootstrap modal you can then style it how you want... hope I could help!
Use "return None"
function myFunction(){
if (confirm("Confirm to reset your content!")){
location.reload();
}else{
return None;
}
}
How would I make sure that this href element is will fire "click" event unless it does NOT have "disablelink" class.
DO NOT PROCESS:
<a class="iconGear download disablelink" href="#">Download</a>
PROCESS:
<a class="iconGear download" href="#">Download</a>
tried this without success:
$("a.download").not(".disablelink").click(function (e) {
alert('in');
e.preventDefault();
});
This should work:
$("a.download:not('.disablelink')").click(function (e) {
alert('in');
e.preventDefault();
});
If the disablelink class is being added dynamically:
$(document).on('click', "a.download:not('.disablelink')", function (e) {
alert('in');
e.preventDefault();
});
Check this demo: http://jsfiddle.net/d3rXr/1/
$('a.download').click(function(e){
e.preventDefault();
if($(this).hasClass('disablelink')){
return;
}else{
//other stuff;
}
});
Why don't you check when the anchor is clicked, and if it has the class it returns and does nothing, which would be more readable code I guess.
You could go like this:
$("a.download").click(function(e) {
if($(this).hasClass("disablelink")) {
return false;
}
// Normal code
alert('in');
e.preventDefault();
});
Firstly, this probably doesn't work because some links had disablelink added to them dynamically, and after they already had the click handler bound to them.
Secondly, you should just check for that class inside the click handler, like so:
$("a.download").click(function (e) {
if($(this).hasClass('disablelink')){
e.preventDefault();
// link is disabled
}else{
alert('in');
// link is active
}
});
Q:
I have the following case :
Div contains a link , i wanna to just select the div without the link,i mean ,when clicking on the div i wanna specific action differs from clicking the link.through some JQuery.
the structure i work on is:(by firebug)
<div class ="rsAptContent">
sql
<a class = "rsAptDelete" href = "#" style ="visibility: hidden;">Delete</a>
</div>
the JQuery code:
<script type="text/javascript">
$(document).ready(function() {
$(".rsAptContent").click(function(e) {
ShowDialog(true);
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>`
when i click on the link ,i don't want to execute the Jquery code , how to select the div without the link in.
thanks in advance
Are you looking for something like the stopPropagation() code?
$(".rsAptContent").click(function(e) {
e.stopPropagation();
ShowDialog(true);
return false;
});
});
That should stop the link from executing.
http://api.jquery.com/event.stopPropagation/
Edit: Distinguish between clicking the link and clicking on any part of the content except the link
$(".rsAptContent").click(function(e) {
var $target = $(e.target);
if($target.is(a){
// It's the link.
}else{
// else it's not
}
});
});
Check for the clicked target element than perform action
to get info about which element is click use below script
function whichElement(event){
var tname
tname=event.srcElement.tagName
alert("You clicked on a " + tname + " element.")
}
Try this:
$(".rsAptContent").click(function(e) {
if($(e.target).hasClass('rsAptDelete')) return false;
ShowDialog(true);
e.preventDefault();
});
});
If the target is the link the event is cancelled;
If you already have a click handler on the delete link, then just stop the event propagation there by using stopPropagation().
$(".rsAptDelete").click(function(e) {
e.stopPropagation();
});
Here is my code. Where you see "alert([...]);", an alert pops up. Why doesn't the CSS style change? The 'click' event doesn't fire either!
resolveSideMenuAddress: function () {
var firstLink = $("#masterHeaderMenu .masterHeaderMenuButton a:first");
function select(link) {
alert('i alert');
link.css({
'color': '#9a4d9e',
'cursor': 'default'
});
alert('color and cursor not changed');
link.click(function () {
alert('click');
return false;
});
}
if (window.location.pathname === firstLink.attr('href')) {
alert('i alert');
select(firstLink);
}
}
I've tried addClass() and can't change the color of the link that way either.
First, you're not actually firing the click event, but rather applying a click handler to the link. It won't fire until you actually click the link. If you want existing click handlers to be run you can try link.click() (without the function). If you want the link to actually be taken, you should simply set the location to the value of the link's href attribute. Second, I'm not sure why the CSS isn't being applied properly. It looks ok to me. I'd suggest using Firefox/Firebug and inspecting the element after the function has run to see what styles are actually in use.
try using $(link) instead of just link
like this:
resolveSideMenuAddress: function () {
var firstLink = $("#masterHeaderMenu .masterHeaderMenuButton a:first");
function select(link) {
alert('i alert');
$(link).css({
'color': '#9a4d9e',
'cursor': 'default'
});
alert('color and cursor not changed');
$(link).click(function () {
alert('click');
return false;
});
}
if (window.location.pathname === firstLink.attr('href')) {
alert('i alert');
select(firstLink);
}
}