We Keep Coding

How to resue a jquery dialgue in asp.net

I have jquery shown below for a jquery dialogue.Here div idTestForm is used as popup window.I want to reuse it for any number of Div's coming under any pages.If that is the case first step i will do is i will create separate .js file i will add this script.But i don't know how to change code in order to make it for any kind of Div's ie, how to pass div from any pages??etc
<script type="text/javascript">
function showBscDetails() {
$("#idTestForm").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: 'Leaf Details',
appendTo: "form",
modal: true,
draggable: true,
resizable: true,
show: 'blind',
hide: 'blind',
width: 1100,
height: 600
}).prev(".ui-dialog-titlebar").css("background", "#6A7667");
$("#idTestForm").on('dialogclose', function (event) {
location.reload(true);
});
}
EDIT
As of now i am calling this function from scriptmanager.registerstartupscript from code behind ie c# file

Make the parent page non editable

i have a parent jsp page in which i do all the manipulation for my retriving data to backend
I have a button in the parent page upon which if i make a click action then it will open a new dialog which contains a table of input fields
I need to make my parent page non editable when this dialog box is opened
Here is my javascript :
function addscenario() {
$( "#addscenariodiv" ).dialog({ dialogClass: 'no-close' });
dialog = $("#addscenariodiv").dialog({
autoOpen : false,
height : 100,
width : 700,
modal : true,
buttons : {
close : function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
}
});
dialog.dialog("open");
}

I see, you are already using a modal dialog. There might be few errors in your console. Anyways, I have fiddled a sample here in this link. Hope you can fiddle your solution there too.
<button id="dialogButton" >Open Dialog</button>
<div id="dialog-message" title="Important information" style="display: none;> .... </div>
This is the div which is hidden by default. Clicking on the button the content in the div dialog-message is rendered as the modal dialog.
$("#dialogButton").click(function(){
$("#dialog-message").show();
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
});

jquery dialog too many buttons

here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?

jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery

jQuery UI Dialog Caches for quick second

I have multiple images on a page, that pops up the related big image in a dialog box.
But when I click image 2, images 1 shows first before image 2 comes in, in the first .5 seconds.
How can I clear image 1 out completed when I close it?
I try destroy, but that kills the entire functionality when time to click image 2.
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
position: 'middle',
draggable: false,
minWidth: '960',
maxheight:'500',
overlay: true,
modal: true,
show: "fade",
hide: "fade",
position:'top',
close: function(event, ui) {
$("#dialog").dialog("destroy");
}
});
});

.dialog('destroy') only removes the dialog capabilities from that div. you need to empty it!
close: function(event, ui) {
$("#dialog").empty().dialog("destroy");
}
edit: ahh, right, you want to keep the dialog, but empty it right? take off the .dialog('destory') then, just empty it.
close: function(event, ui) {
$("#dialog").empty();
}

I use remove instead of empty..
close: function(event, ui) {
$("#dialog").remove().dialog("destroy");
}

String contains an invalid character on jquery-ui dialog

Never happen to me when making a dialog with jquery-ui. I have a div and when I make it a dialog with .dialog I get this error
[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://localhost/include/jquery-1.5.1.min.js Line: 16"] { constructor=DOMException, code=5, more...}
I have jquery 1.5.1 with UI 1.8.13 custom with all the plugin inside.
This is the code for the dialog in document ready
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: {
"Reset": function() {
}
}
});
and this is the div
<div id="dialog">some text</div>

I am experiencing the exact same problem only difference is that that in my code the whole options is coming from an JSON encoded server response using $.getJson:
$.getJSON(
'/get-dialog',
function(r){
$('<div>' + r.content + '</div>').dialog(r.options);
}
);
At the moment I added a key called buttons to the r.options object this exact same error appeared.
So the response (r) basicly looks like this:
content
"<form action="/editor">...</form>"
options
resizable false
width 600
modal true
buttons
Ok "function(){alert('test')}"
Removing the buttons from the r.options makes the error message go away. I tried several different key / values for the buttons but none of that seems to matter.
Using jQuery UI version 1.8.16 and jQuery version 1.6.2 .
After reading some further I found out that we are both making the same mistake. If you look at the jQuery UI Dialog documentation it gives the following example:
$( ".selector" ).dialog({ buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
(Source: http://jqueryui.com/demos/dialog/)
So you shouldn't be using key / value pairs but a sub array containing the keys text and click.
Since we both where doing this wrong (and I've found others with the same problem) I'm guessing that this has been changed over some version in jQuery UI. I am not sure when it was changed though.
So in your case the correct code would be:
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: [
{
text: "Reset",
click: function() { }
}
]
});