I am working on an ajax-webmethod (using json) to save data in a database and select it when needed. Now whenever I call the webmethod, while the method is processed the whole page hangs and nothing can be done with the page.
I want to enable everything while the web method is called from ajax, for example showing a loading image until the web method finishes.
My code is below:
function getvalues(id, tab, pageNo) {
$.ajax({
type: "POST",
url: "default.aspx/LoadData",
data: "{'id':'" + id + "','tab':'" + tab + "','pageNo':'" + pageNo + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (msg.d.length > 0) {
var dvComment = document.getElementById("Comments");
dvComment.innerHTML += msg.d;
}
},
async: true,
error: function(xhr, status, error) {
// alert(xhr.statusText);
}
});
}
So now when it renders the html into the DIV the whole time the page hangs.
To show loading image you can use ajaxStart method like this:
$("#loading").ajaxStart(function(){
$(this).show();
});
Where #loading is:
<img id="loading" src="images/ajaxload.gif" alt="loading..." style="display:none"/>
To hide loading image:
$("#loading").ajaxComplete(function(){
$(this).hide();
});
Related
I cannot get a simple ajax example to work from an html page inside my visual studio project. It works fine from a webform (aspx):
...
webform1.aspx and form1.html
...
function ShowCurrentTime() {
alert("before json");
$.ajax({
type: "POST",
url: "json.aspx/GetCurrentTime",
data: "{name: bob }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
alert("after json");
}
function OnSuccess(response) {
alert(response.d);
}
...
webform1.aspx and form1.html
...
<input id="btnGetTime" type="button" value="Show Current Time"
onclick="ShowCurrentTime()" />
...
json.aspx
...
[WebMethod]
public static string GetCurrentTime(string name)
{
return "Hello " + name + Environment.NewLine + "The Current Time is: "
+ DateTime.Now.ToString();
}
If I put the code in webform1.aspx, it works fine. If I put it on form1.html, nothing comes back from json.aspx. I am running the project in debug mode from my machine using vs2013. Any help would be appreciated.
Update #1
I checked fiddler and the server is returning the following result (500):
{"Message":"Invalid JSON primitive: bob.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n at ...
Your json is malformed. Strings need to be in quotes. Put bob in quotes and you should be good. I'm unsure why it's working on the ASP.NET page though, unless it has the quotes there.
function ShowCurrentTime() {
alert("before json");
$.ajax({
type: "POST",
url: "json.aspx/GetCurrentTime",
data: "{name: \"bob\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
alert("after json");
}
function OnSuccess(response) {
alert(response.d);
}
I am making an Ajax request with data to a Page Method in my code behind in my ASP.NET Web Forms application. I have a Panel control in my aspx page but I cannot get the control from that Page Method with its ID. I can get it from the Page_Load event though. What can I do to get the Panel control from the page method or is it not possible or maybe an alternative?
<asp:Panel ID="pnlImages" runat="server"></asp:Panel>
<script type="text/javascript">
function GetProductId() {
$.ajax({
type: "POST",
url: "Default.aspx/GenerateQrCode",
data: "{'Products':" + JSON.stringify(data) + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
},
success: function (msg) {
alert('Success');
}
});
}
</script>
[WebMethod]
public static void GenerateQrCode(List<Product> Products)
{
foreach(var product in Products)
{
string qrCodeLocation = products.Where(pid=>pid.ProductId == product.ProductId).Select(s=>s.QrCode).FirstOrDefault().ToString();
Image image = new Image();
image.ID = product.ProductId.ToString();
image.ImageUrl = qrCodeLocation;
//Cannot get 'pnlImages' here
}
}
You won't be able to do that, WebMethod doesn't follow the same flow as normal page methods. It's not even a instance method but static.
You'll have to return the information on client and create the image there using javascript.
I am calling JSON method on selected index changed of the drop down list which is as follows
function StepImplementationScript(SelectedValue,UniqueField) {
debugger;
$.ajax({
type: "POST",
url: "DynamicForm.aspx/StepImplementationScript",
data: "{strSelectedValue: " + SelectedValue + ", strUniqueField: '" + UniqueField + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(response) {
alert("OnSuccess" + response.d);
if (msg) {
msg.close();
}
},
error: function(jqXHR, exception) {
alert(jqXHR.responseText);
},
failure: function(response) {
//alert("Onfailure" + response.d);
}
});
}
In this 'StepImplementationScript' method of server side when i try to find dynamically created control, the controls are not getting find and coming as null.
Selected change event i have written in Jquery through which i have called the JSON method.
This is the same page (DynamicForm.aspx) on which controls are created dynamically.
Why this is so ? and how should i resolve this issue ???
i want to when my page loading , loading with jquery (progress bar) and when finished, user can see page
Asp.Net with c#
In this case, you have to load everything via jquery ajax. And while data is getting loaded, you can show a loading div on the page and hide it when its done.
Sample jquery-ajax function for your reference.
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/json; Characterset=utf-8",
dataType: "json",
success: function (data) {
// hide loading div
},
error: function (request, status, error) {
alert("Exception Handling : \n" + request.responseText);
},
complete: function () {
//
}
});
I'm having quite a frustrating problem that I'm sure is TRIVIAL. Whenever I move this jQuery post inside the click function it sometimes works, but most of the time does not.
If I move it outside it works and posts and gives a response like it should everytime..
::boggled:: Someone please enlighten me.
$(document).ready(function() {
$('#Button1').click(function() {
//alert(document.getElementById('TextBox1').value);
$.ajax({
type: "POST",
url: "sudoku.asmx/getSolution",
data: "{'pid':'34367'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("succes " + msg.d);
},
error: function(msg) {
alert("fail " + msg.d);
}
});
});
});
Looks like you need to have your click event return false.
$("#Button1").click(function()
{
$.ajax(...);
return false;
});