I have an application developed in asp.net which set innerhtml of div. I am creating an html string to show googlemap. It works fine. But when I put my div inside update panel. it doesnt show googlemap in div. Here is my aspx file code:
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="map_canvas" runat="server" style="width: 100%; height: 1500px; margin-bottom: 2px;
text-align: center;">
<asp:Panel ID="Panel1" runat="server">
<%--Place holder to fill with javascript by server side code--%>
<asp:Literal ID="js" runat="server"></asp:Literal>
<%--Place for google to show your MAP--%>
<div id="Div1" style="width: 100%; height: 728px; margin-bottom: 2px;">
</div>
<br />
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnShow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
here is my button click event.
protected void btnShow_Click(object sender, EventArgs e)
{
// works fine without update panel.
map_canvas.InnerHtml = showMapWithPoints();
}
Hai Asif,
May be you should take a look at this.....
http://www.reimers.dk/blogs/jacob_reimers_weblog/archive/2008/11/23/an-example-using-updatepanels-and-google-maps.aspx
When you do:
map_canvas.InnerHtml = showMapWithPoints();
You are overwriting everything, including all your server side controls, within that div.
Are you doing anything that requires those controls to be available such as you 'js' and 'div1' controls?
Related
I'm trying to set focus on a control after Postback but its not working. below are the details.
I have some code inside a Panel. Panel will be open closed using ajax.
There is a radio button inside panel ... Once I click the radio button, i want to focus on that control but it goes to start of the page due to post back.
I tried
1. SetFocus(controlID);
2. controlID.Focus();
3. set focus to control in javascript also
but no solution working.
This is a long page ... I have more panels in it. Not sure why my solutions are not working.
Attached my code below:
<Panel> first panel comes here...</Panel>
<div class="demoarea">
<asp:Panel ID="pnl_2_Header" runat="server" CssClass="collapsePanelHeader" Height="30px">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">User's Information</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lbl_2_Header" runat="server" Visible="False">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="img_2_Header" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" Visible="False"/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnl_2" runat="server" CssClass="collapsePanel" Height="0" BorderStyle="solid" BorderWidth="1">
<table width="100%" style="text-align:left;font-weight:300;" cellpadding="7">
<tr valign="top">
<td style="width:50%;">
School in Primary 6 :
<br /><br />
<asp:RadioButton ID="rdoPri1" runat="server"
Text="sometext" GroupName="pri" value="1"
AutoPostBack="True" oncheckedchanged="rdoPri1_CheckedChanged" /> <br />
<asp:RadioButton ID="rdoPriOther" runat="server" Text="Others"
GroupName="pri" value="2" AutoPostBack="True"
oncheckedchanged="rdoPriOther_CheckedChanged" />
<asp:TextBox ID="txtPriOther" CssClass="txt" Width="50%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqPriOther" ValidationGroup="pnl_2" Visible="false" runat="server" ControlToValidate="txtPriOther" Text="*" ErrorMessage="*" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe_2" runat="Server"
TargetControlID="pnl_2"
ExpandControlID="pnl_2_Header"
CollapseControlID="pnl_2_Header"
Collapsed="True"
TextLabelID="lbl_2_Header"
ImageControlID="img_2_Header"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true"
SkinID="CollapsiblePanelDemo" />
<Panel> 3rd Panel </Panel>
...
Code behind:
protected void rdoPri1_CheckedChanged(object sender, EventArgs e)
{
-- Some code here --
//SetFocus(pnl_2);
rdoPri1.Focus();
}
Web form server control event will trigger postback when Autopostback is set to true. It means your Set focus will not be working expected after one of the controls triggered postback.
So, my personal opinion, it you need such a UI/UX design, I would suggest to use client script instead.
Add the same control.Focus() or setfocus in page load, and add conditions like if needed
//in page load
if (rdoButton1.Checked) {//setfocus here}
I am creating a website where user gives some value in textbox and clicks a button.
On the button click the UserControl should be added for number of time the user has given input.
What I did is,
protected void btnSearchTaxi_Click(object sender, EventArgs e)
{
for (int i = 0; i < 4; i++)
{
CustomDisplayList cus = new CustomDisplayList();
cus.ID = "cus" + i;
cus.Visible = true;
pnlSearchResult.Controls.Add(cus);
}
}
CustomDisplayList is my user control which is complex control [mixture of labels, textbox, button].
<td style="width:20%; font-family: Century Gothic; font-size:12px; color:White; text-
align:center;">Click to find<br/>
<asp:Button ID="btnSearchTaxi" runat="server" Text="Search Taxi" CssClass="googleButton"
Width="200px" onclick="btnSearchTaxi_Click" />
</td>
<td style="height:150px; width:100%; background-color: #FF6600">
<table style="height:100%; width:100%">
<tr><td style="color:White; font-size:30px; ">Search Result :</td></tr>
<tr><td><asp:Panel ID="pnlSearchResult" runat="server"></asp:Panel>
</td></tr>
</table>
</td>
The code was executed without any error, but the Control was not generated inside the panel.
Now I have changed the CODE to something like
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode = "Conditional" >
<ContentTemplate>
<asp:Button ID="btnSearchTaxi" runat="server" Text="Search Taxi" CssClass="googleButton" Width="200px" onclick="btnSearchTaxi_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode = "Conditional">
<ContentTemplate>
<asp:Panel ID="pnlSearchResult" runat="server" Width="100%" Height="200px" BackColor="Aquamarine"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "btnSearchTaxi" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
But the still the Dynamic usercontrol are not getting created.
I am working on AJAX update panels for the first time with some success. I have a <div> that I want to update when a button (that has postback disabled on it) is clicked.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="False">
<ContentTemplate>
<div style="float: left; height: auto; width: 23%;">
<div style="font-size: 20px; padding-top: 11px; border-bottom: solid 1px #dddddd;">
Your Logo
</div>
<br />
<div class="resultsinnerbox" style="padding-top: 15px; width: 85%; font-size: 12px;">
<asp:Literal ID="litLogo" runat="server"></asp:Literal>
<div style="margin-left: 4.5%; margin-right: 4.5%;">
<asp:Literal ID="litLogoDetails" runat="server"></asp:Literal>
<span class="fileupload">Upload</span>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Upon the click of the button will do the following
litLogoDetails.Text = "Hello"
'UpdatePanel1.Update()
However even with the UpdatePanel commented out or not the button always updates the panel.
How is that so? when UpdatePanel1 is Conditional. Also, how is it knowing to update 'UpdatePanel1' when the button is pressed and the UpdatePanel1.Update() is commented out.
I need to understand how this is working before I can continue.
Thanks for you help.
I have a simple ASP.NET form that Im using to learn some AJAX controls.
My code is:
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px"
BorderStyle="Solid" BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel1" runat="server">
</ajaxToolkit:DragPanelExtender>
</form>
My problem is that when I drag the Panel it doesn't stay where I leave it. It immediately moves back. shouldn't it stay where I leave it. I appreciate if I postback it will move back but I'm staying on the page incurring no new events.
Is this right?
Mike
I never used drag panel but I think there is something wrong with your markup.
Both the DragHandleID and TargetControlID are set to Panel1 which is wrong.
DragHandleID="Panel1" TargetControlID="Panel1"
According to the example on the Ajax site it's markup is http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
In the above markup they have used different panels for the targetControlID and DragHandleID
so you should update your markup as
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
</ajaxToolkit:DragPanelExtender>
I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>