We Keep Coding

Getting ui element value of jquery dialog

I have two web form e.g. webform1 and webform2 . i am calling webform2 as dialog from webform1. I want to access ui element(e.g. hidden field) on click button event of dialog.
When focus was on dialog (webform2) then i am able to get hidden filed value in console but when i click on dialog button and code executing button event in JS that time hidden field value becomes undefined.
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 950,
title: "Add Lines to Manual Invoice",
close: function () {
$(this).dialog("close");
},
buttons: {
okay: function () {
console.log($('#HiddenField1').val()) // This is undefined while i want to access webform2 vlaue
$(this).dialog("close");
}
},
show: {
effect: "slide",
duration: 1500
}
});
$("#opener").click(function () {
$("#dialog").dialog('open');
return false;
});
});
i have load webform2 in iframe tag like below:
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title"><iframe style="border: 1px;height:700px;width:930px;" src="WebForm2.aspx"></iframe></div>

I have resolved this with below line of code.
$(this).find('iframe').contents().find('[id="HiddenField1"]').val()

How can I load a pop up box with a specied URL in asp.net using JavaScript?

I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>

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 dialog not opening/closing

i have code like this:
The dialog does not open when i use this.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog('open');
}
but does when i use this! I have it initialized with autopen false above too.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
}
what is wrong?
close does not work either.
initialized with:
$("#dialog-unauthenticated").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
Not sure if this helps, but im invoking this in response to a jquery post.

you need to initiate the dialog first.
then you can do actions after.
so e.g.
$('<div id="dialog" />')
.dialog({
modal:true,
buttons:{
cancel:function(){
$(this).dialog('close');
}
}
});//init dialog
$('#open').click(function (){
$('#dialog').dialog('open');
});
$('#close').click(function (){
$('#dialog').dialog('close');
});
As you are trying to open the dialog when its not initiated. therefore the dialog does not exist so it cnt be opened