Develop Reference

How do I update an element on my page with a callback?

I have a element on my page that looks like this
<td><span class="badge badge-danger">Stopped</span></td>
and I want to update it based on things that are going on in the code.
Take this example.. I have a button and that element, and when I click that button I want to start downloading a list of names. Once it's started I want the text inside that span to say "Started" rather than "Stopped" and than once the code finished running aka the list of names has been downloaded, I want it to say "Done" rather than "Started"
And I've been reading back and forth about how to do this and it seems as if I need to implement ajax somehow and I'm not sure how to.
I guess the button would invoke a asp-action="StartDownload" and then it would look something like this..
public ActionResult StartDownload()
{
StartDownload();
return View("WhereSpanIs");
}
private void StartDownload()
{
//Set span text to "Started" some how
//Finished download
//Set span text to "Done" some how
}

For manipulating HTML in the browser when requested by a controller method as in your approach, you would need something like SignalR to enable communication between the server (i.e. controller) and client (i.e. browser).
As you already found out, it's easier using Ajax to update the text in this case (using JavaScript/JQuery). Like in the following example, you could set the text when the button has been clicked, and when the request is complete:
In the view:
<script type="text/javascript">
// call this method on button click
function startDownload() {
// loading, TODO: update the text)
$.ajax({
type: "GET",
url: '#Url.Action("StartDownload", "Home")',
contentType: "application/json; charset=utf-8",
success: function(data) {/* done, TODO: update the text */ },
error: function() { /* error, TODO: update the text }
});
}
</script>
In the (Home) controller:
public ActionResult StartDownload()
{
// TODO: perform the download
return Json(new {status = "OK"});
}
JSON is used to allow the result to be interpretable in JavaScript, although it is not used in this example.
See the Shopping Cart Tutorial for further information.

Click event not posting to handler

I'm playing with JQuery, and I'm trying to fire a Click event on a button, to run off to a handler in my asp.net application, and getting some strange results.
I'll post the code and then explain whats happening :-
$(function () {
$("[id$='btnClaimValidate']").click(callSwapClaimHandler);
function callSwapClaimHandler() {
$.ajax({
type: 'POST',
url: "/handlers/investor-tickets/claimswapvalidator.ashx",
data: {
investorId: $("[id$='hdnInvestor']").val(),
investorTicketId: $("[id$='hdnInvestorTicket']").val(),
originalClaimId: $("[id$='hdnInvestorTicketClaimId']").val(),
newClaimId: $("[id$='txtClaim']").val()
},
dataType: "html",
error: function () {
alert("failure");
},
success:
function (data) {
var $newdiv = data;
$("[id$='divMessageData']").append($newdiv);
}
});
}
});
With the code above, the handler is never called. The event is 100% being fired on click. I've tested by removing the ajax post function, and replaced it with a simple alert("Hello); command to be sure.
What is strange is that if i register the click event to actually execute on DOM load by doing this :-
$("[id$='btnClaimValidate']").click(callSwapClaimHandler());
The handler is fired as the page loads and then works as expected.
By taking off the parenthesis, so that it is only fired on click, the post never actually executes.
I've debugged the browser session, and the function runs, but it never gets to the handler, and no content is returned.
Can anyone explain what's going wrong?

Your comment to #Scarface Ron is the clue. Your page is refreshing as the default button behavior was not stopped. Also just use the function inline in the handler:
$(function () {
$("[id$='btnClaimValidate']").click(function (e) {
// Stop the button actioning!
e.preventDefault();
$.ajax({
type: 'POST',
url: "/handlers/investor-tickets/claimswapvalidator.ashx",
data: {
investorId: $("[id$='hdnInvestor']").val(),
investorTicketId: $("[id$='hdnInvestorTicket']").val(),
originalClaimId: $("[id$='hdnInvestorTicketClaimId']").val(),
newClaimId: $("[id$='txtClaim']").val()
},
dataType: "html",
error: function () {
alert("failure");
},
success:
function (data) {
var $newdiv = data;
$("[id$='divMessageData']").append($newdiv);
}
});
});
});
apologies if I got the closing braces wrong here

The simple explanation here is that your button selector - [id$='btnClaimValidate'] - isn't matching anything at the time it is executed. Hard to say why (you're generating that part of the DOM after the page is loaded? You have a typo?) but you can test this easily enough:
$(function()
{
alert($("[id$='btnClaimValidate']").length);
});
If the value is 0, then this is your problem and you'll have a specific area to investigate further.
Alternately, use your browser's DOM inspector to verify that an event has actually been attached to the button after the load has completed.
If the problem is simply that the button is added to the DOM after the page is loaded, then you might want to consider using a delegated event instead of attaching the handler directly to the button. For instance:
$("document").on("click", "[id$='btnClaimValidate']", callSwapClaimHandler);
This will attach the event to the document (which exists) but mandate that the handler is only called when the event has bubbled up from the button (which may not exist yet when the handler is bound, but probably will later).

How to dynamically insert a <script> tag via jQuery in a page from other page dynamically

I made a dashboard for my e-commerce website from where there is an option to selected page
after selecting a particular page if i press save button there i want to run these codes on selected page dynamically by which i can use scriptAnalytics.js file only for the pages i want.
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src","scriptAnalytics.js")
document.getElementsByTagName("head")[0].appendChild(fileref)

You can use jQuery Ajax function to load and run your script:
$.ajax({
url: url,
dataType: "script",
success: successFunction()
});
or try to use shorthand method jQuery.getScript()

You can load js dynamically using jQuery.getScript() method on the page you want.

I have issue regarding ascx user control method calling by jquery

I have user control which is included in most of my aspx page. This user control shows huge data from database. Now I have decided to fetch that by jquery. I am very much familiar with jquery and how to call server side method by jquery. My problem is that I can not specify ascx file in jquery ajax post method. Like
function loadMore() {
$.ajax({
type: "POST",
url: "Left.ascx/LoadData",
data: "{PageIndex:1}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
I can not call ascx code behind method by jquery because ASCX is not directly served via URL.
I cannot write even C# code for loading & populating ascx from aspx server side method dynamically because it has been used in many aspx. So now I am in problem. No easy & good idea is coming to my mind...so I am stuck. Please show me the way to achieve it. Thanks

You cannot call the ascx method directly. What you have to do is call an aspx page method and from that call the user control method. This sounded familiar so I checked. I have an answer to a similar question here:
Jquery .ajax async postback on C# UserControl
which shows the way this can be done.

It looks to me like you want to get HTML back from your response? Possibly so you can just set the contents of a div instead of having to build the html on the client. If that is the case, then make a new aspx page that contains your ascx and have the ascx databind in the page load of the aspx.

JavaScript code to refresh page and or telerik grid

I need some kind of code which will refresh the page every 5min and if not the page then just the Telerik grid displayed on it since that's all that's rly needed.
Only other thing would be if it was after 5min of no activity on the page if possible but it's not core feature.

One possibility is to use a meta refresh tag:
<meta http-equiv="refresh" content="300" />
Another possibility is to use the window.setInterval method to send periodic AJAX requests to a controller action and update the DOM:
window.setInterval(function() {
// Send an AJAX request to a controller action which will
// return a partial with the grid and update the DOM
$.ajax({
url: '/grid',
success: function(result) {
$('#someGridContainer').html(result);
}
});
}, 300000);
And to implement the idle functionality you could use the jquery idle plugin.

keep it simple, call refreshGrid() function when you need to refresh grid.
function refreshGrid() {
if ($(".t-grid .t-refresh").exists()) {
$(".t-grid .t-refresh").trigger('click');
}
}
/*return true if does selected element exist.*/
(function ($) {
$.fn.exists = function () { return jQuery(this).length > 0; }
})(jQuery);

setTimeout(function(){
window.location.reload();
},300000);

If your grid is set up for ajax refreshes, then you can use something like
<script type="text/javascript">
$(function() {
setInterval(function() {
$('#GridName').data('tGrid').ajaxRequest();
}, 300000);
});
</script>

For Server Bindings Telerik Grid Just need to do the following Thing..... Just use and cheers
After any event you can call this
var href = $('.t-refresh').attr('href');
window.location.href = href;

If you are using Ajax or Webservice binding on the Telerik Grid, you can call the rebind() method on the grid object. That will force it to call the Select method of the binding again to get the latest data.
If you combine the rebind() call with Darin's answer of using the SetInterval method, it should give you what you are after.