Only one UpdatePanel triggered by JavaScript updated the content - c#

I have two update panel which I triggered in javascript. After I run the code, only the second Panel's content is updated. Here is MyCode.
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">
<div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox1TargetLabel" runat="server" />:
<asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox1TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">
<div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox2TargetLabel" runat="server" />:
<asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox2TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I triggered code behind using javascript, however, after run the code, only the second is updated.
<script>
$(document).ready(function () {
$("#ContentPlaceHolder1_PaperContent_Button1").click();
$("#ContentPlaceHolder1_WaterContent_Button1").click();
});
</script>
But I want both UpdatePanel be updated. What can I do to enable both updatepanel be updated?

If you can, change the UpdateMode of the 2nd panel:
UpdateMode="Always"
then remove the 2nd .click() in the javascript. The 2nd panel should update when the first panel updates (when a postback happens).
If you can't use Always, you can add an OnLoad event to the 2nd panel and move any code you have to that event. When a postback happens the 2nd panel will always reload and the code will fire.
Hth.

Related

How to write ListView TextBox Items to Database for each row

I have this Listview:
<asp:ListView ID="fundingListView" runat="server" OnItemCommand="fundingListView_OnItemCommand" OnItemDataBound="fundingListView_OnItemDataBound" DataKeyNames="ID">
<ItemTemplate>
<div style="width:40px; float:left; margin:5px 15px 5px 0px; padding-left:10px;">
<asp:LinkButton ID="addFundingLinkButton" runat="Server" ToolTip="Finanzierung zuweisen" CommandName="addFunding" CssClass="insertTextModuleButtonFade"></asp:LinkButton>
</div>
<div style="float:left; width:40px; margin:10px 10px 5px 0px; text-align:center;"><%# Eval("id") %> </div>
<div style="float:left; width:120px; margin:10px 10px 5px 0px; text-align:center;"><%# Eval("financialPartnerId") %> </div>
<div style="float:left; width:80px; margin:10px 10px 5px 0px; text-align:center;"><%# Eval("accountNumber") %> </div>
<div style="float:left; width:120px; margin:10px 10px 5px 0px; text-align:center;"><%# Eval("fundingAmount") %></div>
<div style="float:left; width:120px; margin-left:40px;">
<asp:TextBox ID="fundingConfirmationAmount" runat="server" Width="96" Height="12"></asp:TextBox>
</div>
<asp:Label id="fundingAlreadyAddedButton" runat="server" style="visibility:hidden"><%# Eval("alreadyAdded") %></asp:Label>
<div class="clear"></div>
</ItemTemplate>
It is possible to change the value of the textbox "fundingConfirmationAmount" on the webpage.
How do I access the entered value in this textbox for each row of the listview and write the new text to my mysql database?
Thanks in advance
You can try this, have no chance to test if the control is found.
List<ListViewDataItem> lItems = fundingListView.Items.ToList();
foreach(ListViewDataItem item in lItems)
{
TextBox tb = item.FindControl("fundingConfirmationAmount") as TextBox;
string addToDatabase = tt.Text;
}

Changing message displays to bottom to top

Hi I am doing a social network service using asp.net/c#, I have little problems with message sending. Message are flowed top to bottom. Like this
But I want to display messages bottom to top Like facebook..
I am displaying messages using repeater control.
repeater control code
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
Textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>
The order of Items in the repeater will be the same as in DataSource, so just Order it by Time descending before bind.

Unable to get textbox value when in Multiview

I've created a multiview which has two views inside, one for some information, and the other one is meant to send a message. All works great for the first View, but as for the second one, the submit button of the message just won't respond when I click it, and won't fire its function.
Any suggestions how to make it work?
HTML:
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:Button ID="SendPM" style="margin-left: 112px; width: 170px; height: 30px; font-size: 20px; border-radius: 15px;" runat="server" Text="Send PM" onclick="SendPM_Click"/>
<div style="position:relative; top: 3px; margin-left: 20px; font-size: 25px; color: black;">
<i><% Response.Write(Session["ProfileEmail"].ToString()); %></i>
</div>
<br />
<div style="margin-left: 35px; font-size: 20px; color: black;">
<span style="font-size: 23px;">Firstname:</span> <i style="color:Green;"><% Response.Write(Session["ProfileFirstName"].ToString()); %></i>
<br />
<span style="font-size: 23px;">Lastname:</span> <i style="color:Green;"><% Response.Write(Session["ProfileLastName"].ToString()); %></i>
<br />
<span style="font-size: 23px;">PhoneNumber:</span> <i style="color:Green;"><% Response.Write(Session["ProfilePhoneNumber"].ToString()); %></i>
<br />
<span style="font-size: 23px;">Age:</span> <i style="color:Green;"><% Response.Write(Session["ProfileAge"].ToString()); %></i>
</div>
</asp:View>
<asp:View ID="View2" runat="server"> <!-- Here is the view for the message -->
<asp:Button ID="GoToDetails" style="margin-left: 112px; width: 170px; height: 30px; font-size: 20px; border-radius: 15px;" runat="server" Text="Details" onclick="GoToDetails_Click"/>
<br />
<br />
<div style="margin-left: 50px;">
Title: <asp:TextBox ID="TitleOfPM" runat="server" ValidationGroup="messagegroup"></asp:TextBox>
<br />
<br />
Content:
<asp:TextBox ID="ContentOfPM" TextMode="MultiLine" runat="server" ValidationGroup="messagegroup"></asp:TextBox>
<br />
**<asp:Button ID="SubmitPM" runat="server" Text="Submit" onclick="SubmitPM_Click" ValidationGroup="messagegroup" />**
</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void SendPM_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
protected void GoToDetails_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void SubmitPM_Click(object sender, EventArgs e)
{
PrivateMessageInfo message = new PrivateMessageInfo();
PrivateMessages u = new PrivateMessages();
message.title = TitleOfPM.Text;
message.content = ContentOfPM.Text;
message.PMSender = Session["email"].ToString();
message.SentTo = Session["ReplicateForEmail"].ToString();
DateTime dt = DateTime.Now;
message.SendDate = dt.ToShortDateString();
u.SendPrivateMessage(message);
Response.Redirect("HomePage.aspx?JobID=" + JobID);
}
Can you check if button defined in designer.cs file?

