$ajax method does not execute for external javascript - javascript

very stupidly question I think, When I put this code inline then works, but when I put it on external js file it can not debug after the $ajax method.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: 'WebService/Common/Bank.asmx/GetBank',
data: "{}",
dataType: "json",
async: false,
success: function (data) {
debugger; ///debug point not reach here
$.each(data.d, function (key, value) {
$("#ddlLCMasterBank").append($("<option></option>").val(value.BankID1).html(value.BankName1));
});
},
error: function (result) {
alert("Error");
}
});

Related

Getting data from javascript function on to ASP.NET MVC Controller's Action Method

I have looked at many posts on SO to figure out my situation but with not much success. I'm trying to send data from a javascript function(DropdownChange()) to MVC controllers Action method as a parameter based on the dropdown value that is selected on the view. Here is my code:
In .cshtml
//code for dropdown
....followed by
//code for creating a new plan
<a href="#Url.Action("ActionMethod")">
<i class="sth" id="sth" Title="Create"></i>
</a>
In .JS file, function to get dropdown change value
function DropdownChange(){
var Value = parseInt($("#dropDownId").val());
$.ajax({
type: "POST",
url: '# Url.Action("ActionMethod", "Home")',
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: {data : JSON.Stringify(Value)},
success: function (data) {
alert('success');
},
error: error: function (result){
alert('error');
}
});
and Here is my Controller action method
[HttpPost]
public ActionResult ActionMethod(string Value)
{
// do something with Value
}
All I'm getting is an error alert message and a JS runtime error along with a null value for Value parameter. Can any one help me in this scenario.
Thanks in advance.
Try
$.ajax({
type: "POST",
url: '# Url.Action("ActionMethod", "Home")',
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: JSON.stringify({data: Value}),
success: function (data) {
alert('success');
},
error: error: function (result){
alert('error');
}
});
OR
$.ajax({
type: "POST",
url: '# Url.Action("ActionMethod", "Home")',
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: Value,
success: function (data) {
alert('success');
},
error: error: function (result){
alert('error');
}
});

IE10 always goes to error section of $.ajax call

I am trying to read a JSON file using jQuery AJAX. IE10 always goes to the error section. FF and Chrome are working fine. Here is my code:
$.ajax({
type: "GET",
url: "http://aaa.bbb.com/select?&json.wrf=callback",
// data: "{}",
crossDomain: true,
jsonpCallback: 'callback',
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
success: function (msg) {
// do something
},
error: function (msg) {
alert("error");
alert(msg);
}
});
Thanks in advance

AJAX post is empty on the server side (PHP)

I am making an AJAX request to a PHP controller, by using jQuery ajax, but when trying to get the posted data with PHP the $_POST is empty. Below is the actual function:
function GetSeriesForManufacturer(manuf) {
selectedmanufacturer = manuf;
//Make an AJax Call For Getting Series Of Manufacturer
var series = null;
$.ajax({
type: "POST",
url: url,
data: "{manufacturer:'" + selectedmanufacturer + "'}",
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
//remove loading gif
$(".loading").hide();
//Append Data
AppendSeries($.parseJSON(response.text), selectedmanufacturer);
//Custom Scrollbar Call
$('.MatchingSeries ul').mCustomScrollbar();
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }
});
}
Thanks in advance!
First, you don't need to stringify data. Just send object literal is ok.
data: {manufacturer: selectedmanufacturer},
Second, you don't need this line:
contentType: "application/json",
Let jQuery do the encoding for you:
$.ajax({
type: "POST",
url: url,
data: {
manufacturer: selectedmanufacturer
},
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
...
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }});

Not able to fetch data/Response on Success of Jquery.Ajax()

Hi people, I am craving myself from past 3 days and I just couldn't find the way to access json response seen on my browser
Here is my Ajax code :
$("[id*=btnModalPopup]").live("click", function () {
$("#tblCustomers tbody tr").remove();
$.ajax({
type: "POST",
url: "CallDataThroughJquery.aspx/GetLeadDetails",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Hi Json");
alert(data.Leadno); // **Says data.leadno is undefined**
response($.map(data.d, function (item) { // **here I am going some where wrong**
//**cannot catch response. Help!**
}))
},
failure: function (response) {
alert(response.d);
}
});
});
Please help me on this.. Thanks in Advance!
I see that your JSON is an array with an object. Try data[0].Leadno
$.ajax({
type: "POST",
url: "CallDataThroughJquery.aspx/GetLeadDetails",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Hi Json");
alert(data.d[0]['Leadno']); // **Says data.leadno is undefined**
response($.map(data.d, function (item) { // **here I am going some where wrong**
//**cannot catch response. Help!**
}))
},
failure: function (response) {
alert(response.d);
}
});
Try your alert with 'data.d[0]['Leadno']'.

animation not work in IE when jQuery ajax calling inside js function

I'm trying to show a div with gif animation inside when a button click via javascript call. But the problem is, it's working fine in firefox only. In IE and Chrome, the animation won't show up. I've tried debugging with alert("stop"); before and after the animation and it's indeed working, but after I removed the alert, it won't work anymore. Any suggestion please?
Here's the snippet for the TestPage.aspx:
<div id="animationDiv" style="display: none;">
<img src="loading.gif" />
</div>
...
<div>
<asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
var docWidth, docHeight;
function testButtonClick() {
var o_animationDiv = $("#animationDiv");
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
});
function testAjaxSuccess(data, status, xhr) {
// do something here
};
function testAjaxError(xhr, status, error) {
// do something here
};
o_animationDiv.hide();
return false;
};
$(document).ready(function () {
docWidth = $(document).width();
docHeight = $(document).height();
});
//-->
</script>
Here's the snippet for TestPage.aspx.cs:
// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
System.Threading.Thread.Sleep(5000); // 5 seconds
// or do something else here
// ie. if validation error, throw an exception
return string.Empty;
}
UPDATE 1: added some javascript function
Why don't you call the .hide() on the post success:
$.ajax({
type : "Post",
url : "TestPage.aspx/TestAjax",
cache : false,
data : "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// hide element when POST return as arrived,
// meaning the "5 seconds" period has ended!
o_animationDiv.hide();
}
});
You can read about callback function at the jQuery documentation!
jQuery ajax is asynchronous, so that won't wait for ajax result to hide again.
o_animationDiv.hide();
o_animationDiv.show();
This lines work in serial and you can't see if it's working properly. So you should wait for ajax result to hide it.Try this,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function() {
o_animationDiv.hide();
});
UPDATE:
Sorry I missed the point that you create a synchronous ajax request.
But there is a problem already. Most browsers lock itself when running a synchronous XHR. This also effects previous proccess sometimes.
Here is a similar question
Maybe if you use beforeSend, you can avoid this problem.
beforeSend
A pre-request callback function that can be used to modify the jqXHR
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent
Try this one,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend : function() {
o_animationDiv.show();
}
}).done(function() {
o_animationDiv.hide();
});
UPDATE-2:
If that doesn't work, try this one,
...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
setTimeout(function() {
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
}).done(function() {
o_animationDiv.hide();
});
}, 600);

Categories