Develop Reference

Clicking button inside popup window not working

I created a simple popup window which contain label and button, and I want to set a text to the label by clicking the button inside the popup window. I tried doing this but it didn't work and I realized that it only work if I moved the label and button outside the popup window.
button to open popup window:
<asp:linkbutton ID="Linkbutton1" runat="server" onclientclick="openPopup()" > open popup window</asp:linkbutton>
popup window code:
<div id="popupdiv" title="Basic modal dialog" style="display: none">
<asp:Label ID="Label15" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="change_text" />
</div>
<script type="text/javascript">
function openPopup() {
$("#popupdiv").dialog({
title: "Test",
width: 290,
height: 240,
position: [400, 100],
modal: true,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
}
</script>
the code behind to run the button inside the popup window:
protected void change_text(object sender, EventArgs e)
{
Label15.Text = "Test";
}

1.) Change your method name change_text or change OnClick="transfer".
2.) Add appendTo form in jquery.
$("#popupdiv").dialog({
title: "Test",
width: 290,
height: 240,
position: [400, 100],
modal: true,
appendTo: "form",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});

Access a button on modal page

I've got a page that opens a modal (Page1.aspx).
That modal is another aspx page (Page2.aspx).
How can I declare in the opener page (or any other way), that a modal button, executes a button click in Page2.aspx.
I've tried to put:$('#ButtonOK').click(); (as it's the buttons id), but on the parent page it isn't recognized.
How can I execute that click?
Many thanks.
MY CODE, PAGE1:
function createModal(f,w,h) {
var dialogWidth = w;
var dialogHeight = h;
$('#dialog').dialog({
autoOpen: false
, bigframe: false
, modal: true
, width: dialogWidth
, height: dialogHeight
, autoResize: true
, closeOnEscape: true
, position: { my: "center", at: "center", of: window.top }
, open: function (event, ui) {
$('#dialog').css('overflow', 'hidden'); //this line does the actual hiding
}
,buttons: {
Ok: function () {
$("input[id$='ButtonOK']").trigger('click');
},
Cancelar: function () {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
$("#iframe").attr('src', f);
return false;
}
function PermMV(usr) {
createModal('new.aspx?usr=' + usr,350,450);
}
<div id="dialog" style="display: none;">
<iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" align="middle"></iframe>
</div>
PAGE 2:
<div id="acrescenta2" title="Perm">
<asp:TextBox ID="txtuser1" name="txtuser" runat="server" Text="" CssClass="consprodtxt" />
<asp:Button ID="ButtonOK" runat="server" OnClick="ButtonOK_Click" OnClientClick="ButtonOK_Click" Text="OK" CssClass="btnmv" />
</div>
Hope that helps.

You need to use IFrame Like This,
<div class="modal-body" id="modal_dialog">
<iframe style=" width:100%; height: 100%;" id="ifrm" src="yourExternalPage.aspx" runat="server">
</iframe>
And Open This Div as a Dialogue using JQuery,
<script type="text/javascript">
$("#BtnClick").live("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
1<>Simple jQuery Modal Popup Window Example in ASP.Net
2<>Modal popup using jquery in asp.net

$(document).on("click","element",function(args){
//...
});
Try it

Try this:
$("#ButtonOK").trigger('click');

Asp:Button - if OnClientClick = True | False

<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="CreateInvoice_Click()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
}
}
});
}
</script>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
So user presses the 'Create Invoice' button, pop up appears allowing the user to select 'Create' or 'Cancel'.
The 'CreateInvoice_Click' function is run on code behind if the user clicks 'create' or 'cancel'. What I want to know (which needs to go inside the 'cancel' function') how do I say ignore the OnClick="CreateInvoice_Click1" if cancelled is clicked.?
Thanks for any replies

if you want to prevent the server side function from execution you simply need to return false in your client side function.
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;// that's all what you need
}
}
});
}

Seems like you are tryign to recreate something javascript does with a built in function.
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer){
alert("Bye bye!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!")
}
}
Taken from http://www.tizag.com/javascriptT/javascriptconfirm.php

you should try manually calling the serverside click event by using javascript;
checkout the code inside Create and Cancel button;
<script type="text/javascript">
$('#test').on('click', function(e){
e.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
// manually calling serverside click event
$('#buttonHidden').click();
},
Cancel: function () {
//code needed here
$(this).dialog("close");
// don't call it manually here and thus it won't fire the serverside click event
}
}
});
});
</script>
// your button here to call javascript
<button id="test" runat="server">Create Invoice</button>
// the hidden button just to hold the CreateInvoice_Click1 which is fired from fireClick()
<asp:Button ID="buttonHidden" runat="server" Style="display: none" OnClick="CreateInvoice_Click1" />
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}

<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="return Create_Invoice()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
return true;
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;
}
}
});
}
<p id="dialog-confirm"><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}

Render partial page on popup dialog

I am trying to load a partial view onto a popup dialog box.
I have created the code for the dialog box which works. i would like to know how i would be able to load this partial view onto the dialog box though a link click all the code is provided below about the link, java script and popup dialog box.
HTML Code:
<div id="mediaContainer" class="jqmDialog" style= "width:750px; left:23%; top:18%; height:525px; ">
<div class="jqmnTitle jqDrag">
<h1>Subscriptions</h1>
</div>
<img class="jqmClose" style="position: absolute; cursor: pointer; right: 2px; top: 2px;" onclick="closeDialog();" src="#VirtualPathUtility.ToAbsolute("~/Content/images/close.gif")"
alt="Close" height="20px" width="20px" />
<center>
<div id="divpart"></div>
</center>
</div>
JAVA script:
function renderPart(element, templateId) {
makeDialogBox();
jQuery.get(FBUrl, { id: templateId }, function (data) {
// alert(data);
$("divpart").append(data);
});
}
Hyper Link:
Subscriptions

Make the XMLHttpRequest to your URL of the partial view using native javascript or jquery and append the output to one of the div inside the modal dialog box. I am using jquery
function renderPart(element, templateId){
$.ajax({
url : '',
type : 'GET',
succsess : function(response)
{ $("#divIDinsideModalBox").html(response); makeDialogBox(); }
});
}

jQuery.get("InsertURLHere", { id: templateId }, function (data) {
// alert(data);
$("divpart").append(data);
});

Dialog Box appears and then disappears

When I click on the button Dialog Box it appears and disappears, I tired using different plugins and hundreds of tutorial but dunno why things not working properly maybe because, I am using ASP.Net page and its inheriting from a masterpage
here's the code,
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
<input id="test" type="submit" value="Show Dialog" />
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript" src="/_layouts/1033/ui.core.js"></script>
<script type="text/javascript" src="/_layouts/1033/jquery-ui-1.7.3.custom.js
"></script>
<script type="text/javascript" src="JS.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
<hr />
</asp:Content>
Its a jquery plugin I downloaded from here,
Jquery Plugin I am using

because you are using
<input id="test" type="submit" value="Show Dialog" />
which cause postback due to which dialog disappear try
<input id="test" type="button" value="Show Dialog" />

your button #test is a submit button, that needs to prevent submitting to form if you want to see the message
try
$('#test').click(function(e) {
e.preventDefault();
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});

Try this code, I hope it will work:
$('#your form name').submit(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});