I have a button in a my webpage; my expectation is when I click the button, it prompts a dialog window; in the dialog window, it has yes/no button; if I click yes, it opens a new page (gereated by php); if I click no, I stay on the old page. How can I do that?
<input type="button" name="terminate" value="terminate" id="terminate" title="Terminate" onclick="terminateIt();"/>
There are innumerable ways to do this.
Probably the most common way would be to use jQuery UI's Dialog.
They have an example in their demo of a dialog with two buttons. Here is a snipped from that demo:
HTML:
<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>Your question goes here. Are you sure?</p>
</div>
JS:
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
Yes: function() {
window.open(....);
$( this ).dialog( "close" );
},
No: function() {
$( this ).dialog( "close" );
}
}
});
Check out the whole jQuery UI library. Tons of great stuff making it easy to do some basic things.
function terminateIt(){
var r = confirm("Go to new page?");
if( r == true ){
// redirect stuff here
} else {
// non redirect stuff here
}
}
Related
I'm just starting out with jquery. Already learned some things and like it, but I have been struggling with the following issue for a few days.
I copied the "dialog-confirm"-function from https://jqueryui.com/. I placed this script between the tags on my index.php page.
<script type = "text/javascript">
$(document).ready(function(){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
$(window).resize(function() {
$('#scrollpage').height($(window).height() - 250);
});
$(window).trigger('resize');
$('.container').on('click', '.mainmenu', function(event){
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
$( this ).parent().addClass('current_page_item');
$( this ).parent().siblings().removeClass('current_page_item');
});
$('.container').on('click', '.rapport', function(event){
event.preventDefault();
//$(".dialog-confirm").dialog( "open" );
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
});
});
</script>
If i place the matching div in the same index.php page. It works fine, the div pops up.
<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>Blablabla</p>
</div>
However when i place the div in a page which is loaded by ajax in the div1, then I cant get it to work.
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
</div>
</div>
Can anyone explain to me why this is, and how I can fix this?
What's happening is that your $(document).ready() function executes as soon as the DOM is loaded. This DOM contains just what it is in the html file. At that time, there's no div with an id equal to 'dialog-confirm'. Loading pieces of HTML with ajax doesn't trigger a DOMReady event. What you've got to do is to call the .dialog() jQuery function AFTER you've loaded the div with Ajax:
$("#div1").load(url, function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Here is what happens in your program(loading div with ajax):
First, your script initiates dialog window container by looking an element with id dialog-confirm.
Since, you don't have an element with that id yet, dialog container cannot be prepared.
There are two ways you can make it work:
Call dialog() after ajax requests,
Place div statically on page and change content with ajax request.
Solutions:
1- Use the code below instead of $("#div1").load(url);
$("#div1").load(url, function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
2- Place divs statically on your page:
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
<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>Blablabla</p>
</div>
</div>
</div>
Then load just <p>... with $("#dialog-confirm").load(data); instead of $("#div1").load(url);.
Your jquery is executed only once after your page is loaded. Then is initiating everything needed for the tool!
This means every .container is being 'transformed'.
If you later add a new div.container it is not 'transformed' yet. You have to execute the jquery again after your div is appended!
In my django template, I have a block of code which looks as follow:
{% block b %}
{ % for foo in foos %}
{ % if foo.some_variable % }
<form method="LINK" action="{% url "some_view" foo.id %}" id="button">
<input type="submit" value="Button"/></form>
{ % else % }
<form method="LINK" action="{% url "some_view1" foo.id %}" id="button">
<input type="submit" value="Button1"/></form>
<form method="LINK" action="{% url "some_view2" foo.id %}" id="button">
<input type="submit" value="Button2"/></form>
{ % endif %}
<br>
{ % endfor %}
{% endblock % }
I need to make confirmation popup for all of those buttons. So I tried to add
onclick = "return confirm("are u sure?")"
And it works, but it's ugly. I want to add custom buttons names, header and so on.
So I read that this is not possible in clear javascript and I should use jquery.
I tried something like this, but since I don't know jquery neither js it doesn't work:
<script>
function confirmAction(){
var confirmed ;
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
confirmed = true;
$( this ).dialog( "close" );
},
"No": function() {
confirmed = false;
$( this ).dialog( "close" );
}
}
});
return confirmed
}
</script>
<div id="dialog-confirm" title="Are you sure??">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
Are you sure you want to do this?</p>
</div>
When I click on button, popup appears, but it suddenly disappears and I'm redirected to a view anyway.
Could you try to help me?
Best regards,
confirmed is always false because javascript is asynchrone.
You need to use some closure. Something like this should do the trick:
$('input:submit').click(function() {
// get form associated with the button
var form = $(this).parents('form')
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
// maybe set an hidden field to keep button value if needed
form.submit()
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
return false;
}
Another problem is that I also have other buttons designed this way (form, submit) on my site.
But I've got it work with this piece of code:
<script>
$('.popup_button').click(function() {
// get form associated with the button
var form = $(this)
$("#dialog-confirm").dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
form.submit()
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
return false;
});
</script>
<div id="dialog-confirm" title="Confirmation" style='display: none'>
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
Are you sure?</p>
</div>
So confirmation popup appears only for those buttons, which have class 'popup_button'.
The only thing I'm missing is how t get custom confirmation message for each button.
When I substitute
$("#dialog-confirm").dialog
with
$(".new_button_class").dialog
and then add class='new_button_class' and 'title' attributes to my button forms, strange things happen. What is more, I don't now how to set dialog message this way.
adding
$(".new_button_class", form).dialog
instead causes popups not to appear at all.
How to fix it?
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>
can someone please tell me why is the jquery confirm modal doesn't work on my app?
here's my code
<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>
here's the js code
if(userid == ""){
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
there's no pop-up that come out, but when i tried the simple modal alert, it works
i have this in my header
jquery-ui.min.js
I solved my problem by including the dependency js files ROFL
Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.