I have a jquery-ui modal dialog on my page which I show when a user clicks a Decline button on a control which is contained within an asp.net UpdatePanel, there are many of these controls on the page.
Script:
function confirmDecline(event) {
event.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$('form').submit();
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Pod markup:
<div class="dms-pod">
<ul>
<li><strong><asp:Literal ID="litCompanyName" runat="server" /></strong></li>
<li><asp:Literal ID="litVatNumber" runat="server" /></li>
<li><asp:Literal ID="litTown" runat="server" /></li>
</ul>
<asp:Panel ID="pnlDmsForm" runat="server" CssClass="dms-form" DefaultButton="btnAccept">
<asp:TextBox ID="txtDmsNumber" runat="server" placeholder="DMS number" />
<asp:RequiredFieldValidator ID="reqDmsNumber" runat="server" ErrorMessage="Invalid DMS number" Display="Dynamic" CssClass="error" ControlToValidate="txtDmsNumber" />
<ajaxToolkit:ValidatorCalloutExtender ID="valDmsNumber" runat="server" TargetControlID="reqDmsNumber" HighlightCssClass="error" />
<div class="dms-buttons">
<div class="container">
<asp:LinkButton ID="btnAccept" runat="server" CssClass="btn" Text="accept" OnClick="btnAccept_Click" />
</div>
<div class="container">
<asp:LinkButton ID="btnDecline" runat="server" CssClass="btn-alt" Text="decline" OnClick="btnDecline_Click" OnClientClick="confirmDecline(event)" />
</div>
</div>
<div class="clear"></div>
</asp:Panel>
<div class="clear"></div>
<asp:HiddenField ID="hdnDealershipIRLinkID" runat="server" />
Which is then contained inside an update panel:
<asp:UpdatePanel ID="updPendingDms" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Repeater ID="rptPendingDmsRequests" runat="server" OnItemDataBound="rptPendingDmsRequests_ItemDataBound" OnItemCreated="rptPendingDmsRequests_ItemCreated">
<ItemTemplate>
<uc:DmsRegisterPod runat="server" ID="ucDmsRegisterPod" />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I'm using event.preventDefault() to stop the button action from firing, however, I'd also like to allow the action to continue if the user clicks the Confirm button. I had assumed I could just use:
$('form').submit();
In the dialog Confirm function, but this fires the validators of the other controls in the repeater/update panel. Is there a way to achieve this?
Managed to solve this, posting the answer in case it helps anyone else facing a similar problem.
I pass in the id of the control which triggered the click:
OnClientClick="confirmDecline(event, this.id)"
I then fire off __doPostBack with this id in the dialog Confirm function:
function confirmDecline(event, controlId) {
event.preventDefault();
controlId = controlId.replace(/_/g, '$');
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$(this).dialog("close");
__doPostBack(controlId, '');
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Related
In My requirement I have 1 Dropdown and 2 buttons.
• Select Config File - Dropdown
• Create New
• View Config File - Button
• Modify Config File - Button
Here Select Config File is Drop down.If user clicks drop down "Create New" Option will come. If User clicks "Create New", then Pop up window should come.
Here is my code for Pop up window under ModelPopup.aspx,
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<asp:Button ID="ADDROWBTN" runat="server" Text="Add New Row" />
<asp:Button ID="SAVENEWBTN" runat="server" Text="Save as New" />
<asp:Button ID="SAVEBTN" runat="server" Text="Save" />
</div>
</div>
<script type="text/javascript">
$(function () {
$("[id*=btnvcf]").click(function () {
ShowPopup();
return false;
});
});
function ShowPopup() {
$("#PopUp").dialog({
title: "GridView",
width: 450,
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
}
</script>
</form>
Is this code correct. How can I display the Popup with this code.
I am doing a preview of what I am currently typing in a web page using ASP.NET. What I am trying to achieve is that whenever I type or change text in the textbox, the <h3> or label element will also change and always copy what the textbox value is without refreshing the browser. Unfortunately I cannot make it work. Here is what I tried.
.ASPX
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
.CS
protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
}
I Tried Adding Autopostback = true... but it only works and refreshes the page and i need to press tab or enter or leave the textbox :(
UPDATE: I Tried This - enter link description here But Still Doesnt Work :(
Just add this script function in your code and in body write onload and call that function.
Javascript:
<script type="text/javascript">
function startProgram() {
setTimeout('errorcheck()', 2000);
}
function errorcheck() {
setTimeout('errorcheck()', 2000);
document.getElementById("NewsTitlePreview").innerText = document.getElementById("Titletxt").value
document.getElementById("NewsContentPreview").innerText = document.getElementById("Contenttxt").value
}
</script>
<body onload="startProgram();">
<form id="form1" runat="server">
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" ></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</form>
</body>
You are right in your analysis of the behavior of the control (it only fires the event when you leave the control), even when you have AutoPostBack="True".
MSDN says it all:
The TextBox Web server control does not raise an event each time the user enters a keystroke, only when the user leaves the control. You can have the TextBox control raise client-side events that you handle in client script, which can be useful for responding to individual keystrokes.
So you either have to be satisfied with the current behavior, or set up some client side event handling to do some validation, etc. client side.
Download and include JQuery library. And also modify title and content textbox so they don't change their Id's
Title
<asp:TextBox ID="Titletxt" ClientIDMode="Static" runat="server"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" ClientIDMode="Static" runat="server"></asp:TextBox>
Then add this script and it will work.
<script>
$(document).ready(function () {
$('#Titletxt').on('input', function () {
$("#NewsTitlePreview").text($(this).val());
});
$("#Contenttxt").on('input',function () {
$("#NewsContentPreview").text($(this).val());
});
});
</script>
One of the best idea...
Just change your code to this. it works
ASPX
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ViewStateMode="Enabled">
<ContentTemplate>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
.CS
protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
UpdatePanel1.Update();
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
UpdatePanel1.Update();
}
Try this it will work this how change event call using jquery dont forget to add google apis
<script>
$('#txtbox').change(function() {
alert("change Event");
});
</script>
I have problem with jQuery. I have one button, one label, and one div in C#.
When I clicked on the button , the label shows some message after that the div will be show . So "button click" and "label shows" occurs only the div will be show. 2."button click" and "label Not shows" occurs, the div will not be show.
<script type="text/javascript">
$(document).ready(function () {
if ($('#<%=btnSave.ClientID %>').click(function () {
if ($('#<%=lblRegisteredUser.ClientID %>')==enable) {
$('#<%=RegisteredUser.ClientID %>').show();
$('#<%=btnCreateAccount.ClientID %>').hide();
};
}));
});
</script>
Edit: Code from the comments
<div class="form-controls1" id="RegisteredUser" runat="server">
<asp:TextBox ID="txtRegisteredEmail" placeholder="Email Address" runat="server" class="text-input required email"></asp:TextBox>
<asp:Label ID="lblRegisteredUser" runat="server" Text="" ForeColor="red"></asp:Label><br />
</div>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save Comment" ValidationGroup="Group2" />
This question already has answers here:
jQuery UI Dialog with ASP.NET button postback
(17 answers)
Closed 9 years ago.
that's my code :
<div id="AddFriendDiv" style="display: none">
<asp:TextBox ID="FriendParamtxt" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchFriend_btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="SearchFriend_btn" runat="server" OnClick="SearchFriend_btn_Click" Value="Search" />
<asp:Repeater ID="FriendRequestRepeater" runat="server">
<ItemTemplate>
<table border="1">
<tr>
<td>
<img src='<%#Eval("PROFILE_PIC") %>' width="35px" height="35px" alt='<%#Eval("NAME") %>' />
</td>
<td>
<asp:Label ID="Name_lbl" runat="server" Text='<%#Eval("NAME") %>'></asp:Label>
</td>
<td>
<input type="hidden" id="requestFriendID_hf" /><input type="button" id="addFreind"
value="Send Request" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
client side :
function SendFriendRequest() {
var dialogOption = { title: "<u>Add Friend</u>", width: 280, height: 140, modal: false, resizable: false, draggable: true,
maxHeight: 340, autoOpen: true, closeOnEscape: true
};
var DialogExtendOptions = { "close": true, "maximize": false, "minimize": true, "dblclick": 'minimize', "titlebar": 'transparent' };
$("#AddFriendDiv").dialog(dialogOption).dialogExtend(DialogExtendOptions);
$("#AddFriendDiv").show();
}
server side :
protected void SearchFriend_btn_Click(object sender, EventArgs e)
{
DataTable frdrequest= new DataTable();
int clientID =int.Parse( UserID.Value.ToString());
if (FriendParamtxt.Text != "")
{
frdrequest = SQLHelper.GetAllClientByParam(FriendParamtxt.Text, clientID);
if (frdrequest.Rows.Count > 0)
{
FriendRequestRepeater.DataSource = frdrequest;
FriendRequestRepeater.DataBind();
}
}
}
SendFriendRequest is beeing called form an a tag outside but the problem is that the button click event isn't firing when the main div is a dialog but when i changed it to normal div it work fine anyone know a solution for this ?
The problem is that jQuery UI appends the dialog to the body, rather than the form. ASP.Net controls need to be inside the form in order to function, but thankfully this is easy to fix. Modify your jQuery like so:
$("#AddFriendDiv").dialog(dialogOption)
.dialogExtend(DialogExtendOptions)
.parent().appendTo($("form:first"));
$("#AddFriendDiv").show();
This will help you
var dialog = $("#divModal").dialog({
autoOpen: false,
height: 515,
width: 900,
modal: true,
draggable: false,
resizable: false
});
dialog.parent().appendTo(jQuery("form:first"));
Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});
I have a modal popup extender and a panel inside of an update panel. I do have a Close button which I bind with the CancelControlId. I however, would like to be able to click outside of my modal/panel to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any help or advice is much appreciated. Thanks.
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
<asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
<asp:UpdatePanel ID="pnlMap" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div class="popup_large">
<asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
<br />
<asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Here is a link to an example that adds to the background onclick to close the modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
C#
<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />
JavaScript (using jQuery)
jQuery('.jsMpeBackground').click(function () {
var id = jQuery(this).attr('id').replace('_backgroundElement', '');
$find(id).hide();
});
I had to do it this way so that I was able to click the actual popup without it closing, as I have functional user controls such as tab sections and textboxes on the popup.
<script type="text/javascript">
//Hide's Doc Center when clicking outside
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
$addHandler($find("MPE")._backgroundElement, "click", closePopup);
}
}
function closePopup(e) {
$find("MPE").hide();
}
//End
</script>
Now just make sure your BehaviorID in your actual ModelPopupExtender matches up with the tag above. Like so:
<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />
Basically I think this just handles the 'click' event of the _backgroundElement attr of the modal popup, and on that event runs the closePopup() function.
write a dynamically created script that is added, in my example, when the modal popup extender is loaded. Note: In order to bind this event handler to the ModalPopupExtender.OnLoad event, you need to add a reference (in client-side code, you can add 'OnLoad="mpeExample_Load"' to your ModalPopupExtender tag).
protected void mpeExample_Load(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"hideModalPopupViaClient", String.Format(#"function hideModalPopupViaClient() {
{
var modalPopupBehavior = $find('{0}');
if (modalPopupBehavior) modalPopupBehavior.hide();}}",
mpeExample.ClientID), true);
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(#"function pageLoad() {
{
var backgroundElement = $get('{0}_backgroundElement');
if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);
}}",
mpeExample.ClientID), true);}