jQuery - cannot call methods on dialog prior to initialization - javascript

This one is really bugging me. I'm getting an error in my console of Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
$( function() {
$('#search_all_notes_input').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
/* Make the Search div a button and open dialog on click */
$( "#search_all_button" ).button().click(function() {
$( "#search_all_notes_input" ).dialog( "open" );
});
});
$('#submit_search_all_button').click( function () {
var searchText = $('#search_all_text').val();
var query = location.search.split('=');
var urlMrn = query[1];
formData = { mnr: urlMRN, search_text: searchText };
console.log(formData);
//$.post('note_search.php', formData, getMatchedNotes(data));
$(this).dialog('close');
});
Any ideas? I'm using a button element inside my dialog div instead of a custom dialog button. Also, the script is loaded at the very end of my HTML page

The problem is you're calling the dialog('close') on the #submit_search_all_button button, not the #search_all_notes_input element that you originally created a dialog on.
Instead of $(this).dialog('close');, use this:
$('#search_all_notes_input').dialog('close');

Related

jQuery dialog can not call second time

IE v11 on windows 10 using jQuery v2.2.2 and jQuery-ui v1.10.0
Can't get a dialog to open a second time. I was having trouble getting the ok button to close the dialog and solved that by getting a reference to the dialog with the 'PDdialog = '. Now on the second attempt I get error: Object doesn't support property or method 'dialog'. I even tried adding the .remove() in the Ok function.
$( document ).ready(function() {
$.ajaxSetup({ cache: false });
$( ".pnopener" ).on( "click", function() {
var pn = $(this).text();
var tag = $("<div id='pd-dialog' title='PN Details'></div>");
$.ajax({
type: "GET",
url: 'ajax/PNDetails.php?pn=' + pn ,
success: function (data) {
PDdialog = tag.html(data).dialog({
resizable: true,
height: 600,
width: 750,
modal: true,
buttons: {
Ok: function() {
PDdialog.dialog( "close" );
$( ".pd-dialog" ).remove();
}
}
}).dialog('open');
}
});
});
});
and just for clarity here is the calling html:
<span class="pnopener" style="color: darkorange;">[Changing string]</span>
This is in a table td.
more:
In Firefox the error is: TypeError: tag.html(...).dialog is not a function
Thanks!!

JQUERY dialog Uncaught Error: cannot call methods on dialog prior to initialization

I have the following javascript which opens a JQUERY Dialog box which contains a partial view:
html
<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>
javascript
$(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
});
$('#addressLookupBtn').click(function () {
$('#dialog').dialog('open');
});
});
When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'
I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:
var $this = $(this);
But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.
edit
If I add this:
$('#addressLookupBtn').click(function () {
$('#dialog').dialog().dialog('open');
});
The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.
The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.
Add and empty DIV inside the dialog then call .load on that.
<div id="dialog" title="Address Finder">
<div style="overflow: hidden;"></div>
</div>
Then the JS:
$('> div', this).load("#Url.Action("AddressLookup")");
I needed to initialize a new dialog each time I clicked the botton, this did the trick:
<script type="text/javascript">
$(function () {
$('#addressLookupBtn').click(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
width: 700,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
}).dialog('open');
});
});
</script>

How to bind the close event for this script jquery

Hi i need to reload the parent page when close button clicked on modal dialog.
my code is:
//customer edit start
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.post("sample.php",
{
name:myGroupId,
},
function(data,status){
});
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
I tried for close button as/
$( ".ui-dialog-titlebar-close" ).click(function() {
window.location.reload(true);
});
on below also tried inside.Nothing works.Can anybody help me.Thanks.
You can use native create event of dialogue to bind close button click. Like this:
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn",
create: function() {
$(this).closest('div.ui-dialog')
.find('a.ui-dialog-titlebar-close')
.click(function(e) {
window.location.reload(true);
e.preventDefault();
});}
});
Working Demo
Try to use window property , to get access to main page from iframe
top Returns the topmost browser window
can you give link to your page or example at jsbin?
Elements that are added to the DOM at runtime requires event delegation as your popup is generated using model (jQuery UI)
You can execute a click event of close button by doing this:
$(document.body).on('click','.ui-dialog-titlebar-close',function(e) {
e.preventDefault(); // To prevent default dialog close action
window.location.reload(true);
});
See the API documentation for .on()
May be this will fix. But i think close() of model popup is already defined in UI. You may prevent the default action.

JqueryUI Tooltip on modal button re-appears on modal close

Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?
The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});
I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});

How to destroy a progressbar on dialog closing?

I have these 2 functions one of them is to create a dialog and the other is to destroy a progressbar,
after i create the dialog i might need to create a progress bar inside it and start it, but when i close the dialog, the progress bar keeps running in the back ground.
what i need is to destroy or do anything to stop this progress bar from working.
I wrote the createdialog function with a beforeclose event to destroy the progress bar but it doesn't work, and the dialog is not even closing, like the close button is none responsive.
function createdialog(trgt,h,w) {
$( trgt ).dialog({
height:h,
width:w,
autoOpen: false,
show: {
effect: "blind",
duration: 200
},
hide: {
effect: "blind",
duration: 100
},
beforeClose: function( event, ui ) {
destroyprogresspar(trgt);
}
});
}
destroyprogresspar(dialg) {
if(dialg=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(dialg=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
}
i tried making a closing handler upon creating the dialog like this (WORKS BUT MESSY):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
if(trgt=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(trgt=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
});
and it works but can't make it call a function instead the if conditions like this (DOESN'T WORK):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
destroyprogresspar(trgt);
});

Categories

Resources