I am trying to execute some javascript on the click of a asp gridview's hyperlinkfield. The javascript executes fine but the page posts back so when the iframe flickers before showing (The javascript simply sets the iframe's source and then its display from none to block.). How can I go about disabling autopostback on this control since it does not have such an attribute?
<Columns>
<asp:hyperlinkfield Text="Update"
NavigateUrl="javascript:ShowForm('frmAddAudits.aspx');"
HeaderText="Update"
target="_blank"/>
<asp:hyperlinkfield Text="Add Findings"
NavigateUrl="javascript:ShowForm('frmAuditFindings.aspx');"
HeaderText="Add Findings"
target="_blank" />
</Columns>
CSS
.ShowMe{display:block;}
.HideMe{display:none;}
Javascript
function ShowForm(urlToGoTo){
document.getElementById('myiFrame').src = urlToGoTo;
document.getElementById('myiFrame').className = "ShowMe";
}
Try using the TemplateFiled and the anchor tag like this :
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="#" onclick="javascript:ShowForm('frmAddAudits.aspx');return false;">
</ItemTemplate>
</asp:TemplateField>
if you want you can set runat="server" and give it an ID
In your javascript event handler add return false so the browser does not continue the click action, in this case doing the postback.
Of course, ideally, you wouldn't be using <asp:HyperlinkField>. Have you considered using <a runat="server"> instead?
NavigateUrl="javascript:ShowForm('frmAddAudits.aspx');return false"
Try this NavigateUrl attribute in the markup
NavigateUrl="javascript:ShowForm('frmAddAudits.aspx');return false;"
And also you can try basic HTML anchor tag and javascript to open new window.
See if you are not doing anything on postback of these hyper links then what is the purpose to draw server side control.
These affects the performance while rendering on web page. So I would suggest you to use <a> insread of these hyperlinkfields
you can use instead :
<a href="#" onclick="javascript:ShowForm('frmAddAudits.aspx');return false;">
Postback will never occure in this case and reduce the rendering time and momory cost in comparative to byperlinkfield.
Related
I have a dnn site, which has a label and an imagebutton, clicking on which replaces the label with textbox and user can enter their text, once submitted the label will be updated with this text. Now clicking on the imagebutton causes the page to postback, i don't want a postback for this, hence i have placed telerik RadAjaxLoadingPanel control, so the cool loading div gets displayed while processing is going on, but for some reason it's not working, It always throws below error:
Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.
Below is the markup of my page: (I tried the wrapping the code with RadScriptBlock and RadCodeBlock, in both case it throws same error as above)
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<a class="subscribetoday" href="#">
<strong>Subscribe Today!</strong> <asp:Label ID="lblsubscribemsg" runat="server" Text="12 issues for $14.95"></asp:Label>
<asp:ImageButton ID="imgEditSubscribe" runat="server"
OnClick="imgEditSubscribe_Click" ToolTip='Edit' ImageUrl="~/images/edit.gif" AlternateText='Edit' Visible="false" />
<div id="editsubscribe" runat="server" visible="false">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox> <asp:ImageButton ID="imgSave" runat="server"
OnClick="imgSave_Click" OnClientClick="return validateSubscribeNote();" ToolTip='Save' ImageUrl="~/images/save.gif" AlternateText='Save' /> <asp:ImageButton ID="imgCancel" runat="server"
OnClick="imgCancel_Click" ToolTip='Cancel' ImageUrl="~/images/cancel.gif" AlternateText='Cancel' />
</div>
<img src="img/prosound-subscribe.png" alt="Subscribe Today!">
</a>
</telerik:RadScriptBlock>
</telerik:RadAjaxPanel>
Can anyone tell me where i am going wrong with this.
The problem is with other server code blocks on the page (<%=%> for example, generally - <% ... %>), not with this concrete piece of code you are trying to AJAX-enable. You can read more here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock
So, you should find the place where those code blocks are used and wrap THEM in a RadCodeBlock controls. It is often scripts that reference controls, e.g.:
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script>
function getReference() {
return $find("<%=someControl.ClientID%>");
}
</script>
</telerik:RadCodeBlock>
With DNN, however, I cannot say where these may originate.
Thus, your other option is to use an <asp:UpdatePanel> control to get AJAX requests instead of full postbacks. The native AJAX toolset also offers the <asp:UpdateProgress> control that you can use instead of RadAjaxPanel.
<asp:GridView runat="server" ID="test">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="Aboutus.aspx">
<asp:ImageButton runat="server" ImageUrl="~/image/background-image-top_banner.jpg"
ID="img" /></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
When I click on the Image in the gridview, it is not going to Aboutsus page? WHy don't the anchor tag work here?
You might do something like this, to keep things simple
<img src='<%# Eval("ImageSource") %>' />
Or use src="your image location" , if that is static
Dont use image button this will behave as an asp.net button, therefore you have killed your link. Use asp:hyperlink instead
<asp:Hyperlink runat="server" Id="navAbtUs" NavigateUrl="AboutUs.aspx" ImageUrl="~/image/background-image-top_banner.jpg" ID="img" />
I'd also question why you are using a Gridview for this, you will have a column with repeated info.
Try like this chagne image button to simple asp image
<a href="Aboutus.aspx">
<asp:Image runat="server" ImageUrl="~/image/background-image-top_banner.jpg"
ID="img" /></a>
Imagebutton is always creating problem for me,
so i always use link button and giving image between it
like
<asp:linkbutton id="id1" runat="server" ><img src='<Eval("Imagepath" >' /> </asp:linkbutton>
I know this is not appropriate answer, but i have faced problems with image button inside gridview and saw some other guys also face, so i suggested, this is a good alternate of image button
by the way why it is needed to put image button inside linkbutton, you can simply keep asp image if not want to use html image
In my c# web app,
I'm trying to invoke an Ajax HoverMenuExtender from Javascript, rather than from hovering over an assigned control.
If I set the TargetControlID of the HoverMenuExtender to a control on my page and hover the mouse over it, the hover menu displays, however, I cannot get it to display by manually invoking it with javascript.
The Javascript I'm currently trying:
popup = $("body").find('HME1');
popup.show();
//popup._popupBehavior.show();
I've stepped through the code so I'm sure popup.show() is being called. But it seems like nothing happens. It seems like .Show isn't really what we want to do, but instead we need to "Invoke" the AjaxExtender somehow.
The HoverMenuExtender:
<cc1:HoverMenuExtender ID="HME1" runat="server" BehaviorID="HME1" TargetControlID="dummyLink" PopupPosition="Top" PopupControlID="PopupMenu"></cc1:HoverMenuExtender>
A dummy link i'm assigning the control ID to:
dummy
The panel i'm trying to display:
<asp:Panel CssClass="popupMenu" ID="PopupMenu"
runat="server">
<asp:LinkButton ID="article" runat="server"
CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server"
CommandName="Delete" Text="Delete" />
</asp:Panel>
Use the following code:
$find("BehaviourID")._popupBehavior.show();
I have a GridView with a button called btnShowTradeScreenshot. The GridView creates many buttons and I want to apply the jQuery button to it. Here's my relevant GridView code:
<asp:GridView
ID="grdTrades"
runat="server"
>
<Columns>
<asp:TemplateField HeaderText="Screenshot" >
<ItemTemplate>
<input name="btnShowTradeScreenshot" runat="server" visible='<%# Eval("screenshotId") != DBNull.Value %>' type="button" value='View...' onclick='<%# "ShowImageInNewPage(\"App_Handlers/ImageHandler.ashx?screenshotId=" + Eval("screenshotId") + "\")" %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I am trying to apply the jQuery using this code:
<script type="text/javascript">
$(document).ready(function () { $("#<%= btnShowTradeScreenshot.ClientID %>").button(); });
</script>
Nothing happens and I get the standard button, not the jQuery button. When I look at the page source, I notice that the buttons have mangled names like:
ctl00$contentMain$grdTrades$ctl05$ctl03
ctl00$contentMain$grdTrades$ctl10$ctl03
etc
Any ideas on how to apply the jQuery to all my buttons?
Thanks.
You could use a class name on the buttons instead of relying on the ClientID; that way you save on JavaScript length and don't need to bind to every specific control.
In JS:
// equivalent to $(document).ready(function() {
$(function() {
$('.customButton').button();
});
In ASP.NET:
<input type="button" runat="server" class="customButton" .../>
Also, if your grid is an AJAX-bound grid, the <input/> elements will be recreated and you'll need to rerun the code on the grid to get the styles applied:
$('#<%= grdTrades.ClientID %> .customButton').button();
Try using a name selector instead:
$('input[name$=btnShowTradeScreenshot]').button();
or even better apply a CSS class to your input and then:
$('.button').button();
There are many buttons created and ASP will generate different IDs for them so as to ensure each one has a unique ID. Since $('#...') is aimed at selecting a single uniquely identified element you cannot use it to select multiple buttons.
Try $(':button') to select all button objects. Alternatively you could set each button's class to something like ShowTradeScreenshot and then select them all with $('.ShowTradeScreenshot').
I am using asp:hyperlink button to open a Terms and Condition pop up window.
Code for the hyperlink is -
<asp:HyperLink ID="HyperLink4" Target="_blank"
NavigateUrl="javascript:window.open('test.aspx');"
ForeColor="#F58022" runat="server">Terms and Conditions
</asp:HyperLink>
When I click this URL in a browser it opens up my test.aspx page. But along with test.aspx it opens up another page:
the URL of the page is: "javascript:window.open('test.aspx');"
the body of the page is: [object]
Can you please suggest me how to get rid of this unwanted page?
Thanks
Use:-
<asp:HyperLink ID="HyperLink4" Target="_blank"
NavigateUrl="javascript:window.open('test.aspx'); return false;"
ForeColor="#F58022" runat="server">Terms and Conditions</asp:HyperLink>
The problem is that window.open returns a window object. One purpose of the javascript: "protocol" was to allow javascript code to generate HTML content which is return be the expression following the protocol. Navigation then happens to a new page containing that HTML.
In you case because you have Target="_blank" a new page is opened and the object return by your expression (the new window opened by window.open) has its toString() method called and that is what is displayed in this extra window.
Edit:
I've struck the code because it doesn't work. The correct solution is provided by silky. However I'm not deleting the answer because the explanation of what is going on in the question code stands. Hence the solution really is:-
<asp:HyperLink ID="HyperLink4" href="#"
onclick="window.open('test.aspx'); return false;"
ForeColor="#F58022" runat="server">Terms and Conditions</asp:HyperLink>
Target no longer need it isn't used. Left as HyperLink control since there may be other reasons the OP needs it as a control on the page.
Is there any reason why you need to use the HyperLink control?
You could probably just use a standard HTML link (or an HtmlAnchor control) instead and use the client-side onclick event to fire your JavaScript:
<a id="HyperLink4" runat="server" href="test.aspx" target="_blank"
onclick="window.open('test.aspx');return false;"
style="color:#F58022">Terms and Conditions</a>
Make it:
NavigateUrl="javascript:window.open('test.aspx'); return false;"
Better practice, however, is to put this in OnClientClick
NavigateUrl="#" OnClientClick="window.open('text.aspx'); return false"
-- edit:
<asp:LinkButton ID="HyperLink4" Target="_blank"
NavigateUrl="#" OnClientClick="window.open('text.aspx'); return false"
ForeColor="#F58022" runat="server">Terms and Conditions</asp:LinkButton >
Updated per comments.
<asp:HyperLink ID="HyperLink4" Target="_blank"
NavigateUrl="javascript:void window.open('test.aspx');"
ForeColor="#F58022" runat="server">Terms and Conditions</asp:HyperLink>
Remove Target=_Blank, you don't need it, the JavaScript opens a new window already...
Tip: to know why it acts differently, view source in the browser and check what the web control produces in HTML terms.