We Keep Coding

Refresh partial page on user control text change event

I have one Usercontrol Textbox with some radio buttons.
I want to refresh some of these buttons when I change the usercontrol textbox value.
In short, when I select Specific button it displays RM row & for All radio button selection it hides RM row. After selecting RM & checking Client radio button, it again displays two radio button below. By checking any of radio it displays the grid data below. For Prospect & Closed button it displays grid data below after checking it.
For all radio all the functionality is same except RM selection.
My all functionality is working as expected just need to add one more addition in it.
Now I want to refresh 5 radio buttons(Client, Prospect, Closed, Client, Family) which are below RM user control screen when I change the RM name from usercontrol textbox.
I tried using update panel but it couldn't work as it got mess for me so reverted all that changes. My current working code is as below:
<script type="text/javascript">
$110 = $;
$110(document).ready(function () {
//intial setting of panel
rdoBtnShowHidePanels();
$110("#trClient").hide();
$110("#btnSendSms").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='SelectRM']").change(function () {
$110("#trClient").hide();
$110("#jqxContact").hide();
$110("#trCommMode").hide();
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("#trRM").show();
$("input[id$=mcscRMSearch_txtSearch]").val('');
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
if (ValidateRMSelection() == true) {
$110("#trRM").show();
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
}
}
else {
alert("Select RM");
$110("#trClient").hide();
$110("#trCommMode").hide();
$110("#jqxContact").hide();
return;
}
}
})
}
else {
$110("#trRM").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#jqxContact").hide()
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
}
})
}
})
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="scmPhoneBook" runat="server">
</asp:ScriptManager>
<table id="Table1" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clsTitle" align="center" style="height: 25px">Contacts
</td>
</tr>
<tr>
<td class="clstd" align="left" style="width: 100%" colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="RdoSpecific" runat="server" GroupName="SelectRM" Text="Specific"></asp:RadioButton>
<asp:RadioButton ID="RdoAll" runat="server" GroupName="SelectRM" Text="All"></asp:RadioButton>
</td>
</tr>
<tr id="trRM">
<td class="clstd" width="2%">RM
</td>
<td class="clstd" width="98%">
<mwimcs:MultiColumnSearchControl
runat="server"
ID="mcscRMSearch"
CssClass="clsTextbox"
Width="300"
ControlType="137"
DataTextField="usr_name"
DataValueField="usr_id"
Top="-15px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdoClientAll" runat="server" GroupName="First" Text="Client"></asp:RadioButton>
<asp:RadioButton ID="RdoProspect" runat="server" GroupName="First" Text="Prospect"></asp:RadioButton>
<asp:RadioButton ID="RdoClosed" runat="server" GroupName="First" Text="Closed"></asp:RadioButton>
</td>
</tr>
<tr id="trClient">
<td class="clstd" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdofamily" runat="server" GroupName="a" Text="Family"></asp:RadioButton>
<asp:RadioButton ID="rdoclient" runat="server" GroupName="a" Text="Client"></asp:RadioButton>
</td>
</tr>
<tr>
<td valign="top">
<div id="jqxContact"></div>
<asp:Panel ID="PnlClient" runat="server" Width="100%">
</asp:Panel>
</td>
<asp:DataGrid ID="dgCompany" runat="server" Width="100%" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="True" PageSize="25">
</asp:DataGrid>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr height="10px">
<td class="clsLabel_err" colspan="2">
<asp:Label ID="lblErrorMsg" runat="server" CssClass="clsLabel_err"></asp:Label>
</td>
</tr>
<tr style="width: 100%" id="trCommMode">
<td class="clstdnext" style="width: 25%">Communication Mode:</td>
<td class="clstdnext" align="left" valign="middle">
<asp:RadioButtonList ID="rbtnlistSmsMail" runat="server" RepeatDirection="Horizontal"
Font-Names="Verdana" Font-Size="11px">
<asp:ListItem>
SMS
</asp:ListItem>
<asp:ListItem>
E-Mail
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2" id="pnlEmailDtls" runat="server">
<asp:Panel ID="pnlpnlEmailDtls" runat="server" Width="100%">
<table id="Table3" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">Email From</td>
<td class="clsTd" style="width: 80%">
<cc1:MultiColumnComboBox ID="mmcEmail" runat="server" CssClass="clstd" HeaderCSS="clsReportTitle"
ItemsCSS="clstdnext" VerticalScrolling="True" DownArrowButtonCSS="clsButton"
DownArrowImageURL="url(Images/downarrow.gif)" DownArrowButtonHeight="12" DownArrowButtonWidth="20"
TextBoxCSS="clsTextbox">
<Columns>
<cc1:Column ColumnWidth="" DataField="email" KeyColumn="True" HeaderText="Email"></cc1:Column>
<cc1:Column ColumnWidth="" DataField="smtp" KeyColumn="False" HeaderText="SMTP"></cc1:Column>
</Columns>
</cc1:MultiColumnComboBox>
</td>
</tr>
<tr>
<td class="clstdnext" style="width: 20px">Subject</td>
<td class="clstdnext" style="width: 80px">
<asp:TextBox ID="txtSubject" runat="server" CssClass="clsTextbox" Width="327px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="clstd">Attachment 1)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload1" style="width: 250px" type="file" size="48" runat="server"
name="fileupload1" />
</td>
</tr>
<tr>
<td class="clstdnext">Attachment 2)
</td>
<td class="clstdnext">
<input class="clsTextbox" id="fileupload2" style="width: 250px" type="file" size="48" runat="server"
name="fileupload2" />
</td>
</tr>
<tr>
<td class="clstd">Attachment 3)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload3" style="width: 250px" type="file" size="48" runat="server"
name="fileupload3" />
</td>
</tr>
<tr>
<td class="clsReportTitle" align="center" style="width: 100%" colspan="2">Message
</td>
</tr>
<tr>
<%--<TD width="100%" colSpan=2>
<asp:TextBox id=txtMessage runat="server" CssClass="clsTextbox" Width="100%" TextMode="MultiLine" Height="250px"></asp:TextBox></TD>--%>
<td align="left" class="clstd" colspan="2">
<ftb:FreeTextBox ID="FreeTextBox1" EnableHtmlMode="false" ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,Strikethrough, Superscript, Subscript|InsertImageFromGallery, CreateLink, Unlink, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull,BulletedList, NumberedList, Indent, Outdent,Cut, Copy, Paste, Delete, Undo, Redo,Save,InsertRule, InsertDate,InsertTime,Preview"
Height="300px" runat="server" Width="100%">
</ftb:FreeTextBox>
</td>
</tr>
<tr>
<td style="width: 100%" class="clstd_btn" colspan="2">
<%--<input id="BtnSendEmail" type="button" class="clsButton" value="Send"/>--%>
<asp:Button ID="BtnSendEmail" runat="server" OnClientClick="return ValidationBeforeEmailSendClick();" CssClass="clsButton" Text="Send"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="2" id="pnlSmsDtls" runat="server">
<asp:Panel ID="pnlpnlSmsDtls" runat="server" Width="100%">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">SMS Type
</td>
<td class="clstd">
<asp:DropDownList ID="ddlSmsType" CssClass="clsCombobox" runat="server">
<asp:ListItem Value="0">---Select---</asp:ListItem>
<asp:ListItem Value="1">Upcoming maturity/due date</asp:ListItem>
<asp:ListItem Value="2">New product offerings</asp:ListItem>
<asp:ListItem Value="3">Pick of the day</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext">SMS Text
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext" style="height: 40px">
<asp:TextBox ID="txtSmsText" runat="server" CssClass="clsTextbox" TextMode="MultiLine"
Width="100%" Height="100px">
</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" class="clstd_btn">
<input type="button" id="btnGo" value="Save" class="clsButton" />
<%--<asp:Button ID="btnGo" runat="server" CssClass="clsButton" Text="Save" />--%>
<asp:Button ID="btnSendSms" runat="server" CssClass="clsButton" Text="Send SMS"
Width="72px"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<input type="hidden" id="hdnType" />
</form>
Its argent... kindly please help.
Thanks in advance.