Prevent Modal Dialog from closing on submit when client side validation fails

I have a Submit button on the page, which upon being clicked, shows a modal popup window. This modal popup window contains a checkbox that must be checked before the OK button of the modal can be clicked:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function cvcbCertify_ClientValidate(sender, e) {
var elem = document.getElementById('<%= cbCertify.ClientID %>');
if (elem.checked)
e.IsValid = true;
else {
$('.pnlConfirm').show(); //not working?
e.IsValid = false;
}
}
<ajaxToolkit:ConfirmButtonExtender ID="cbeResponseReferralSignOff" runat="server"
TargetControlID="ResponseLocalSignOff" DisplayModalPopupID="popConfirm">
</ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ModalPopupExtender runat="server" ID="popConfirm" TargetControlID="ResponseLocalSignOff"
BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnConfirmCertify"
CancelControlID="btnCancel" PopupControlID="pnlConfirm">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</asp:Panel>
The problem is the modal window closes when validation fails. How do I prevent this window from closing or repoppen this window?
The only way to do this is by using an UpdatePanel. Additionally this will allow you to use AsyncPostBackTrigger with a Conditional UpdateMode with control events as well.
For example
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:UpdatePanel ID="upItem" runat="server">
<ContentTemplate>
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Solution was to get rid of the ConfirmButtonExtender and make my own validation:
function Validate_Click() {
//using asp.net checkbox so have to go this route to get bool
var checked = $('#<%= cbCertify.ClientID %>').is(':checked');
if (checked) {
$('.lblConfirmCertifyError').hide();
return true;
}
else {
$('.lblConfirmCertifyError').show();
return false;
}
}
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:Label runat="server" ID="lblConfirmCertifyError" Text="Required." ForeColor="Red"
Style="display: none" CssClass="lblConfirmCertifyError"></asp:Label>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" CssClass="btnConfirmCertify" OnClientClick="return Validate_Click()" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
<asp:Button runat="server" ID="btnDummy" Text="" Style="display: none" />
</div>
</asp:Panel>

How to Reopen pure CSS3 modal dialog

I have following Modal Dialog (popup) using only CSS3 in my asp page for user registration:
HTML :
<%-- Modal PopUp starts here--%>
<div id="openModal" class="modalDialog">
<div> X
<table style="width:100%;">
<tr>
<td style="text-align: center; width: 100%;"></td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<asp:Label ID="lblErrorMSG2" runat="server" Font-Bold="True" ForeColor="#FF3300" Text="Email ID Already Taken " Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustFName" name="txtCustFName" type="text" required placeholder="Enter Your First Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustLName" name="txtCustLName" type="text" required placeholder="Enter Your Last Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustREmail" name="txtCustREmail" type="email" required placeholder="Enter Valid Email ID" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRPwd" name="txtCustRPwd" type="password" required placeholder="Enter Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRePwd" name="txtCustRePwd" type="password" required placeholder="ReType Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustPh" name="txtCustPh" type="number" size="10" min="10" max="10" required placeholder="Enter Valid Mobile No" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td class="style1" style="text-align: center; width: 100%;" onclick="btnSignUp()">
<asp:Button ID="btnSingUp" runat="server" onclick="signUp" Text="Login" />
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;"> </td>
</tr>
</table>
</div>
</div>
<%--Modal PopUp Ends Here--%>
CSS :
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;}
.close:hover { background: #00d9ff;
}
In my asp page I've following anchor tag which is used to display the popup:
Register
Now the problem is:
As this is registration form, I want server side validation of existing email id .
If user entered email id already exist in DB I want to reopen the above modal dialog with an error message Email ID already exist.
I m not able to reopen that dialog box.
Is there any way to do this using js?
Plz help me.
The tutorial for modal dialog is on site:
click here
For visualizing modal dialog:
click here
Thanx in advance.
for server side validation I suggest you to use javascript web method for this. By using this web method your popup didn't close while page check server side validation.....
Change the :target to also accept a class:
.modalDialog:target, .modalDialog.target {
opacity:1;
pointer-events: auto;
}
And then when you find out the email is invalid, you can just do:
$('.modalDialog').addClass('target')
or the non-jquery equivalent.

Categories

Resources