Hi I need to intercept server callback after udate panel async post back and determine which panel initiated the request. The code is pretty simple:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InterceptUpdateCallback);
function InterceptUpdateCallback(sender, args)
{
var updatedPanels = args.get_panelsUpdated();
for (idx = 0; idx < updatedPanels.length; idx++) {
if (updatedPanels[idx].id == "myUpdatePanel") {
StartSmth();
break;
}
}
}
And it works when UpdatePanel is not inside another UpdatePanel. But when it is inside another UpdatePanel updatedPanels[idx].id has parent Updatepanel id. So how can I get the id of UpdatePanel which initiated the request (the inner UpdatePanel)? Thanx
Here you go:
function InterceptUpdateCallback(sender, args) {
if (sender._postBackSettings)
alert(sender._postBackSettings.panelID);
else
alert('first load');
}
Update:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void LinkButtons_Click(object sender, EventArgs e)
{
LabelMain.Text = LabelSub1.Text = LabelSub2.Text = LabelSub3.Text = string.Format("{0} Updated By {1}", DateTime.Now, ((Control)sender).ID);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body { font-family: Tahoma;}
fieldset { padding: 15px; }
fieldset a
{
float: right;
clear: none;
display: block;
margin: 10px;
}
fieldset span
{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function pageLoaded(sender, args) {
if (sender._postBackSettings) {
var panelId = sender._postBackSettings.panelID.split('|')[0];
if (panelId == sender._scriptManagerID) {
var updatedPanels = args.get_panelsUpdated();
var affectedPanels = "Affected Panels:\n";
for(var x=0;x<updatedPanels.length;x++)
affectedPanels+= updatedPanels[x].id + "\n";
alert("Request initiated by ScriptManager\n\nMight be an async trigger, or child of an update panel with children as triggers set to false.\n\n"+affectedPanels);
}
else
alert("Request initiated by: " + panelId);
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
</script>
<asp:LinkButton ID="UpdateMain" runat="server" Text="UpdateMain" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub1" runat="server" Text="UpdateSub1" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub2" runat="server" Text="UpdateSub2" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub3" runat="server" Text="UpdateSub3" OnClick="LinkButtons_Click"></asp:LinkButton>
<br />
<br />
<asp:UpdatePanel ID="Main" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton1" runat="server" Text="LinkButton1" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Main - Update Mode:Conditional, Children As Triggers:False</legend>
<asp:Label ID="LabelMain" runat="server" Text="LabelMain"></asp:Label>
<asp:UpdatePanel ID="Sub1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton2" runat="server" Text="LinkButton2" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub1 - Update Mode:Always, Children As Triggers:True</legend>
<asp:Label ID="LabelSub1" runat="server" Text="LabelSub1"></asp:Label>
<asp:UpdatePanel ID="Sub2" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton3" runat="server" Text="LinkButton3" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub2 - Update Mode:Always, Children As Triggers:True</legend>
<asp:Label ID="LabelSub2" runat="server" Text="LabelSub2"></asp:Label>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub2" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub1" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Sub3" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton4" runat="server" Text="LinkButton4" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub3 - Update Mode:Conditional, Children As Triggers:False</legend>
<asp:Label ID="LabelSub3" runat="server" Text="LabelSub3"></asp:Label>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub3" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateMain" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
I will have a guess at this one.
Does setting UpdateMode = Conditional on the outer (or both) UpdatePanels help? I think the problem is that you only get the "outermost" updated panel and if you do not set UpdateMode to Conditional the outer Panel is updated as well (even if you click something in the inner panel; see second reference).
For reference see
Note that, if I remove the property
UpdateMode=Conditional for the
UpdatePanel1 (parent), both the labels
will get refreshed.
from ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel
and
When set to Always, the UpdatePanel is
updated on every postback raised from
anywhere in the page, so from controls
inside the panel, inside other panels
or just on the page.
from Remember to set UpdatePanel's UpdateMode to Conditional
Finally I came to solution: the problem was that I had trigger control (Button) for child UpdatePanel which actually was outside this Update panel and inside parent UpdatePanel (sorry I hadn't noticed that). If you put Button inside child UpdatePanel - everything works fine.
Related
I have Panel that needs to have a button beside it but have been unsuccessful in formatting it. Currently this is what I have.
<asp:Panel runat="server" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
Basically I need the Button in the blue area.
You just need to set your Panel display to "inline-block" as panel is rendered as Div and div is a block element so it will cover the whole row. I have set width and height also so panel will contain space on the view.
<asp:Panel runat="server" style="display:inline-block;width:100px;height:20px;" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
If it helps then accept the Answer.
You could give them both a class and set the float to left.
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="float-left">
Contents
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="float-left" />
</div>
<style>
.float-left {
float: left;
}
</style>
i have a code ,where i want to change the lable text and visible mode in code behind file.my page is .ascx page
<asp:UpdatePanel ID="upnlTrvLogin" runat="server">
<ContentTemplate>
<div id="divErrMsg" runat="server" style="padding-left: 11px;">
<asp:Label ID="lblErrMsg" runat="server" ForeColor="Red" Visible="False"
CssClass="errorIcon" meta:resourcekey="lblErrMsgResource2"></asp:Label>
<br />
</div>
<div style="display: inline; float: right; text-align: right; margin-top: 10px; margin-right: 13px;">
<asp:Button ID="lnkSubmit" runat="server" CausesValidation="False"
CssClass="font1_2em bolder inButton showHand" OnClick="lnkSubmit_Click"
Text="Sign In" UseSubmitBehavior="False" meta:resourceKey="lnkSubmitResource2" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
code behind file
protected void lnkSubmit_Click(object sender, EventArgs e)
{
string User = GetUserDetail(txtUsername.Text.Trim(), txtPass.Text.Trim(),out personGuid, false);
if (string.IsNullOrEmptyUser (User )
{
lblErrMsg.Text = "Invalid email / password";
lblErrMsg.Visible = true;
return;
}
}
but in the button click event when i an try to change the Label text but is not changing . please tell why text of label is not changing.
Looking at you code, seems it is incorrect.
string.IsNullOrEmpty(User) was the correct statement, but you are using string.IsNullOrEmptyUser (User ).
Another tip, don't use variables with first letter on upper case, let it only for class.
I have the following modal popup on a Asp.net/C# web application. The modal popup holds multiple placeholders. My problem occurs when I am trying to access the modal popup on small screens or on ipad/iphone/ipod screens. The page display the half of the modal popup so the information in the top are inaccessible. I have used overflow:auto;/ the following solution: Mobile ModalPopupExtender? and many others but doesn’t solved my problem.
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7; } .modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px; }
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupDragHandleControlID="Panel1" RepositionMode="None" runat="server" PopupControlID="pnlpopup"
TargetControlID="btnShowPopup" CancelControlID="btnCancel"
DropShadow="true"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="LightGray" style="display:none;"
CssClass="modalPopup" Width="650px" >
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
</asp:Panel>
#focus: As I am using Jquery to attach ModalPopup to a button but code I used to check innerheight and then add class to my panel is:
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
You need to add above code in javascript and this need to be called on ModalPopupExtender click.
PanelWithScroll is a css class:
.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}
Similarly, if you have problem with width too, you can check width too (http://responsejs.com/labs/dimensions/) and change class PanelWithScroll
Other thing you can do is check page height on page_load and if its less than what you want, add this class to pnlpopup Div. (This is easy solution IMO)
Update:
Add given javascript in your HTML Code in head section
$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
}
$(document).ready will only run after your page has wholly rendered. This may also help if you need help on how to put script in html (http://javascript.info/tutorial/adding-script-html)
So I'm trying to understand how this should be properly setup. I have a Updateprogress that shows a progress bar when a button is clicked. The button is wrapped in an UpdatePanel. But if there're any error, I want to stop the processing and then pop up a modal window (I used Modalpopupextender) to show the errors. My issue is, it just shows the box (or object) but without the texts that came from the Exception. Here's my code:
<asp:UpdatePanel ID="UpdatePanel_ActionButtons" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" OnClick="Proccess_Click1" OnClientClick="this.disabled = true; this.value = 'Processing';" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
The Progress Bar:
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_ActionButtons">
<ProgressTemplate>
<div style="background-color:Gray; filter:alpha(opacity=80); opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;"></div>
<div style=" filter:alpha(opacity=100); position: fixed;
z-index: 100001;
left: 720px;
top: 105px;">
<div style="width:50px; height:50px; padding:50px; background-color:white; border:solid 1px black;">
<img alt="progress" src="../images/ajax-waiting.gif"/>
Processing...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The error box:
<asp:LinkButton ID="btnNotInUse" runat="server" />
<ajaxtoolkit:ModalPopupExtender ID="qaError" runat="server"
TargetControlID="btnNotInUse"
PopupControlID="pnlQAError"
BackgroundCssClass="modalPopupExtender" />
<asp:Panel ID="pnlQAError" runat="server" Style="display: none" CssClass="modalPopup">
<br />
<asp:Button ID="OkBtn" runat="server" Text="Ok" OnClick="OkBtn_Click" />
</asp:Panel>
Button Click Method:
protected void Proccess_Click1(object sender, EventArgs e)
{
List<string> validationErrors;
string returnurl;
Processrecord(out validationErrors);
if (validationErrors.Count() > 0)
{
foreach (var error in validationErrors)
{
qaFeedback.InnerHtml += error;
}
qaError.Show();
return;
}
else
{
returnurl = "toanotherpage.aspx";
}
}
So if you look as to how I add the errors, it's adding it to the "qafeedback" div. And then I would force it to show up and then return. What's happening is it would pop out the button box, with the button, but it doesn't show the texts I added. It would be helpful to know as well that when I remove the progress bar or animation, the whole thing works or shows the error messages.
Thoughts?
I have a Listbox with some items stored
and from a textbox's key up event i select my choice
the problem i am facing is that
once i select my choice Listbox1_selectIndexchanged event (which sets my choice to another textbox ) not firing properly, it fires only when i hit some button or some page postback event something...
[i have used JQuery and updatepanel]
Here is my Code
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Main.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1"
title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="uppnl" runat="server">
<ContentTemplate>
<script type="text/javascript" >
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});
</script>
<asp:Panel ID="Panel1" runat="server" Style="border-right: thin groove; border-top: thin groove; border-left: thin groove; border-bottom: thin groove; vertical-align: middle; width: 100%; text-align: center; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">
<br />
<asp:Label ID="Label1" runat="server" Text="Type"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="SelectedText"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:ListBox ID="ListBox1" runat="server" Height="119px" Width="126px">
<asp:ListItem Text="Apple" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Peache" Value="3"></asp:ListItem>
<asp:ListItem Text="Banana" Value="4"></asp:ListItem>
<asp:ListItem Text="Melon" Value="5"></asp:ListItem>
<asp:ListItem Text="Lemon" Value="6"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>
<asp:ListItem Text="Pomegranate" Value="8"></asp:ListItem>
<asp:ListItem Text="Mulberry" Value="9"></asp:ListItem>
<asp:ListItem Text="Apricot" Value="10"></asp:ListItem>
<asp:ListItem Text="Cherry" Value="11"></asp:ListItem>
<asp:ListItem Text="Blackberry" Value="12"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" Text="Refresh" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
if (selectSingleMatch === true && $(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
$(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});
</script>
</asp:Content>
and in my code behind i have
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
End Sub
Your event did fire.
Control properties are loaded during the Page_Load method, and your event will fire after the Page_Load method so your page will not reflect its results. All events will fire after the Page_Load method as per the page life cycle.
Try this:
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
Page_Load(sender, e)
End Sub
To learn more about the page life cycle check out http://msdn.microsoft.com/en-us/library/ms178472(v=vs.100).aspx
EDIT:
You also need to bind your listbox to your event:
<asp:ListBox ID="ListBox1" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" runat="server">