jquery-ui dialog do not open - javascript

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?

Related

How to fit html page in pop up window (dialogue box) without using scrollbar?

I am newbie to JS/Html world and trying to load a html page in popup/dialog window on clicking some text in html but loaded page is bigger than poppup window size so there is scroll-bar.
Javascript/Jquery code
$(document).ready(function(){
$('.showModal2').click(function(){
$('#popup2').dialog({width: 450,height: 450});
});
});
$(function(){
$("#data").load("frontend/js/page.html");
});
Html code
<div id="popup2" title="Results" style="display:none;">
<div id="data" style="min-width: 200; height: 400; max-width: 400; margin: 0 auto"></div>
</div>
<font color="blue">Link</font>
Is there any way to fit page within popup/dialog window size (here l=450 & b=450) completely without using scroll-bar like cropping page?
Try this.
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: "auto"
});
$(".dialogify").on("click", function(e) {
e.preventDefault();
$("#dialog").html("");
$("#dialog").dialog("option", "position", {
my: "center",
at: "center",
of: window
});
if ($("#dialog").dialog("isOpen") == false) {
$("#dialog").dialog("open");
}
});
});
Try this below code, it works for me:
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});

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!

jQuery UI Dialog using iframe URL

I've used nyroModal and Fancybox as tools for websites but in this instance I must use jQuery UI's dialog tool. I need this dialog to load a page. I believe I've done this before but everything I come across seems more complex than it should be. Can't I use something like...
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
url: http://www.google.com
});
<button id="dialog">Open Dialog</button>
and have the page open in a simple iframe? Thanks in advance.
I did find that I have this code,
<script>
//$.fx.speeds._default = 500;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function () {$(this).load('nom-1-dialog-add-vessels.html');},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels' });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div id="dialog"></div><button id="opener">Open Dialog</button>
but it's not loading the actual page.
url is not one of the options in jQuery UI dialog.
One of the things that has worked for me is to have an iframe inside the div that is your dialog, and set its url property on the open event.
Like:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>
And JS:
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function(ev, ui){
$('#myIframe').attr('src','http://www.jQuery.com');
}
});
$('#dialogBtn').click(function(){
$('#dialog').dialog('open');
});
You would find that you need some styling on the iframe to get it look nice, though.
#myIframe{
height: 580px;
}
EDIT: Working version - http://jsbin.com/uruyob/1/edit
Based on Floyd Pink and your code, I have consolidated an code. Check here http://jsfiddle.net/Nz9Q8/
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'http://www.w3schools.com';
},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
I tried a similar thing. Check this http://jsfiddle.net/P2Q5U/
<div id="dialogContent" title="Basic dialog">
<iframe src="http://www.w3schools.com"></iframe>
</div>
<button id="dialog">Open Dialog</button>
$(function () {
$("#dialogContent").dialog({
autoOpen: false,
modal: true
});
$('#dialog').click(function () {
$("#dialogContent").dialog( "open" );
});
});

jquery ui popup doesn't work more then once

I am working on mvc project where jquery is heavily used. In one of the views there us accordion control with multiple (three) views inside.
The jquery popup works fine in the first panel, but once I close that panel, the popup doesn't want to work again.
I have no idea what can be, although I used http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ and http://jsfiddle.net/DSNt5 as guides.
Please find the code below.
Markup:
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<button id="opener">Open Dialog</button>
<h2 class="demoHeaders">Dialog</h2>
<p><span class="ui-icon ui-icon-newwin"></span>Open Dialog</p>
</div>
</div>
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
JS:
<script type="text/javascript">
$(document).ready(function () {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function () {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
<script type="text/javascript">
$(function() {
$( "#dialog2" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
})
var openDialog = function(){
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>
I have the buttons from both samples there, and both of them are doing the same thing.
Every advice will be greatly appreciated.
Thanks in advance, Laziale
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
}
});
</script>
<script type="text/javascript">
var openDialog = function(){
$('#dialog2').dialog('open');
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>
You should only initialize your dialog once. You are reinitializing it every time you click.
Initialize it on document ready and then in your click handler just call
$('#dialog2').dialog('open');
EDIT:
You still have dialog initialization happening in your openDialog function. Try this:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
buttons: {"Cancel": function(){
$('#dialog2').dialog('close');
}
});
$('#opener').click(function(){
$('#dialog2').dialog('open');
});
}
});
</script>

why doesn't jquery confirm modal work on my app?

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

Categories