I have what I think is a pretty basic setup for using the ajaxcontroltoolkit's AsyncFileUpload control. Basically the control works correctly if I take it out of the div, but when I put it inside the div it doesn't fire the OnUploadedComplete server-side event anymore.
How this works is you rollover the image you want to change, click 'update image' and it opens a dialog (which is the div the AsyncFileUpload control is in) and allows you to upload a new image.
<div id="dialog-message" style="display: none;" title="Upload a Headshot Photo">
<p>Upload a headshot photo of this person. Your photo will be uploaded once you select and crop your photo.</p>
<fieldset>
<legend>Choose a photo to upload</legend>
Acceptable formats: .jpeg, .jpg, .gif, and .png and should be at least 72 DPI and 221x221.
**<ajax:AsyncFileUpload ID="asyncImageUpload"
ThrobberID="throbber"
OnClientUploadComplete="uploadComplete"
OnUploadedComplete="AsyncFileUpload_Complete"
runat="server" />**
<img src="/images/ajax-loader.gif" id="throbber" runat="server" style="display: none;" align="absmiddle" alt="loading" />
</fieldset>
</div>
Above is the div which contains the AsyncFileUpload control. Like I said, if I move it outside the div it works fine. I have already tried to change the enctype in the form and this is what it currently looks like:
<form id="form1" enctype="multipart/form-data" method="post" runat="server">
I have tried every suggestion I could find while trying to find a solution to this problem, but none seem to be working. This isn't even in an update panel, so I'm not sure why it's not firing.
The only thing I can think of is that it has something to do with the div being hidden at first and then shown once the user clicks on the link. I really hope someone can help cause I'm about to throw my computer out the window haha. Thanks in advance!
Code-behind:
protected void AsyncFileUpload_Complete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(4000);
if (this.asyncImageUpload.HasFile)
{
string path = MapPath("~/images/uploads/") + Path.GetFileName(e.filename);
this.asyncImageUpload.SaveAs(path);
}
}
Related
I have the below code which I am using to open a aspx page inside a modal popup but the issue is as soon as I load the host page of the modal popup it is redirecting to the one which is inside the iFrame.
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<iframe style="width: 350px; height: 300px;" id="irm1" src="PayrollScope.aspx?id=49437" runat="server"></iframe>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
So the sequence is
MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal
But as soon as I hit the MainPage.aspx it is redirecting to PayrollScope.aspx. I tried to use jQuery modal popup also but the same issue is happening. Can someone please tell me why it's redirecting.
Thanks
If you use jQuery dialog to load that other page?
Well, it will display, but THEN if any code in the page has a post back, then yes, it will re-direct to that page.(jQuery dialog simply pulls the whole other page right into that div and "merges" it into your current page's dom. So, you can display the page, and no re-direct will occur. However, any server side button event code (button press, or even say a after update event of editing a text box (on changed) will cause a post back. And any post-back WILL thus cause the page to re-direct (after all any code behind event does send the WHOLE page back and the URL to IIS. So, it much depends on if you JUST displaying that page, or if you want/need/have user interaction on the 2nd page loaded as a dialog.
So, dump the ajax popup and controls reverence to the id of the popup. (don't try jQuery an the ajaxtool kit to "both" try and pop up a control/div - they tend to not play nice with each other.
I do suggest using jQuery.
This would work (but with above post back issues in mind).
<body>
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Show page as dialog" OnClientClick="showpage1();return false"/>
<div id="poppage" runat="server" style="display:none">
</div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
mydiv.load('MyOtherPage.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, above will LOAD the other page (into that div), thus pop up the 2nd page when you click on the above button. (and note the return=false). If you have any postback on the page, then everything will quite much blow out the dialog. (and this also means the 2nd page we display (load) as per above.
However, if you need interaction on that 2nd page? (have to click on buttons etc.).
Then the idea of a iframe is a VERY good idea.
So, you have same as before, but we now don't "load" the page using jQuery.ui, but JUST display (and thus pop up) the div with a iframe you placed inside.
So,the div becomes this:
<div id="poppage" runat="server" style="display:none">
<iframe src="MyOtherPage.aspx" class="auto-style1"></iframe>
</div>
and the js code becomes this:
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
// Open the dialog
mydiv.dialog('open');
}
So, now the above will just display that other page in the div, and since it is a iFrame, then you can interact - and post backs in that iframe should work just fine.
So, remove the ajax panel stuff - give jQuery.ui a try. I used the ajaxtool kit stuff, but for displaying another whole page in a dialog, then i found jQuery.ui seems to work a lot better
I am using ASP.NET for a web page in order to make some server calls that involve looking up user organization information. Based on that information, we need to either hide or display a div. In the header I have a C# function that definitely runs. I have tried the following lines to hide the div.
divID.Style.Add("display","none");
and
divID.Visible = false;
In the body, I am currently using an asp:Panel that runs at server and contains the id "divID". No matter what I do, I can't get the div to hide (without manually putting the styling in). I tried putting the scripts before and after the body, and it didn't make a difference. Any suggestions on the best way to do this would be appreciated.
EDIT:
Here is the C# initiating code.
<script runat="server" language="C#">
void getUserInfo(Object sender, EventArgs ev){
The rest of the C# code is irrelevant, but the relevant line shown above is definitely being run.
The HTML portion looks something like this.
<asp:Panel runat="server" id="divID" style="width:200px; height:130px; ">
<div style="text-align:center">Test Data</div>
</asp:Panel>
C# code is always compiled and run from the server-side, and so cannot impact the state of a page once rendered unless you use postbacks or callbacks. If you want to change the visible state of a control on the client-side, you will need to use Javascript on the client side (possibly triggered by a button click) to show and hide the control.
As an example, check out the solution at the link below.
https://forums.asp.net/t/1603211.aspx?Show+hide+div+on+button+click+without+postback
<script type="text/javascript">
function ToggleDiv(Flag) {
if (Flag == "first") {
document.getElementById('dvFirstDiv').style.display = 'block';
document.getElementById('dvSecondDiv').style.display = 'none';
}
else {
document.getElementById('dvFirstDiv').style.display = 'none';
document.getElementById('dvSecondDiv').style.display = 'block';
}
}
</script>
<asp:Button ID="btn" runat="server" Text="Show First Div"
OnClientClick="ToggleDiv('first');return false;" />
<asp:Button ID="Button1" runat="server" Text="Show Second Div"
OnClientClick="ToggleDiv('second');return false;" />
<br />
<div id="dvFirstDiv" style="display: none;">
First Div
</div>
<div id="dvSecondDiv" style="display: none;">
Second Div
</div>
In the header I have a C# function that definitely runs.
If you're talking about the HTML page header - no, it definitely not running. C# code is executed only server side.
Based on your post, I'm assuming we're talking WebForms here and yo have a script block in your aspx file. While this is fine, I recommend placing the server-side code into a code behind file.
So all you need to do is to add a handler for the PreRender phase of the page life cycle and place your logic for showing/hiding the div in there.
public void Page_Prerender(object sender, EventArgs e)
{
divID.Visible = false;
' OR
'divID.Style.Add("display","none");
}
Note that setting the Visible property of a WebForms control excludes the control from rendering to the page, whilst setting display: none renders it as HTML but it isn't displayed on the page.
Try in backcode: divID.Controls.clear();
This worked for me.
I have a website where the user can select different cards. I need a way where when a new card is selected then the page does not refresh. When I click the back button now it just goes back to previous selections. I need it to go back to the previous page. Here is the code for the image change
<div class="imgCard" style="padding-right: 50px">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<fieldset style="border-width: 150px; border-style: none">
<asp:Image ID="imgCardChoice1" runat="server" />
<br />
<br />
<a id="openChange1" href="#" style="color: Red">Change Card</a>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the user clicks on "Change Card" then a jquery modal box opens and allows them to change the card. Thank you for any help/advice. If needed the code behind to select a new card is in C#.
Without knowing more, it sounds like you need to use AJAX to do that. If you are already using jQuery, check out jQuery.load(). You can make an AJAX request to a url on your site that will only return the image information and load that into the element you specify.
Here is a link to the docs:
http://api.jquery.com/load/
Try to use some javascript function.
create a div where you want to put your image.
then give him an ID, on javascript function call the div id and change the src to the image that you want to put.
on your link or wathever you have to change the image, call the onclick function and use the javascript function.
On my website i have 2 images, that onmouseover change an image in other div completely different.
see it on:http://roundhillevents.com
and pass the cursor on the facebook and on the youtube logo's.
If nothing appears, let stay the cursor over that a little while.
PS: Only works with forefox and don't know why.
I call a method to Send Email to the user ID and Redirect to the same page. Since the time taken for the server to send email is high, the page appears as if the send button is not clicked. Since there are no response from the website. I want to display a loading image or something, to show that the server is processing the request. How can I do that
You can use an UpdateProgress control
http://msdn.microsoft.com/en-us/library/bb398821.aspx
(Or even better: send the e-mail asynchronous in the background)
You can use either with an UpdateProgress control (as covered in the other answers), or a simple piece of jQuery.
jQuery example:
$('#my-button-id'').click(function(){
$('#my-button-id').hide();
$('#my-loading-image-id').show();
});
Remember to reenable the button if the action does not complete properly, else the user will not be able to try again.
Im not to familair with the UpdateProgress myself, but have seen it used before.
You need to have an animated gif, and the update progress will show this whenever the page is busy.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div class="">
Processing Please Wait...
<img runat="server" id="ajaxLoader" src="~/images/loadinfo.net.gif" alt="loading" /></div>
<div class="" style="height: 10px;">
</div>
</ProgressTemplate>
</asp:UpdateProgress>
With regards to actually disabling the page, this I dont think can be done.
i have my login in a fancybox and fancybox div is in a controller. problem is if click the button nothing happens event isnt fired.
this is my controller.ascx
<div id="inline1" style="width:400px;">
<ul class="forms">
<li class="inputfield"><asp:TextBox ID="kullanıcı_adi" runat="server"></asp:TextBox></li>
</ul>
<ul>
<li><asp:TextBox ID="sifre" runat="server"></asp:TextBox></li>
</ul>
<ul>
<li>
<asp:Button ID="Button1" runat="server" Text="Giriş Yap"
onclick="Login_Authenticate" />
<asp:Button ID="Button2" runat="server" Text="Vazgeç"/>
</li>
</ul>
</div>
and this is my cotroller.ascx.cs
protected void Login_Authenticate(object sender, EventArgs e)
{
bool authenticated = AuthenticateMe(kullanıcı_adi.Text, sifre.Text, true);
if (authenticated)
{
FormsAuthentication.RedirectFromLoginPage(kullanıcı_adi.Text, true);
}
}
and this is the default.aspx
<li class="gallery"><a id="various1" href="#inline1">Üye ol/Giriş Yap</a></li>
<div style="display: none;">
<co:c_login ID="id_c_login" runat="server" EnableViewState=true />
</div>
I found the solution. Same question asked before.
Fancybox - ASP.NET button not working Thank you for your answers.
A bit late, but it may help you.
This is because how fancybox works, when fancybox displays the div block, it creates temporary div block with your content and appends it to end of the body tag of the page, hence this generated temporary block is created outside form tag.
In a web page when you postback a page, the control which generates postback event must be within form tag to identify the page postback action.
To resolve this issue you can use a bit of javascript, create another button control but it should not be part of fancybox control, and on submit button within fancybox, fire click event of another created button (which will be inside form tag) with help of javascript.
That should solve your problem, please vote if it answer your question.
We can solve fancybox 2 event not firing issue by using parent property of fancybox.
for example -
$("#buttonClick").fancybox({
parent: "form:first",//Asp.net Button click event not working issue solved by using this statement
......your fancybox config options
});