Checkbox check one at a time not working

My requirement here is to make user only check one checkbox at a time. I tried with the below code:-
$('input.chkclass').on('change', function () {
$('input.chkclass').not(this).prop('checked', false);
});
and HTML
<table id="trchkOptions" style='display: none' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
Option 1 To
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>Option
2 To
Hemant Shah, Vimal Shah, Rushank Shah, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
Option 3 To,
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
here is a live preview
But it is not working.
Note I don't want to use radiobutton here. I want it with checkbox only.
Kindly suggest what is wrong

Try
$('input.chkclass').not(this).attr('checked', false);
instead
$('input.chkclass').not(this).prop('checked', false);
It may work.
Demo:
$('input.chkclass').on('change', function() {
$('input.chkclass').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="trchkOptions" style='display: block' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>

Do Like That..
Uncheck other checkbox during one checkbox
Disable other checkbox during one check
1.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$(this).prop('checked', ture);
});
2.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$('input.chkclass').prop('disabled',true);
$(this).prop('disabled',false);
$(this)..prop('checked', true);
});

How to Hide a table using Radio button using Java Script in HTML?

I'm trying to use this script to hide the question that follows Yes/No question. In other words I want question Yes/No to hide the following question when no is clicked.
Thanks.
<script>
function ChangeDropdowns() {
if ("Delivery_y:checked") {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if ("Delivery_n:checked") {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
This is the table that contains the Yes/No question.
<table id="YesNo" style="width:100%;">
<tr>
<td class="auto-style2" colspan="3">* Have you recently bought any electronic products from AlGhanim electronics that required delivery/ Installation Service? </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" value="No">No</td>
<td>(Terminate)</td>
</tr>
</table>
This is the table that I want to hide when answering no to the first question:
<table name="BuyProduct" id ="BuyProduct_H" style="width:100%;">
<tr>
<td class="auto-style2" colspan="3">1- What were the products that you bought? </tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button11" Text="a. Air Conditioning" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button12" Text="b. TV Radio (TV, Home Theatre, etc.)" runat="server" /></td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button13" Text="c. Refrigeration" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button14" Text="d. Laundry (Washer, Dryer, etc)" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button15" Text="e. Dishwasher" runat="server" /></td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button16" Text="f. Water Treatment (Water Dispencer)" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button17" Text="g. Small Housewares (Microwave, Kitchen appliances, etc.)" runat="server" />
<br />
<asp:CheckBox ID="Button18" Text="h. Others Please Specify" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style51"></td>
<td>
<asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
</td>
</tr>
</table>

"show" and "hide" are not valid values for display. Try "block" (or "inline-block") and "none", respectively, instead.
See here for valid values: http://www.w3schools.com/jsref/prop_style_display.asp
Also, you need to call your ChangeDropdowns() function for it to work.

In addition to what #mayabelle pointed out in his answer (that hide and show should be replaced by style.display = 'none' and style.display = 'block' respectively), your verification in the if statement if ("Delivery_y:checked") will not work. Instead, you can check if an element is checked in javascript in the following way:
if (document.getElementById('Delivery_y').checked)
Alternatively, you can do this in jQuery:
if ($('Delivery_y').is(':checked'))

I Applied what Raul Rene and mayabelle to my Script:
This is the script before:
<script>
function ChangeDropdowns() {
if ("Delivery_y:checked") {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if ("Delivery_n:checked") {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
This is The Script After:
<script>
function ChangeDropdowns() {
if (document.getElementById('Delivery_y').checked) {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if (document.getElementById('Delivery_n').checked) {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
I changed the Yes/No Table:
Before:
input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" value="No">No</td>
<td>(Terminate)</td>
</tr>
After:
<input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="No">No</td>
<td>(Terminate)</td>
</tr>
It Worked Perfectly.
Thank you all.

Ajax UpdateProgress not working

i am using ajax UpdateProgress bar in asp dot net with button click but query execute in write format but prrgress bar not run how to slove this type of problem.plz help me give me any solutions of progress bar
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
args.set_cancel(true);
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'block';
}
function EndRequest(sender, args) {
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table class="style1">
<tr>
<td>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"Text="Button"/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:UpdateProgress ID="PageUpdateProgress" runat="server">
<ProgressTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="images/ajax-loader.gif" alt="image missing" />
</ProgressTemplate>
</asp:UpdateProgress>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

I think you are missing a prm.add_beginRequest(onPrmBeginRequest); here.
The progress must be shown when the request begins:
onPrmBeginRequest = function (sender, args) {
var postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1') {
$get('UpdateProgress1').style.display = 'block';
}
}
So move the appropriate code block from initializeRequest to beginRequest.
Now you can hide in endrequest.
Note:
The id may have been mangled by ASP.Net unless clientIDMode is specified. So make sure you are using the id like ctl00_ContentPlaceHolder1_UpdateProgress1.

Open a ModalPopupExtender on an UpdatePanel using javascript

I'm trying to open a ModalPopup with JavaScript, and i've searched here on stackoverflow and the general advice seems be to use something like this:
$('#inputAdd').live("click", function () {
$('#addRow').show();
$find('<%=mpeIndications.BehaviorID %>').show();
});
Where #inputAdd is an html input image that i have in the ModalPopup, its objective is to show a row (#addRow) where a TextBox is shown. However, when i click on the #inputAdd button, it show the row, but then the ModalPopup hide, I think the reason maybe because there is an UpdatePanel that include the ModalPopup, I am right? In that case which may be a solution? I've putted some of the code I've in the .ascx. Thanks.
<table class="content-box">
<tr>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upAppointments">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" />
<asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;">
<table class="content-box">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>
<asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px">
<table style="width: 100%; border: 0;">
<tr>
<td style="width: 30%; vertical-align: top;" rowspan="2">
<asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound"
DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" />
</td>
<td style="padding-left: 10px;" class="contentBox">
<table style="width: 100%;">
<tbody id="showTable">
<tr>
<td id="indicacionestd" runat="server">
Indicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
<tr>
<td id="contraindicacionestd" runat="server">
Contraindicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
</tbody>
<tbody style="display: none;" id="addRow">
<tr>
<td style="text-align: left; white-space: nowrap;" class="colSepGran">
Nombre:
</td>
</tr>
<tr class="filSepGranRA">
<td class="colSepGran">
<asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox>
<act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars"
FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName"
ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd"
title="Adicionar perfil">
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png"
id="inputAddSimple" title="Adicionar indicación" />
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit"
title="Editar perfil" />
</td>
<td>
<asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
</act:ModalPopupExtender>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>

Then try this approach:
Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)
<a href="#" style="display:none;visibility:hidden;"
onclick="return false" ID="dummyLink" runat="server">dummy</a>
Add the ID of the hidden link to the ModalPopupExtender
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground"
TargetControlID="dummyLink"
CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
Showing the modal popup
$find('MyMPE').show();
http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm

Model Dialog Asp.Net With Jquery