I have a mock website that I'm creating just for practice. I'm working with AJAX, loader icons, and file uploads. For this, I have a File Upload, an ASP Button to load the file, and HTML Button to refresh the table with AJAX, and a table whose HTML is always built using a StringBuilder.
Here's what I need to happen; right now I'm just setting up my button events. The upload file WILL send a Postback due to a file being uploaded (eventually) but the refresh button will NOT. The page loads the table BEFORE data is added to the database. Then that table is replaced by a new table that displays new data after the refresh button is clicked and new data has been entered. The upload button should not reload the table. The issue I have right now is that I can click the upload after manually adding data and the table remains the same. The refresh shows that data. However, when I hit the upload button AGAIN, the table returns to it's original set of data, before I manually added stuff. Why? I changed the div's html to contain the new table, so why is it going back to the old?
Not sure if I explained this well enough but... there ya go. If anyone can help, that would be great~ I'd love to increase my knowledge and skill-set whenever possible. :)
Here is an image (Please note that I am NOT a web designer and that the overall design is simple and well... just plain bad):
Here is a piece of the back-end .cs code. This is just the Page_Load event, it prevents the table from reloading on a postback which is called from the Upload Button. "GetData()" is just the method that creates the table using a StringBuilder which is then injected into a div with the help of an asp:Literal. I don't see it necessary to post the "GetData()" method but will if requested.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ShowData.Text = GetData();
}
}
Here is the script portion that uses AJAX to refresh the table by using .get() which refers to an .ashx file that produces the same table as "GetData()". The code in the .ashx is also unnecessary but will post if requested.
<script type="text/javascript">
$("#refresh").click(function (event) {
$.get("helpers/TableLoad.ashx", function (data) {
$("#tableHolder").html(data);
});
});
</script>
Related
I am working on an Asp.net, C# Application.
I want to Refresh the webpage after I clicking on “Update” LinkButton; in Grid view. I have tried the following code; however it just refreshes the page without saving the updated data in Grid view.
protected void LinkButton1_Click1(object sender, EventArgs e)
{
Response.Redirect(Request.RawUrl.ToString());
}
Name of DataSource SqlDataSourcePlan
SELECT [PlanID], [Deposit], [DepositReturn], [Discount] FROM [PaymentPlan] WHERE ([Ref] = #Ref)
UPDATE [PaymentPlan] SET [Deposit] = #Deposit, [DepositReturn] = #DepositReturn, [Discount] = #Discount WHERE [PlanID] = #original_PlanID
Use RawUrl instead:
Response.Redirect(Request.RawUrl)
The raw URL is defined as the part of the URL following the domain
information. In the URL string
http://www.contoso.com/articles/recent.aspx, the raw URL is
/articles/recent.aspx. The raw URL includes the query string, if
present.
Edit: "without saving the updated data in Grid view"
Why do you think that redirecting the page to itself should save something somewhere?
Have a look at this tutorial: Inserting, Updating, and Deleting Data with the SqlDataSource (C#)
I assume that you actually want to update the GridView instead of the whole page. Then you should call GridView.DataBind().
My guess (without some other informations in the code it is difficult to say) is that althought the information is saved in the database, the datasource for the gridview is not refreshed with the new values.
I have seen this problem often regarding this part.
You have to rebind the gridview with Page.DataBind or GridViewName.DataBind() (where GridViewName is the name of your gridview) before the redirect.
You probably don't reload the GridView at PageLoad or PageLoad does not occure (can't know without the server code). If that would work properly, you would not need the databinding before redirecting.
Here is the context:
I am building a .aspx page that allows the user to administrate some xml documents we have on our server. The page content is loaded using AJAX, so buttons and forms are dynamically added to the document.
If I had static buttons that I was creating within the .aspx page before it loads on the client's machine, I could attach an event to it very easily. However, I'm dynamically adding and removing buttons and forms on the fly, using jQuery.
Here is a simplified example:
In the following jsFiddle, I'm pretending that the html document contains the following script:
<script language="C#" type="text/C#" runat="server">
void SaveAllChanges(Object sender, EventArgs e)
{
Button clickedButton = (Button)sender;
clickedButton.Text = "foobar";
}
</script>
And that I have a javascript file that contains the following:
$('button.buttonGenerator').click(function() {
$('.buttonContainer').append(
'<button onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
});
Obviously the buttons I am creating can not run the function SaveAllChanges with the way it is now. I added the onclick attribute to show what I needed to happen, in a pseudo-code kind of style.
How can I make it so that dynamically added buttons can run the C# method I have defined within the script tag at the top of the document?
Here is the jsfiddle: http://jsfiddle.net/2XwRJ/
Thanks.
You can give all buttons that must save changes a common class (e.g. class="ajaxButton") and have one jQuery method that responds to click events on elements matching that class (use live so that updates to the DOM are reflected).
$("button.ajaxButton").live("click", function(){
// Perform your Ajax callback to run server-side code
});
What you need to do is use something like ..
$(document).ready(function() {
$('button.buttonGenerator').click(function() {
$('.buttonContainer').append(
'<button id="#dynamicCommentButton" onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
});
$(document).on('click', '#dynamicCommentButton', function() {
alert($(this).attr('id'));
});
});
You are not going to be able to add the buttons like you have it there as this code here is just adding it as an HTML DOM element and the onclick attribute will be the on the client element. As a result clicking the button will try fire a SaveAllChanges javascript function
$('.buttonContainer').append(
'<button onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
What would be best would be to create that SaveAllChanges function in javascript and then you can handle it from there. Two of the ways I see you being able to do this are:
Have a http endpoint setup (script service, web api or just posting to a page) that you call using Ajax from your javascript. You can then pass through any needed arguments.
You could have a hidden element and hidden button on the page so that when the javascript is called it populates any arguments you need and then clicks the hidden button and posts the page back.
Personally I would choose the first approach from a user experience stand point as the page will not be posting back each time. I have used something similar to the second approach and it works fine but just feels very clunky.
Using ajax I am causing an OnTextChangedEvent before this happens there is some Javascript that performs a check on the input field for validation and outputs some text based on whether it is valid or not. The Ajax I run resets the changes made by my javascript. It all happens in this order:
Javascript fires!
Text changes show
Ajax fires!
Text changes reset
The ajax partial autopostback is contained in an update panel. Without giving any code away is there anyone who has an idea of a way to stop the javascript changes resetting?
Over the day I will add code as I find time. Thought I would get the question up atleast. Thanks in advanced.
The Text changes are made in the DOM-Model and are not transmitted to the server.
If the ajax fires it will override the changes in the DOM made by javascript.
Solution is to transmit the validation-texts to the server and to add them again via ajax.
An UpdatePanel completely replaces the contents of the update panel on
an update.
This means that those events you subscribed to are no
longer subscribed because there are new elements in that update panel.
Full answer here
In your Page or MasterPage, put the following script
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
Validate(); //method that performs check on input field
}
</script>
I am using Ajax File Upload control in ASP.NET 4 using c#. The same page has an update panel too but the upload control is not inside the update panel. The upload control is outside of the update panel.
The update panel has a captcha image and submit button which is described here too. The submit button inside contains code for saving the file from upload control.
The problem is that when user has browsed the fife to be uploaded using upload control and then enters a wrong captcha value and submits, then a new captcha image is given asynchronously to the user for entry. Now the upload control still shows the path in the upload bar for the file, but on the programming side it does not detects the file.
The submit button code:
if (AsyncFileUpload.HasFile)
{
// upload logic and other stuff
}
else
{
// lblShow.Text = "There is no file to be uploaded";
}
The above code for example executes the else part to say "There is no file to be uploaded". The page still hasn't refreshed totally and the file upload control has the path of the file displayed. Kindly help me with this problem.
If your code:
if (AsyncFileUpload.HasFile)
{
// upload logic and other stuff
}
else
{
// lblShow.Text = "There is no file to be uploaded";
}
is in the Page_Load event, it will still execute in the context of a partial post-back, e.g. the UpdatePanel refresh. If a full form submit has not been performed from the browser (you mentioned your File Upload is outside of the UpdatePanel) then the page will not detect the file upload.
What I am confused about is why you have called it AsyncFileUpload when it is outside the UpdatePanel?
EDIT:
Based on your answer, I don't think your Captcha implementation is workable with async file upload as you have it now.
The UpdatePanel does an async POST to evaluate captcha result, but you will not POST the file contents yet because its not inside the UpdatePanel. Then your server-side code evaluates the captcha result and will either return html or a redirect in the async-response back to the browser... somewhere you need to eventually submit the form to get the file.
Unless you're prepared to write code to send some javascript back to your page in the async-response to trigger a full form submit, AND re-evaluate CAPTCHA again on the form submit, you're probably better off taking out the UpdatePanel, in my opinion.
If you are using Ajax update panel with file upload control then you have to add postback trigger into update panel triggers. Like:
<Triggers>
<asp:PostBackTrigger ControlID="btnContactSubmit"/>
</Triggers>
In summary:
I have an ASP.NET web page that causes an AJAX postback to the server. When this event handler runs (in the code behind) it will generate some JavaScript that I then want to run in the client. Not sure how to achieve this.
In Detail:
I have an ASP.NET web page with multiple items displayed on the page.
As a "nice to have", I want to display either a green circle or a red cross next to each item (these differ depending upon each item). Since it isn't vital for the User to see these icons and also because it takes several seconds to work out which icon should be shown for each item, I want to perform this after the page has loaded, so in an AJAX callback.
My thought therefore was this. When creating the page, I would create both icons next to each object and create them with the style of "hidden". I would also make a note of each one's client ID.
Then, when the callback occurs, I fetch the necessary data from the database and then create a JavaScript function that changes the display for each of the icons I want to show from "hidden" to "visible".
I thought I could achieve this using the ScriptManager object.
Here's a very trivial version of my server side code (C#)
void AjaxHandler(object sender, EventArgs e)
{
// call to database
string jscript = "alert('wibble');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript);
}
Obviously, here I'm just trying to get an alert to fire after the postback has occurred...in real life I'd have my JavaScript function to change the display of all the icons I want to display.
When I run this, the serverside code runs and yet nothing happens in the server.
I have also tried:
ScriptManager.RegisterClientScriptBlock()
Page.RegisterStartupScript()
Page.RegisterClientScriptBlock()
Page.ClientScript.RegisterStartupScript()
Page.ClientScript.RegisterClientScriptBlock()
but none of them work....
FireFox shows the following JavaScript error:
Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://localhost/MyWebSiteName/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a3de828f0-5e0d-4c7d-a36b-56a9773c0def%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1314.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3aec1048f9-7413-49ac-913a-b3b534cde186%3a16e4e7cd%3aed16cbdc%3a874f8ea2%3af7645509%3a24ee1bba%3a19620875%3a39040b5c%3af85f9819 Line: 1075"]
Does anyone know if what I am trying to do is even allowed?
If not - what's my alternative?
Thank you
Since your script doesn't have enclosing <script> tags, you need to use this form of RegisterStartupScript:
ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript, true);
You said your initial goal was:
The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.
Here's a way you can do that:
given:
<asp:ScriptManager runat="server" ID="scriptManager">
</asp:ScriptManager>
<script type="text/javascript">
function endRequestHandler(sender, args) {
var dataItems = args.get_dataItems();
for(var key in dataItems){
if(/^javascript:/.test(dataItems[key])){
eval(dataItems[key].substring("javascript:".length));
}
}
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
</script>
<asp:UpdatePanel runat="server" ID="pnl">
<ContentTemplate>
<asp:Button runat="server" ID="btnClick" Text="Click me!" OnClick="btnClick_Click" />
</ContentTemplate>
</asp:UpdatePanel>
You can create a click handler that does this:
protected void btnClick_Click(object sender, EventArgs e)
{
ScriptManager.GetCurrent(Page).RegisterDataItem(this, "javascript:alert('hello world!');");
}
What's happening is during the postback, the page request manager is sent a data item your code-behind. That data-item happens to be a javascript command. After the postback, the client side script manager's endRequest handler is checking for data items. Normally you'd want to see who those items are for, which is apparent by the key of the item (it's the client ID of the control that is the target of the data being sent). In your case, you could load this up with the javascript that you want to fire, tell yourself that it's a javascript because it's prepended, then dynamically evaluate the script.
So in this example, clicking the "Click Me!" button will generate a Hello World prompt whose script was actually created by the code-behind during the postback.
You'll have to be very cautious with this approach until you're comfy - I'd avoid references to "this"...
Happy coding.
B
Okay
The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.
Couldn't get that to work....
I got around this in the following way:
When the page loads, data is sent (AJAX) to the server. This processes the data and serialises the results updating a hidden text element, which goes back to the browser. Meanwhile, I have a JavaScript timer on the page that runs a JavaScript function that was generated when the page first loads. This function looks at the hidden text element. If that element has text (the result of the postback) then it shuts down the timer, deserialises the data and then works out how to update the page.