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 () {
//
}
});
Related
I'm making the following ajax request:
$.ajax({
type: 'POST',
url: 'AJAX.aspx/TestPageLoad',
data: JSON.stringify({}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (x, e) {
alert( x.responseText);
}
});
I put a break point in my AJAX.aspx page but it does not get hit. Is it the way it supposed to be? According to this article it does.
I put a breakpoint in the Page_Load of my AJAX.aspx page but it does
not get hit
It's because the JavaScript executes on DOM Ready.
Doesn't Page_Load event get fired when making ajax calls?
No. It executes after Page life cycle and on DOM ready
For that you have to set the debugger in Ajax call like below
$(document).ready(function () {
debugger; //A kind of Break Point
$.ajax({
type: 'POST',
url: 'AJAX.aspx/TestPageLoad',
data: JSON.stringify({}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (x, e) {
alert(x.responseText);
}
});
});
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've googled many similar situations, but none of them could solve my problem. Please take a look at my code:
JavaScript:
$.ajax({
type: 'POST',
url: 'alarmInfo.aspx',
data: {request:'BasicGpaInfo'},
dataType: "json",
success: function (data) {
alert(data);
},
error: function () {
alert("Error in loading alarm information!");
}
});
ASP.NET:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Form["request"] == "BasicGpaInfo")
{
Response.Write(BasicGpaInfo());
}
else
{
Response.Write("Nothing");
}
}
This always returns "Nothing" and break point tells that Request.Form is null. And I have tried with GET and Request.QueryString which gives the same situation.
I guess there's something wrong with data in ajax function and I've tried with the following things that won't help:
data: $.param({request:'BasicGpaInfo'})
data: "{request:'BasicGpaInfo'}"
data: {request:'BasicGpaInfo'}
It won't work on all Web Browsers.
Please give some advice. Thanks!
I tested your code and it runs fine. However it always returns "Error in loading alarm information!" because you are not returning Json from the server.
Javascript is fine, once you return json, it will go into success.
You are returning the whole page, and your ajax method is getting the whole html instead of Json from BasicGpaInfo()
try putting a breakpoint in alert, and you will see all the data come inside data
error: function (data) {
alert("Error in loading alarm information!");
}
alternatively try
error: function (data) {
alert(data);
}
Here is the full code
$.ajax({
type: 'POST',
url: 'Default.aspx/BasicGpaInfoWebMethod',
data: { request: 'BasicGpaInfo' },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data);
},
error: function (data) {
alert("Error in loading alarm information!");
//alert(data); // uncomment to see the whole response
}
});
and your webmethod will be :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string BasicGpaInfoWebMethod(string request)
{
return request;
}
Try this JSON.stringify before post. For using JSON.stringify in IE<=7 include json2.js file from json.org
$.ajax({
type: 'POST',
url: 'alarmInfo.aspx',
data: JSON.stringify({ request: 'BasicGpaInfo'}),
dataType: "json",
success: function (data) {
alert(data);
},
error: function () {
alert("Error in loading alarm information!");
}
});
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();
});
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;
});