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');
Related
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');
}
}
});
I'm using an out of the box implementation of JQuery UI Dialog on a .net form:
<form id="form1" runat="server">
<asp:Button ID="btnTest" runat="server" Text="Open Me"
onclick="btnTest_Click" />
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$("#dialog").dialog(
{ autoOpen: false });
$("#btnTest").click(function () {
$("#dialog").dialog("open");
});
</script>
</form>
I have two questions. First, I want the content of the dialog to be dependent on some logic that happens after the button click event is processed in the codebehind. How can I do that?
Second, just testing it above in demo mode, fires the dialogue but immediately closes it. I'm assuming it has something to do with e.preventDefault(), or thats what I've read, but I'm not sure how that will factor in if I tie it to run after the postback of the form.
To call the server you will need to make an Ajax call to get the data you need to display:
$('#dialog').dialog({
autoOpen : false,
width : 500,
height : 400,
resizable : true,
modal : true,
open : function()
{
jQuery.ajax({
type : "POST",
url : //"post Url ex. Default.aspx/OpenDialog",
data ://data to send to the server,
dataType://the data type,
success : function(response)
{
$('#dialog').html(response);
},
error : function(xhr, ajaxOptions, thrownError)
{
alert("Error: " + thrownError + "Status: " + xhr.status);
}
});
},
buttons : {
"Close" : function()
{
$(this).dialog("close");
}
}
});
and in your button click you will do :
$("#btnTest").click(function () {
$("#dialog").dialog("open");
});
We can use ScriptManager.RegisterStartupScript in the code behind button click event. Then we can have a javascript function in the aspx page which actually has the dialog logic.
ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction();", true); //in code behind file
function myFunction(){
// update something to dialog div
$("#dialog").dialog(
{ autoOpen: false }
);
$("#dialog").dialog("open");
}
You want some value from code behind to front end?
if yes:
then at code behind :
protected void Button1_Click(object sender, EventArgs e)
{
HiddenField1.Value = " from code behind";
ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction('Hello');", true);
}
and at aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</style>
<script>
function myFunction(a) {
$("#dialog").text(a+$("[id$=HiddenField1]").val());
$("#dialog").dialog();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" title="Basic dialog">
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
Hope it may help you.
<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
}
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);
});
I'm trying to call an blockUI after a buttonclick, but I can't get it to work.
What am I doing wrong?
Script:
$(function() {
$('#<%= btnSave.ClientID %>').click(function(e) {
e.preventDefault();
$.blockUI({
message: '<div><h1><img src="Images/busy.gif" /> Please wait...</h1>',
css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }
});
var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
btn.click();
});
});
Button:
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" Width="200" />
Since you're in an UpdatePanel, use .live() here, like this:
$(function() {
$('#<%= btnSave.ClientID %>').live('click', function(e) {
e.preventDefault();
$.blockUI({
message: '<div><h1><img src="Images/busy.gif" /> Please wait...</h1></div>',
css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }
});
var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
btn.click();
});
});
.live() listens at the document level for a click from btnSave to bubble up...so it works when the element is added, removed, replaced, etc. (and your UpdatePanel is replacing it each postback), where as .click() attaches directly to the element...and that click handler is lost when the element is replaced.