I have a iframe in one of my web pages with runat="server" and a javascript function assigned to the onload event. When the page renders it gives an error as
"CS1012: Too many characters in character literal"
When I remove the runat="server" attribute it works perfectly but I need the iframe to runat="server". How can I fix this?
<iframe id='contentFrame' name='contentFrame'
runat="server" width="500"
onload="resizeFrame(document.getElementById('contentFrame'))">
</iframe>
When you use runat="server" - 'onload' starts being parsed as C# Event of Html Server Control, like Button.Click. You should set a name of C# event handler method in the class of your control/page (NOT JAVASCRIPT). This code will work:
<script runat="server">
void contentFrame_onLoadServer(object sender, EventArgs e)
{
if (!IsPostBack)
contentFrame.Attributes.Add("onLoad", "contentFrame_onLoadClient();");
}
</script>
<script type="text/javascript">
function contentFrame_onLoadClient() {
resizeFrame(document.getElementById('<%=contentFrame.ClientID %>'));
}
function resizeFrame(element) {
alert(element); // do your logic here
}
</script>
<iframe
runat="server"
id='contentFrame'
name='contentFrame'
width="500"
onload="contentFrame_onLoadServer"
/>
You cannot "just" add the onload for client side code, because it's "occupied" by the .NET server side onload. You need to hook it up by code (and I enhanced #Philipp 's code):
<script runat="server">
void onIframeLoad(object sender, EventArgs e)
{
if (!IsPostBack)
{
contentFrame.Attributes.Add("onload", "resizeFrame(document.getElementById('contentFrame'));");
}
}
</script>
<iframe id='contentFrame'
name='contentFrame'
runat="server" width="500"
onload="onIframeLoad"/>
replace single quotation with double:
< iframe id="contentFrame" name="contentFrame" runat="server" width="500" onload="resizeFrame(document.getElementById('contentFrame'))">
You can not write document.getElementById('contentFrame') in onload method. Write it in your javascript function instead.
runat="server" changes the ID of the IFrame.
instead of passing "document.getElementById('contentFrame')" pass "this" in javascript.
Or you may also pass
document.getElementById('<%= contentFrame.ClientID%>')
Related
How do I read the SelectedValue of a DropDownList in code behind, when the option has been added using JavaScript?
A little more background: I have cascading drop down lists, and I would like to fill in the values using JavaScript, so that I avoid postbacks when the user changes the selection in the first drop down list.
I am not allowed to use an Update Panel.
I have build a simple demo demonstrating problem. Here is my markup code:
<p>
<asp:DropDownList runat="server" ID="FilterDropDownList" />
</p>
<p>
<asp:Button runat="server" ID="SearchButton" Text="Search"
onclick="SearchButton_Click" /><br/>
<asp:TextBox runat="server" ID="QueryTextBox" />
</p>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var filterDropDownListId = '#<%= FilterDropDownList.ClientID %>';
$(filterDropDownListId).append($('<option>').prop('value', 'Alpha').html('A'));
$(filterDropDownListId).append($('<option>').prop('value', 'Beta').html('B'));
});
</script>
And in the code behind I have the following:
protected override void Render(HtmlTextWriter writer)
{
// Register the allowed values for the down down list.
Page.ClientScript.RegisterForEventValidation(FilterDropDownList.UniqueID, "Alpha");
Page.ClientScript.RegisterForEventValidation(FilterDropDownList.UniqueID, "Beta");
base.Render(writer);
}
protected void SearchButton_Click(object sender, EventArgs e)
{
Response.Redirect(
String.Format("{0}?dropdown={1}&query={2}",
Request.Url.AbsolutePath,
FilterDropDownList.SelectedValue,
QueryTextBox.Text));
}
The problem is, that FilterDropDownList.SelectedValue is empty. I would have expected it to be either "Alpha" or "Beta". I can read the value of QueryTextBox.Text without problems.
It is possible to read MyDropDownList.SelectedValue when the values have been populated using JavaScript? Or do a have to use a different approach?
You can always write the selected value to a hidden textbox with javascript and read the value in the code-behind.
within an asp.net webform I have the following code
<asp:UpdatePanel ID="udpNames" runat="server">
<ContentTemplate>
<div class="expanderheaders">
<asp:Image ID="epImgNames" runat="server" ImageAlign="Middle" CssClass="expanderimage" />
<asp:LinkButton ToolTip="Expand Names" ID="lbtnNames" runat="server" OnClick="lbName_Click"
Text="Names" CssClass="detaillinks" />
</div>
<div class="detailsectionBorders">
<ajax:CollapsiblePanelExtender ID="epNames" runat="server" ExpandControlID="lbtnNames"
CollapseControlID="lbtnNames" Collapsed="true" ExpandedSize="420" ScrollContents="true"
ImageControlID="epImgNames" CollapsedImage="~/images/expandwn.png" ExpandedImage="~/images/expanup.png"
TargetControlID="namePanel" CollapsedSize="0" CollapsedText="Names" AutoExpand="false" />
<asp:Panel ID="namePanel" runat="server">
<asp:PlaceHolder runat="server" ID="PlaceHolderNames" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
DIV tag expanderheaders is a used as a header to the section. It contains a link button an image similar to a expander panel bar.
CollapsiblePanelExtnder is an ajax toolkit control that expands when a asp.net control is clicked (LinkButton) a user control is then loaded into the PlaceHolder to display a new section of data.
This all works fine but I am currently only able to click on the link button to expand the section (as expected). What I would like to do is have the ability to click on the entire div section (expanderHeaders) and have it serve as the control to expand the section.
I have looked at using jQuery and I have been able to duplicate the panel expansion as well as set the DIV layer to function as desired in accepting a client event and not just on an server side control. However, I have been unsuccessful in being able to invoke a server side method to load the user control when using jQuery.
Can anyone provide some guidance on how to either set the existing control up to where the link button could span the entire content of the div layer or use client side script/ jQuery to allow me to call a server side method to load a user control in the page?
Thanks in advance
update to James answer
I tried something similar to this
jquery
$(function () {
$("#panel").hide();
});
$(document).ready(function () {
$(".slide").click(function () {
$("#panel").show("slow");
});
});
and aspx
<div>
<div id="panel" >
<p>stuff here</p>
</div>
<div class="slide" id="div1" runat="server">
<p class="btn-slide">Expand Panel</p>
</div>
</div>
I'll omit the CSS as it is not that important for now
Using this approach clicking on the div layer seems to causes a postback each time clicked so the codebhind is never accessed.
protected void Page_Load (object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
div1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
}
protected override void RaisePostBackEvent (IPostBackEventHandler source, string eventArgument)
{
//call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument.ToUpper() == "CLICKDIV")
{
}
}
still no dice.
It would probably be easier to do this with jQuery:
//obviously, adjust this to your needs
$(document).ready(function(){
$(".expanderheaders").click(function(){
$(".detailsectionBorders").hide("slow");
}
});
To do it server-side, if you give the div an ID and can specify runat="server", you can do something like this:
<div id="div1" runat="server">
Expand Me
</div>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
div1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
}
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
//call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument.ToUpper() == "CLICKDIV")
{
//logic here
}
}
I'm trying to use the ImageButton control for client-side script execution only. I can specify the client-side script to execute using the OnClientClick property, but how do I stop it from trying to post every time the user clicks it? There is no reason to post when this button is clicked. I've set CausesValidation to False, but this doesn't stop it from posting.
I know this problem has already been answered but a simple solution is to return false from the HTML onclick method (i.e. the ASPX OnClientClick method) e.g.
<asp:ImageButton ID="ImageNewLink" runat="server"
ImageUrl="~/images/Link.gif" OnClientClick="DoYourStuff(); return false;" />
Returning false stops the browser from making the request back to the server i.s. stops the .NET postback.
Here's one way you could do it without conflicting with the postback functioning of other controls:
Define your button something like this:
<asp:Button runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="alert('my client script here');my" />
The "my" ending in the handler for OnClientClick is a way to alias asp.net's __doPostBack client event that forces the postback; we simply override the behavior by doing nothing similar to this script:
<script type="text/javascript">
function my__doPostBack(eventTarget, eventArgument) {
//Just swallow the click without postback of the form
}
</script>
Edit: Yeesh, I feel like I need to take a shower after some of the dirty tricks that I need to pull in order to get asp.net to do what I want.
Another solution would be to define a PostBackUrl that does nothing
<asp:imagebutton runat="server" PostBackUrl="javascript:void(0);" .../>
<image src="..." onclick="DoYourThing();" />
Use a server side Image control
<asp:Image runat="server" .../>
Pretty sure you can add the client onclick event to that.
Solution 1
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="return false;" />
OR
Solution 2
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="yourmethod(); return false;" />
In addition (solution 2), your javascript method may be in this form
<script type="text/javascript">
function yourmethod() {
__doPostBack (__EVENTTARGET,__EVENTARGUMENT); //for example __doPostBack ('idValue',3);
}
</script>
in code behind
protected void Page_Load(object sender, System.EventArgs e)
{
if (this.IsPostBack) {
string eventTarget = this.Request("__EVENTTARGET") == null ? string.Empty : this.Request("__EVENTTARGET");
string eventArgument = this.Request("__EVENTARGUMENT") == null ? string.Empty : this.Request("__EVENTARGUMENT");
}
}
This works Great for me:
Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback.
<div class="close_but">
<asp:ImageButton ID="imgbtnEChartZoomClose" runat="server" ImageUrl="images/close.png" OnClientClick="javascript:zoomclosepopup();" PostBackUrl="javascript:void(0);" />
</div>
Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback
I am building an ASP.NET site using Visual Studio 2008 and have a page looking like this (stuff snipped)
<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
the page here..
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
<ProgressTemplate>
<div>
<asp:Image ID="AjaxImage" runat="server" ImageUrl="Ajax.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
The page_load starts a long (>5s) process
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LongRunningProcess();
}
}
How can I display the UpdateProgress while the LongRunningProcess is running? It does work when I move the LongRunningProcess() call to a button onclick handler.
Move your page_load code into a new function.
Add a AJAX timer into the ContentTemplate section of your page. Set the interval to 500. (1/2 second)
Double-click on the Timer object in Design view to create a _tick handler.
In the _tick handler created in the previous step, call the following code
protected void My_Timer_Tick(object sender, EventArgs e)
{
My_Timer_Name.Enabled = false;
My_Page_Load_Function(); // Function created in step 1 above)
}
protected void My_Page_Load_Function()
{
System.Threading.Thread.Sleep(5000); // A delay to simulate doing something.
lblMyLabel.Text = "Done!"; // Write output to page.
}
Create a normal div that shows the Ajax.gif so it shows "processing" by default.
In the javascript pageLoad() function, make a call back to the page using Ajax's PageMethods.
function pageLoad(sender, args) {
PageMethods.getVersions(LoadVersionsCallback);
}
The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:
[System.Web.Services.WebMethod]
public static string getVersions()
{
StringBuilder sb = new StringBuilder();
... etc.
return sb.ToString();
}
The javascript function that you specified when you called the method will run when the method completes. It will be passed the results. At the end of this function you hide the Ajax.gif div.
function LoadVersionsCallback(result) {
// do something with the results - I load a dropdown list box.
...etc.
// here is where you hide your div holding the Ajax.gif
}
And then you work on making whatever it is you are doing run in less than 1 second....
I would put a Ajax timer on the page and set it for less than a second... It will only run once and after its first tick then you need to disable it otherwise it will fire again. (you don't want to start your long running process more than once...)
then on the OnTimerTick event I would start your long running process that way your page fully renders and you can display your UpdateProgress while its running.
you out to be able to move the code that you had for your button click to the time tick...
I used JBrooks idea above (i.e. showing the progress indicator as part of a Panel that also includes the Iframe, so that it shows even before the Iframe first loads), but simplified it: style the iframe so that when it does appear it is on top of the animated GIF.
Requires no Javascript or C# code-behind.
Here's the relevant ASPX, followed by the CSS. You'll have to noodle with the "top" setting in the style to cover the image you use.
<asp:Panel ID="DetailPanel" runat="server" CssClass="submitBox detailPanel">
<asp:Table ID="Table1" runat="server" Width="100%">
<asp:TableHeaderRow ID="TableHeaderRow10" runat="server">
<asp:TableCell ID="TableHeaderCell" runat="server"
Font-Bold="true" HorizontalAlign="Center">
Title Text
</asp:TableCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/animated_progress.gif" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div class="iframeOverlay">
<iframe id="IframeDetail" runat="server" style="width: 100%; height: 100%;" />
</div>
</asp:Panel>
.iframeOverlay
{
z-index: 2;
position: relative;
top: -50px;
}
With Jquery.
<script>
$(document).ready(function() {
$('#<%= UpdateProgress1.ClientID %>').show();
});
</script>
<script> $(document).ready(function() { $('#<%=
UpdateProgress1.ClientID %>').show(); }); </script>
This worked well for me, just had to add it to the end of the BODY section and works like a charm.
i've noticed that popup shows BEFORE text gets updated in the textbox, i guess js gets called before the page gets rendered ... that would explain the 'undefined' popup ... how do i make sure js gets called AFTER the page is rendered?
rewriting to make it as simple as possible:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtRcaNotes" runat="server" TextMode="MultiLine" Width="800px"></asp:TextBox><br />
<asp:Button ID="btnDoneWithRcs" runat="server" OnClick="btnDoneWithRcs_Click" Text="Action Completed / Update Notes" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(
function(){doStuff();}
);
function doStuff()
{
$(document).ready(function() {
$('txtRcaNotes').hide();
alert($('txtRcaNotes').attr('id'));
});
}
</script>
</body>
Code Behind:
protected void btnDoneWithRcs_Click(object sender, EventArgs e)
{
txtRcaNotes.Text += "asdfadf";
}
TEXTBOX DOESN'T GET HIDDEN, ALERT() RETURNS 'UNDEFINED'
You're just missing your id selector syntax. Try:
$('#<%= txtRcaNotes.ClientID %>').hide();
alert($('#<%= txtRcaNotes.ClientID %>').attr('id'));
Note the addition "#" prepended before each selector.
One thing you could try is using Firebug, or some other DOM inspector and check the actual element IDs that are being generated by ASP.NET before and after your AJAX call and see if they are the same.