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.
Related
I have been trying to get a Modal Popup to work for the last few months. I try and try, and after a while I just give up and find another way to work around it. I am very new to programming and have been doing some helpful things for my department, but in order to make these things viable alternatives I need to get more functionality out of them.
I want to be able to update a row in my SQL server, but the gridview is pulling data from a View, so the built in edit options won't work for me. I was hoping to be able to have a Modal Popup appear on the screen so that I can have the user put the data in and it will build the proper SQL statement to update the row.
I can't even get a Modal Popup with a single line of text to 'popup' though.
At the top of the page I have this:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then in my main div I have this:
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat=server"></cc1:ToolkitScriptManager>
Then down in the body I have this:
<asp:Button ID="btnTest" runat="server" Text="Test" />
<cc1:ModalPopExtender ID="mp1" runat="server" PopupcontrolID='pnlEdit" TargetControlID=btnTest" OkControlID="btnSubmit" CancelControlID="btnClose" BackroundCssClass="modalBackground" ></cc1:ModalPopupExtender>
<asp:Panel ID="pnlEdit" runat="server" style="display:none">
<div class="modalPopup>
<p>Text goes here.</p>
<asp:Button ID="btnSubmit" runat="sever" Text="Submit" />
<asp:Button ID="btnClose" runat="sever" Text="Close" />
</div>
</asp:Panel>
Code Behind currently has nothing for this. I have tried the same code with the variation of giving the btnTest an OnClick that does mp1.Show();. And also tried adding a "dummy" TargetControlID that is rendered but not shown in order to use the Code Behind to fire.
Every variation produces the same results. The "Test" button is clicked and then nothing happens. It appears that the page is reloaded. What am I missing here?
Please take a look at this Solution
I have a website developed by using ASP.NET. In there lot of ajax request are happening. So I want to display a image when ajax request is happening and hide the image after data loaded. Now this is works fine,
Here what I did so far
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="uppnlLocation">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="uppnlLocation">
<ContentTemplate>
<asp:DropDownList ID="ddContinents" runat="server" CssClass="form-control" OnSelectedIndexChanged="ddContinents_SelectedIndexChanged" AutoPostBack="true"> </asp:DropDownList>
<asp:TreeView runat="server" ID="tvCountries" OnSelectedNodeChanged="tvCountries_SelectedNodeChanged"></asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
So in above code when a user select a continent from the dropdown list the countries which belongs that continent will be load to the below treeview. So I want to display a loading image when a user select a continent from the dropdown while loading the countries. Now this is working. But the problem is when user select a tree node in treeview It also shows this progress control image. I don't want to display that image on that action. How to disable it?
I saw a post regarding this.
Is there a way to disable UpdateProgress for certain async postbacks?
I implemented it. but then postback is not happening for the dropdown menu.
So how to achieve this?
Thank you very much.
Its better just to use the DisplayAfter parametre to raise the delay that this is appears because I understand that this just happening so fast. Do not go with complicate javascript solutions just add a delay of 1 or 2 seconds...
<asp:UpdateProgress ID="UpdateProgress1"
runat="server" AssociatedUpdatePanelID="uppnlLocation" DisplayAfter="2000">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Well why not just use javascript to force it display none if you are okay with it...
For normal update panel and to call update progress is not always show up. Better to use javascript to pop up update progress rather than using default ways.
Code to pop up Update Progress
function showUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'block';
}
function HideUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'none';
Sys.Application.remove_load(HideUpdateProgress);
}
If you are using this way when your job is done in Code behind u need to call javascript to hide the update progress
As per following
In CS file
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Script", "Sys.Application.add_load(HideUpdateProgress);", true);
Hope this help you
I have looked at other questions and answers and still cant seem to solve my issue.
I am using jQuery UI tabs with 3 tabs: Basic Info, Payment, Confirmation
What I want to do is pass the values on the basic information tab textbox's, and payment tab into a label that is on the confirmation tab
ASPX:
<ul>
<li>Basic Information</li>
<li>Payment Information</li>
<li>Confirmation</li>
</ul>
<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>
</div>
Script in head:
$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});
The next tab function works fine, and the values retain in the textbox when the next tab is selected, however it wont pass to the label on the 3rd tab.
I think the problem is asp.net rename your server controls if the page has a master page.
add the attribute: ClientIDMode="Static" to your asp controls.
As you are using the ASP.NET controls, the ID will get changed while rendered. Use the jQuery Ends With selector for selecting the elements.
Use jQuery text method for ASP.NET Labels (i.e. html span), and jQuery val method for ASP.NET Toolboxes (i.e. html input).
Also, as the button is ASP.NET button, it gets post back every time you clickit, so use return false; at the end of button click method.
You have a AutoPostBack="true" for textbox, which might also create problem by resetting the label text while post back.
Below code will work if AutoPostBack="true" is removed from textbox.
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
$("input[id$=btnContinue]").click(function () {
$("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
return false;
});
});
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);
}
}
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.