I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?
Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.
I have an javascript / jquery object that renders html - a div with a table and an edit button, and a jquery popup dialog.
I have always called the jquery dialog in $(document).ready(function(){});
Is it possible to create the dialog when I create the object.
in other words
object = new newTable('div_id');
and in the object there is
$(document).ready(function()
{
$( "#" + this.popup_id ).dialog(
{
autoOpen: false,
height: 600,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Next": function()
{
process_account_wizard('next');
},
"Skip": function()
{
process_account_wizard('skip');
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
});
so when the document is ready the objects sets up the dialog.
An alternate question is can I automatically run initialization code for an object once the page is loaded?
Edit: I have confirmed I can first create the object then run object.init() in the document ready function and the dialog works correctly. Trying to avoid this an make the object do it automatically.
I might have to edit this question a few times to figure out how to ask it. Thanks for your help
Basically you want to convert your object variable (though I'd want to think up a more appropriate name than "object") and initialise the dialog against that.
So, within whatever function calls object = new newTable('div_id'); paste your dialog initialisation from your question replacing -
$( "#" + this.popup_id ).dialog(
with
$(object).dialog(
I am doing a project and I need to disable a jquery ui dialog button from code behind. My code is :
var viewPopup = $('#popupPanel').dialog({
modal: true,
autoOpen: false,
height: 580,
width: 800,
appendTo: $('form:first'),
buttons: [{
id:"jqueryBtn",
text: "Submit",
click: function () {
$("#<%=aspnetBtn.ClientID%>").click();
}
}]
});
I need to disable jqueryBtn from code behind. I know it is a client-server issue. How can I do that?
Thanks in advance :)
Create an asp:HiddenField as a flag. Set the flag on code-behind. After the code runs there will be a postback and after that DOMReady. In DOMReady check the flag and disable / enable the button.
Not 100% sure what you want to achieve
but if you want to disable a button in server side, there are a few options：
make the button an asp.net server control like using tag, then put the logic in code behind
have an disable button function in client side, then call that function in server side by using ScriptManager.RegisterClientScriptBlock
you can use jquery dialog event open
var viewPopup = $('#popupPanel').dialog({
modal: true,
autoOpen: false,
height: 580,
width: 800,
appendTo: $('form:first'),
buttons: [{
id:"jqueryBtn",
text: "Submit",
click: function () {
$("#<%=aspnetBtn.ClientID%>").click();
}
}],
open: function() {
$('#jqueryBtn').button("disable");
}
});
and this is a DEMO
thsi is not a jquery ui question but a JavaScript object question
function uiDialog()
{
...............
...............
$('#dialog ').dialog({
width:'auto',
height :'auto',
resizable: false
});
..............
..............
}
Above is a jquery ui dialog code. Now everywhere i want a dialog am calling uiDialog(). Now ui has so many options that are rarely required. So i am considering passing a object as a parameter and appending it to this default data but how can i do it .can i do
$('#dialog ').dialog({
width:'auto',
height :'auto',
resizable: false,
myObject
});
Will this work or can you suggest any other way if this fails
Use the jQuery.extend(); function.
$('#dialog ').dialog(
$.extend(
{
width:'auto',
height :'auto',
resizable: false
},
myObject
)
);
I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks
You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.
I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.
I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.
For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});
<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>
This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.
$(this).dialog('destroy');
works!
.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs
I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.
I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.
The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.