I have tried searching for a solution for this, but nothing seems to be working for me. My problem is pretty straightforward though (so, I think).
I am using foundation with asp webforms and have a reveal modal window that fires when the page is loaded.
Code:
$(document).ready(function () { $('#myModal').foundation('reveal', 'open') });
The above works fine, however, any time I put an ASP button inside the modal (the one I am using, btnReset, redirects to a new page), clicking on it will not fire the event attached to it.
Code:
<div id="reset">
<div class="large-2 columns">
<asp:Button ID="btnReset" runat="server" Text="Reset"
OnClick="btnReset_Click" OnClientClick="btnReset_Click"
CssClass="button small radius alert" />
</div>
</div>
Code for btnReset:
protected void btnReset_Click(object sender, EventArgs e)
{
HttpCookie cookie = Request.Cookies["userInfo"];
cookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(cookie);
Response.Redirect("LogIn.aspx");
//Server.Transfer("LogIn.aspx");
}
I'm sure I am missing some here, but I'm just stumped on what I am doing wrong. How can I get an ASP button and have it fire it's event when it is inside a modal?
I know this was asked a month ago, but I ran into the same problem and found this question with no solution. I have found the solution over at the Foundation forums and thought I would answer it here for future reference.
This issue is with how foundation adds your modal. When you look in your dev tools you will see that the modal, when called, is outside the form making the asp buttons unable to access the code behind.
This means we need to append the the modal to the form so that the buttons will access the code behind.
I tried several different ways to achieve this in the javascript using appendTo, but found the easiest method was the make foundation use the root element form.
$(document).foundation('reveal', { rootElement: 'form' });
I found that here: Elena Zhdanova solution
For anyone new stumbling across this issue you can now add this to your reveal modal and your webforms buttons will work as intended inside the modal.
data-append-to="form"
The documentation is here. And the credit goes to this old forum post by Lars Jensen at the bottom of the thread here
Related
I've updated my .Net web application to use Framework 4.5, after the update, all the input buttons (not asp:Buttons), have stopped firing the onclick javascript code, this is only happening on those buttons that are inside a user control (.ascx).
Just for the record, user controls are neither being loaded dinamically nor inside update panels.
My buttons look like this
<input id="cb" onClick="myfunc()" type="button" value="Close" />
My user controls are included to the page as follows
<cc:actionbar id="theActionBar" runat="server"></cc:actionbar>
and the javascript function, which is also included within the user control, is
function myfunc() {
if (confirm("Before closing, please make sure you saved any changes.\nAre you sure you want to close?") == true) {
__doPostBack('theActionBar:theClose', '');
}
}
this works just fine on Framework 3.5 and previous versions.
any idea why is this happening??? or how can I solve this?? I have tried several suggestions I've found over the internet and nothing seems to work.
Thanks in advance.
.
I can't see an obvious reason, but have you considered simplifying your approach to avoid the custom javascript and hard-coded postback event reference? You can get exactly the same behaviour with an ASP.NET button's OnClientClick property:
<asp:Button runat="server" ID="btnClose" Text="Close" OnClick="btnClose_Click" OnClientClick="return confirm('Before closing, please make sure you saved any changes.\nAre you sure you want to close?')" />
Returning false from the OnClientClick code or function prevents the postback.
Switching to this approach may be preferable and may even solve your issue if it's something to do with the postback event reference.
I am trying to put a Skip to Content link within my web application, but am having some issues.
Currently I have
<asp:LinkButton id="linkSkiptoContent" runat="server" OnClick="linkSKipToContent" Text="Skip to Content"></asp:LinkButton>
within the asp page
and an onClick event receiver
protected void linkSkipToContent_Click(object sender, EvenArgs e){
checkbox.Focus();
}
I am trying to avoid javascript because users have the option to disable it, which would render the link useless. And I know the checkbox.Focus() works properly, since I stuck it in the Page_Load() method and that worked at intented. However, what happens is clicking the link causes it to be focused after the onClick event completes.
Just print an anchor:
<a name="content" />
And link to it:
Go to content
Don't need JS or serverside stuff for that.
I am trying to figure out if I have something wrong with my architecture, or if I am just in need of a quick fix.
I have the following on my page:
<div ID="UploadDashboardDecorationZone">
<fieldset id="UploadDashboard">
<legend>Upload Dashboard</legend>
<telerik:RadUpload ID="UploadDashboardSelector" Runat="server" Width="235px" AllowedFileExtensions=".xml" MaxFileInputsCount="1" ControlObjectsVisibility="None" />
</fieldset>
<div class="BottomButton">
<telerik:RadButton ID="SubmitUploadDashboardButton" Runat="Server" Text="Upload" OnClientClicked="CloseUploadDashboard" />
</div>
</div>
The user selects a file they wish to upload, then they press the SubmitUploadDashboardButton.
I then have the following server-side code:
protected void Page_Init(object sender, EventArgs e)
{
if (Request.Files.Count > 0) HandleUploadedFile();
}
This all works great. The uploaded file is responded to and I see the changes on my page. The only problem is that I have left my page's request HTTP Method as POST and not GET. This means that bad things will happen if the user refreshes the page.
Previously, I had used the following code-snippet to resolve this issue:
Page.Response.Redirect(Page.Request.Url.ToString(), true);
Unfortunately, this does not work for me anymore. I don't want the flashing that happens with reloading the page (in addition to some code issues that arise with reloading).
What are my other options here? If I wrap UploadDashboardDecorationZone with an UpdatePanel, then Request.Files comes out as 0.
Is there a quick code-fix for this that is common? Or am I missing something deeper in my understanding of how the file upload process works?
Thanks.
I don't know of a way to get around the "flash" when the page changes unless you do your calls using Ajax which doesn't require the page to reload at all.
I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr
I'm just preparing the release of a library site builded in asp.net:
http://213.133.103.5/gramma_prod/Site/Index.aspx
All it's working great on FF and Chrome but on IE the asp button click event is not working.
Please notice the most important buttons: "Adauga in cos" (Add to basket)...
I'm just struggling to find out the problem...
I've checked the forms to not have nested ones but they seems ok.
Could you provide any other ideea?
ps: I did not post any code because this problem occurs on all pages...
Thanks in advance.
Edit:
Code for "Add to basket"(Adauga in cos) button from the index:
<asp:ImageButton ID="imgBtnCosBooksFeatured" runat="server"
OnCommand="addProductToBasket_Click"
CommandName="Click" CommandArgument='<%# Eval("Carti_id").ToString()+","+Eval("Titlu").ToString()+","+Eval("Autor").ToString()%>'
ImageUrl="../Site/images/featured-cos.jpg" ToolTip="Adauga in cos" />
works ok on ff and chrome. Fails on IE :(
Are you sure, your button, have the click event, and enable post back?
I don't see any onclick event... here is the source. Am I missing something?
<div class="adauga">
<input type="image" name="Repeater2$ctl00$imgBtnCosBooksFeatured" id="Repeater2_ctl00_imgBtnCosBooksFeatured" title="Adauga in cos" src="../Site/images/featured-cos.jpg" style="border-width:0px;" />
</div>
SOLVED!!!
What a stupid thing: i had a user control for the header which contained a form tag. So basically, my index contained two form tags because the user control was included as well....Auchhhhhh!