We Keep Coding

jquery-ui dialog do not open

the html code for this dialog:
<div id="dialog" title="Erro" style="display: none;">
<div id="content"></div>
</div>
the jquery code:
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
maxHeight: 640,
minWidth: 480
});
$("#btn_dialog").on("click", function(event){
$( "#dialog" ).dialog("open");
});
});
when I try open the dialog, i get this error in the browser (chrome) console:
$(...).dialog is not a function
what i am doing wrong?

The close icon(X) is not visible for Jquery dialog box

I have created the jquery dialog. It does not show the close(x) button in IE, but in FF it shows correctly. Please help me to solve this issue.
Jquery Version: 1.11.1
Jquery UI version: 1.10.4
Code:
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Test Me.</p>
</div>
$( "#dialog" ).dialog({
width : 400,
resizable : false,
buttons: [
{
text: "Yes",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "No",
click: function() {
$( this ).dialog( "close" );
}
}
]
});

Make sure you are loading the script in correct order:
jQuery core library <script src="..../jquery-1.11.1.js"></script>
Bootstrap js (if using) <script src="/js/bootstrap.min.js"></script>
jQuery UI library <script src="..../jquery-ui-1.10.4.j.js"></script>

Why does my jquery function not work on div in page loaded by ajax

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!

Confirmation on multiple buttons in django template

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?

jQuery: how to open a dialog window

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
}
}