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
});
Related
Not related to:
Another object on this page already uses ID 'XXXXXXX'
I've got a jQuery Multiselect Listbox control on my page:
jQuery(document).ready(function () {
jQuery(function () {
jQuery("#UCStyle1 select").multiselect({
header: true,
height: 175,
minWidth: 240,
size: 3,
classes: '',
checkAllText: 'Check all',
uncheckAllText: 'Uncheck all',
noneSelectedText: '0 Selected',
selectedText: '# selected',
selectedList: 0,
show: null,
hide: null,
autoOpen: false,
multiple: true,
position: {},
appendTo: "body"
});
});
It's referenced a bunch of times in div tags like this:
<tr>
<td>
Looking for:
</td>
<td colspan="3">
<div id="UCStyle1">
<asp:ListBox ID="MatchGender" SelectionMode="Multiple" runat="server">
</asp:ListBox>
</div>
</td>
</tr>
<tr>
<td>
State:
</td>
<td colspan="3">
<div id="UCStyle1">
<asp:ListBox ID="sState" SelectionMode="Multiple" runat="server">
</asp:ListBox>
</div>
</td>
</tr>
So, they need to reference that jQuery, but they're different controls.
I'm getting the warning:
Another object on this page already uses ID 'ucstyle1'
Multiple times.
Any idea how I can clean this up so that I don't get that warning? I think it's causing the page to look completely wonky on IE, but Firefox doesn't seem to care about it.
You have two div tags with same id (UCStyle1) but since id is unique you cannot use a duplicate one in a page. You can use class instead of id if you want to repeat it.
<div class="UCStyle1">
And
<div class="UCStyle1">
And:
jQuery(".UCStyle1 select").multiselect({
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");
}
}
});
}
I am loading ASP.NET user control dynamically using JQuery:
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var topics = xml.find("Topics");
topics.each(function () {
var table = $("#dvTopics table").eq(0).clone(true);
var customer = $(this);
$.ajax({
type: "POST",
url: "TopicList.aspx/LoadUserControl",
data: "{message: '" + topics.find("desid").text() + ",'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
table.append(r.d);
}
});
$("#dvTopics").append(table).append("<br />");
});
$("#loader").hide();
}
User Control code:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="TopicRow.ascx.cs" Inherits="TopicRow" %>
<link rel="stylesheet" type="text/css" href="Styles/Global.css" />
<asp:Panel ID="Panel1" runat="server" BorderColor="Maroon" Width="600px" style="margin:0">
<asp:LinkButton ID="Title" runat="server" Font-Bold="True" Font-Names="Segoe UI Semibold,Segoe UI Light, Tahoma, Geneva, Verdana, sans-serif" Font-Overline="False" ForeColor="Maroon" Text="This is a test title." Font-Size="Larger"></asp:LinkButton>
<br />
<asp:Label ID="lblAuthor" runat="server" Text="By: Aishwarya Shiva Pareek" Font-Size="Medium" ForeColor="#666666" Font-Names="Segoe UI Light, Tahoma, Geneva, Verdana, sans-serif"></asp:Label>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><div style="float:right; height:32px; width:32px"><asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="Working..." class="auto-style5" src="Images/ajaxloader.gif" width="32px" height="32px" />
</ProgressTemplate>
</asp:UpdateProgress></div>
<div style="font-family:Segoe UI Light, Tahoma, Geneva, Verdana, sans-serif">
Upvoted By
<asp:Label ID="lblUp" runat="server" Text="23"></asp:Label>
| Down voted By
<asp:Label ID="lblDown" runat="server" Text="2"></asp:Label>
<br />
<asp:LinkButton ID="lnkUp" runat="server" ForeColor="#003300" OnClick="lnkSupport_Click">Up Vote</asp:LinkButton>
<asp:LinkButton ID="lnkDown" runat="server" ForeColor="Red">Down Vote</asp:LinkButton>
<asp:LinkButton ID="lnkAddComment" runat="server" ForeColor="Maroon">Add Comment</asp:LinkButton></div>
</ContentTemplate>
</asp:UpdatePanel>
<hr style="color:maroon;"/>
</asp:Panel>
C# Code to add user control:
public static string LoadUserControl(string message)
{
using (Page page = new Page())
{
UserControl userControl = (UserControl)page.LoadControl("TopicRow.ascx");
(userControl.FindControl("Title") as LinkButton).Text = message;
page.Controls.Add(userControl);
using (StringWriter writer = new StringWriter())
{
page.Controls.Add(userControl);
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
}
}
But at line HttpContext.Current.Server.Execute(page, writer, false); its showing:Error executing child request for handler 'System.Web.UI.Page'.exception. What can be the reason?
There is no json response from LoadUserControl server side script, you need to use json response.
The exception is thrown because you are using server side controls inside user control. ASP.NET requires that server side controls are inside a form control to render them properly, otherwise an exception is raised.
To get around this exception, you need to update your code, for exmaple like this:
HtmlForm form = new HtmlForm();
form.Controls.Add(userControl);
pageHolder.Controls.Add(form);
This will render your user control inside a form, which could be problematic. I suggest you to use a more cleaner approach without update panels and server side events.
Regards,
Uros
<link type="text/css" rel="stylesheet" href="scripts/jquery-ui-1.8.5.custom.css" />
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function getalert1(Leave_RegisterID)
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
$(function () {
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode",
display: ''
});
$('.LeaveReason1').click(function ()
{
$('#reason').html();
$('#reason').dialog('open');
return false;
});
});
}
</script>
The Button that i click :
<button id="LeaveReason1" class="LeaveReason1" onclick="getalert1('<%# Eval("Leave_RegisterID") %>');" title="Decline">Decline</button>
However when i debug in firebug it does not got inside this code which it should :
$('#reason').html();
$('#reason').dialog('open');
return false;
HTML
<div id="reason" style="height: 300px; min-height: 109px; width: auto; display:none;" class="ui-dialog-content ui-widget-content" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" class="body_txt" style="padding-right:2px">
<asp:Label ID="lblReason" runat="server" Text="Reason:" ></asp:Label>
</td>
<td width="75%">
<asp:TextBox ID="txtReason" Height="40%" Width="100%" MaxLength="200" TextMode="MultiLine" runat="server" CssClass="txt_bx" ></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button Width="30%" runat="server" Text="Submit" id="btnSubmit" Height="25px" CssClass="clButton" ></asp:Button>
</td>
</tr>
</table>
</div>
it does not go inside the above given code.. since you have that code inside another click event..so basically for that to work you have to click the same button again.... which will not work..
try this
function getalert1(Leave_RegisterID) // you are calling this function whn click
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
//$(function () { and no need of ready function here
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode",
display: ''
});
// $('.LeaveReason1').click(function () { again you have a click event here which is not necessary at all.. since the click is already fired by getalert1()
$('#reason').html();
$('#reason').dialog('open');
return false;
});
}
$(document).ready(function(){
//separate your dialog init
$(function() {
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
});
//only have one click event
$('.LeaveReason1').click(function ()
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
$('#reason').html();
$('#reason').dialog('open');
return false;
});
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);}