Search jQuery

jQuery Forum

how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

in Using jQuery UI • 9 months ago

I'd like to use the widget "Dialog", specifically the "Modal Confirmation" option to create a dialog box with "Proceed" and "Cancel". But I want to make each of these two options redirect to a certain page/site depending on which was clicked (to be exact, maybe have "Cancel" return to the page, and "Proceed" go to another page entirely).

If anyone can help me out, I appreciate it! :)

Replies(13)

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Something like this

$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
Proceed: function() {
location="http://google.com"; // wherever you want to go
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Thanks! How exactly do I implement it? I have this so far (copied from the example and using your snippet):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal confirmation</title>
<link type="text/css" href="css/dark-hive/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
    $( "#dialog-confirm" ).dialog({
    resizable: false,
    height:140,
    modal: true,
    buttons: {
    Proceed: function() {
    location="index.html"; // wherever you want to go
    },
    Cancel: function() {
    $( this ).dialog( "close" );
    }
    }
    });
    </script>
</head>
<body>

<div class="demo">

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>


<div class="hiddenInViewSource" style="padding:20px;">
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
    <form>
        <input value="text input" /><br />
        <input type="checkbox" />checkbox<br />
        <input type="radio" />radio<br />
        <select>
            <option>select</option>
        </select><br /><br />
        <textarea>textarea</textarea><br />
    </form>
</div>

</div>

<div class="demo-description"><p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p></div>

</body>
</html>

Obviously it is incomplete, but I couldn't find the demo.css file on the sample page so I didn't know what to use there....

Any additional help would be appreciated! :)

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

I would put it in a function, and call it whenever I need it.

function ask(){
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Proceed: function () {
location = "index.html"; // wherever you want to go
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
$(ask); // or in a click handler somewhere

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Thanks! But how exactly do I fully implement it? I couldn't make sense of the demo's source code, and I'm still very new to JQuery and Javascript.

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Here is a full page that runs ask.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
function ask(){
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Proceed: function () {
location = "index.html"; // wherever you want to go
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
$(ask); // run ask when the page is ready!
</script>
</head>
<div class="demo">
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
</body>
</html>

How did you want to run it?

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

I'm making an HTML page that has two links, and I want one of them to produce the ask dialog to confirm going to another page. Like a "warning" page.

Thanks for the continued help! :)

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Here’s a modified version that uses a selector, $('a[href*=":"]') , to use ask on the links that have colons in them.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
function ask(){
var href=this.href;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Proceed: function () {
$(this).dialog("close");
location = href
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
}
$(function(){
$('a[href*=":"]').click(ask) // all links that have a colon in them.
})
</script>
<style type="text/css">
#dialog-confirm {display:none}
</style>
</head>
<body>
<a href="fakePage.html">Fake page</a>
, <a href="https://www.facebook.com/photo.php?fbid=343027295786739&set=a.135440809878723.31061.135432559879548"> Truth </a>
, <a href="https://www.facebook.com/photo.php?fbid=342972435792225&set=a.135440809878723.31061.135432559879548">Cher</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
</body>
</html>

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

9 months ago

Great, this is just what I need. Now to customize it. Thanks again!!

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

4 months ago

Thanks to everyone for the help with this! It is implemented on my site and working. However I have a quick question: For the pop up box buttons, they are currently set at "Proceed" and "Cancel". I'd like to make it more like "Go to the site" and "get me out of here", but doing so breaks the script. Any idea how to do this?

Thanks!

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

4 months ago

buttons: {
"Go to the site": function () {
$(this).dialog("close");
location = href
},
"Get me out of here": function () {
$(this).dialog("close");
}
}

That should get the job done!

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

4 months ago

Great, it worked perfectly. Thanks! One last question, how can I make the "cancel" button option forward to a web site such as Google instead of just closing the window?

jakecigar

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

4 months ago

function ask(){
var href=this.href;
var noStayHere=false
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Go to the site": function () {
$(this).dialog("close");
location = href
},
"No, stay here": function () {
noStayHere=true
$(this).dialog("close");
}
},
close: function( event, ui ) {
if (!noStayHere)
location="http://google.com"
}
})
return false;
}

JΛ̊KE

zoldos

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

4 months ago

You rock, thank you very much! :)

Top Reply

Response title

Attachments

jQuery Forum

how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Replies(13)

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Re: how do I make the Dialog Widget: Modal Confirmation redirect to another site when I click one of the options?

Statistics

Tags

Actions

Related Posts