I have a Kendo chart generated with asp.net core. Is there a way to have a loading indicator on the MVC chart? while waiting for a DataSource to read remote data.
Thank You.
If you use a generic loading gif in your project and if you bring the chart data with AJAX call, you can show your loading gif before the AJAX call and hide after the result of the AJAX call.
You can investitage a sample code below here:
function GetData(string id)
{
$('#loading').show();
$.ajax({
type: "GET",
url: "/Report/GetGraphicDefectList",
datatype: "Json",
data: {
recordId: id
},
success: function (data) {
if (data.length > 0) {
PushDataToChart();
$('#loading').hide();
event.preventDefault();
return false;
}
else{
$('#loading').hide();
event.preventDefault();
return false;
}
},
error: function () {
$('#loading').hide();
event.preventDefault();
return false;
}
});
};
}
Related
I want to show a button "Reload Game" after function success instead of this bootstrapDialog box
I need this button to fit over my <div class="tilting"></div> Instead of showing somewhere else on page
You need to use below code inside the success method,
document.getElementsByClassName("tilting")[0].innerHTML="<button type="button">Reload Game</button>";
If you are using jQuery Ajax try it below way,
function loadDoc() {
$.ajax({
type: 'POST',
url: 'APUC',
data: 'productName=' + productName,
dataType: 'html',
cache: false,
success: function (result) {
document.getElementsByClassName("tilting")[0].innerHTML="<button type="button">Reload Game</button>";
},
});
}
If you are using pure Ajax, try it like this:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementsByClassName("tilting")[0].innerHTML="<button type="button">Reload Game</button>";
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
In my MVC-project I have this code for rendering a partial-view:
Method:
public ActionResult ShowArtCollection()
{
var model = new ViewModel();
model.ArtWorks = db.ArtWorks.ToList();
return PartialView("_artcollection", model);
}
AJAX:
$("#btnArt").click(function () {
$.ajax({
url: '/Home/ShowArtCollection',
dataType: 'html',
success: function (data) {
$('#artworks').html(data);
}
});
});
I would like my #btnArt to be able to toggle the partial view. I mean that when the _artcollection is rendered by the click of the button, the next click should "unrender" the view. Any tips on how to achieve this?
you can put a flag and check if rendered next time unrender on click:
var rendered = false;
$("#btnArt").click(function () {
if (!rendered) {
$.ajax({
url: '/Home/ShowArtCollection',
dataType: 'html',
success: function (data) {
$('#artworks').html(data);
rendered = true;
}
});
} else {
$('#artworks').html("");
rendered = false;
}
});
this will do the trick for you.
Am calling web api method from view model and getting the 10 records per click. I want paging for kendo template.
this is my code:
// this is the web api method which gets 10 records per each call
function WebApiMethod(parameter)
{
var url = webApiUrl + 'api/{controller}/{methodname}';
var success = function(result)
{
}
CallWebApi(url, 'POST', success, parameter);
}
///this is the ajax call that am calling from webapimethod
function CallWebApi(url, type, successCallBack, data) {
jQuery.support.cors = true;
$.ajax({
cache: false,
type: type,
url: url,
data: JSON.stringify(data),
async: false,
contentType: 'application/json',
success: successCallBack,
error: function (xhr, err) {
}
});
}
///this is the kendo pager in which am biding the datasource
function KendoPager()
{
var pager = $("#pager").kendoPager({
dataSource: ViewModels["NameOfVM"].dataSource,
info: false,
change: function () {
ViewModels["NameOfVM"].pageIndex = pager.page();
}
}).data("kendoPager");
}
//this is the datasource am bind to kendopager
dataSource: new kendo.data.DataSource({
serverPaging:true,
pageSize:10,
})
Thanks in advance.
I have a mobile application with MVC3 and Jquerymobile. At form submission (with ajax function) I want to display loading icon (ajax-loader.png) while submit and redirect.
Thanks!
my ajax function:
$("#add").click(function () {
$.validator.unobtrusive.parse($('form')); //added
if ($("form").valid()) {
var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val());
$.ajax({
url: '#Url.Action("SaveLine", "AddLine")',
type: 'post',
data: { ids: IDs },
dataType: 'json',
traditional: true,
success: function (data) {
if (data.success == true) {
$("#ajaxPostMessage").html(data.Success);
$("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function () {
window.location.href = '#Url.Action("Index", "AddLine")';
}).delay(1800)
}
else {
$("#ajaxPostMessage").html(data.Error);
$("#ajaxPostMessage").addClass('ajaxMessage');
$("#ajaxPostMessage").show();
}
}
});
}
return false;
});
I would do something like this:
Ajax = {
Submit: function() {
Ajax.Loading();
//ajax stuff
//Ajax.Message('form complete, blah blah');
},
Loading: function() {
$('#ajax').html('ajax-loader.png');
},
Message: function(msg) [
$('#ajax').html(msg);
}
}
I cannot figure out how to merge the following separate pieces of code:
$(document).ready(function () {
$("#signupForm").validate();
});
and
$(document).ready(function () {
$("#btnSignup").click(function () {
$.ajax({
type: "POST",
dataType: 'json',
url: "/Newsletter/Signup",
data: $('#signupForm').serialize(),
success: function (response) {
if (response.success) {
$('#signupMessage').show(0);
}
else {
showValidationErrors(response.Data);
}
}
});
return false;
});
I need the first part to execute first, and if it validates the form successfully, then I need to exectute the second part.
I believe that you can use valid().
Pseudo code;
$(document).ready(function () {
$("#signupForm").validate();
$("#btnSignup").click(function () {
if ($("#signupForm").valid()) {
// ajax query
}
return false;
});
});
Does that work? I haven't checked it.
Here is a somewhat general way I use.
$('form').submit(function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
});
Lastly, you could abstract the logic into an object for a more OOP approach
var formHandler = {
onSubmit: function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
}
}
$('form').submit(formHandler.onSubmit);