Get backend response to ajax dialogbox fails - javascript

I have implemented ajax function inside java script function as follows
<script type="text/javascript">
function subscriptionLookup() {
$.ajax({
url:'deleteApplication?appId=9',
data: json,
type: "POST",
success: function (response) {
showMessageDialogBox(response);
},
error: function(response) {
showMessageDialogBox(response);
}
});
}
</script>
Then I call this javascript function as follows
<a href="javascript:subscriptionLookup();" data-toggle="modal" data-target="#confirm-delete" href="#" >[Delete]</a>
But it gives nothing for me. I found , this call comes inside javascript function but not going into ajax function.
What is the problem with this

Well, firstly, there is a problem with your code itself. You wrote data: json
In this place, you are supposed to pass information that you want to send to your server. If you want to send the word 'json', you might want to use quotes (just like you did with URL).
If you want to specify the data type that you want to recieve from the server, then you should remove this and instead add dataType: 'json' .
I hope the answer will be helpful.

You have few issue in your code. Check the modifications made.
<a data-toggle="modal" data-target="#confirm-delete" href="#" id='xxxxy' >[Delete]</a>
<script type="text/javascript">
$(document).ready(function(){
$('#xxxxy').on('click',function(){
subscriptionLookup();
});
function subscriptionLookup() {
$.ajax({
url:'deleteApplication?appId=9',
dataType: 'json',
type: "POST",
success: function (response) {
showMessageDialogBox(response);
},
error: function(response) {
showMessageDialogBox(response);
}
});
}
});
</script>

Related

Ajax request not working when a function is added to the success option

I am having trouble getting an ajax GET request (or any request for that matter) to retrieve the response. I am simply trying to return the response in an alert event:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=XXX&scope=crmapi&criteria=(((Potential Email:test#email.com))&selectColumns=Potentials(Potential Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: function(data) {
alert(data);
}
});
});
});
</script>
I can get this and other similar post requests to work by taking away the function in the success option and editing the code like this:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=XXXX&scope=crmapi&criteria=(((Potential Email:test#email.com))&selectColumns=Potentials(Potential Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: alert('success')
});
});
});
</script>
Why is this? And more importantly, how can I retrieve the response data and transfer it to an alert message? Any help is appreciated!
** Update:
Upon reading the first two users' responses on this question, this is what I have:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'GET',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=418431ea64141079860d96c85ee41916&scope=crmapi&criteria=(((Potential%20Email:test#email.com))&selectColumns=Potentials(Potential%20Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: function(data) {
alert(JSON.stringify(data));
},
error: function(data) {
alert(JSON.stringify(data));
}
});
});
});
</script>
I am able to get the error response, so I can confirm there is some kind of error. I also want to point out that I am making the request from a different domain (not crm.zoho.com) so should I be using jsonp? If so, how would I alter the code?
When you have
success: alert('success')
you do NOT have a successful request, you are actually executing this function at the start of AJAX method. The success parameter requires a pointer to a function, and when you use alert('success') you are executing a function instead of providing a pointer to it.
First thing that you need to try is to update type to GET instead of Get:
$.ajax ({
type: 'GET',
Try using the .done() function as follows:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'yourUrl',
dataType: 'json',
}
}).done(function(result) {alert(data);}) //try adding:
.error(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);})
});
});
the error function will also give you some information in your console as to the status of your request.

Calling a PHP script using ajax

hi i am calling a php file using ajax after an interval of time. In my php file i simply echo a text line. But it didnt show me any output after time interval..
here is my ajax code form where i am calling my php file..
<script>
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: {"token": "your_token"}, });
}, 5000);
});
</script>
code inside the process.php file
<?php
echo "hello testing";
?>
You aren't handling the response from php script. You need to get it by success parameter in ajax. Try this:
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: 'x=1&y=2', // data here! use query strings like this or;
// data: { x: '1', y: '2' }
success: function(response) { alert(response); } // alert the response text
// returns 'hello testing'
error: function(){ alert('error while posting data'); }
});
}, 5000);
});
User the success and error function of ajax. for eg
$.ajax ({
url: 'process.php',
type:'post'
data:data1,
success: function (response) {
//alert response here you will get the value hello testing
alert (response);
},
error {
alert ('error');
}
});
You should modify your code to use the response.
<script>
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: {"token": "your_token"},
success:function(str){
$("#YOUR_ELEMENT").html(str);
}
});
}, 5000);
});
Just change your JQuery script to show the response after successful request it can be done with done() or success functions.
<script>
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: { token: "your_token"}}).done(function(msg){
$("#response").append(msg);
};
}, 5000);
});
This will append reponses to #response every 5s when ajax request is successful.
the success block, which handles the data returned from remote script is present in your code. you may need to add something like this .
JS CODE:
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: {"token": "your_token"},
}).done(function( data) {
//data received from remote script
});
}, 5000);
});
Happy Coding :)
Timeout is not the culprit here.
We need to make sure that you have a server where process.php resides and its running fine.
Make sure the path for the file process.php is right. You can use browser's developer tools. When the request is made you will see a new entry under "Network" tab of the developer tools. Exploring it you can get the url at which it the file should be available.
I would suggest using Google Chrome's "postman" extension to test the ajax call before implementing it in your code.
Also you need to have a callback that will run in case of request success or failure. Once you get the string in success response, you can do whatever you intend to do with it.
<script>
$(document).ready(function() {
setTimeout(function() {
$.ajax({
url: 'process.php',
type: 'post',
data: {"token": "your_token"} //removed the comma from last argument
}).done(function(serverResponse) {
alert( "Success: " + serverResponse ); //Will show success alert with concatenated text string if the request is successful
}).fail(function(serverResponse) {
alert( "Error: " + serverResponse.message); //Will show error alert with concatenated error message
});
}, 5000);
});
</script>
the php page sends the string "hello testing", and you have to manage it.
take a look here for an example: click me

Ajax call to a Webservice Aways Fails

I am trying to make a simple web API call inside an HTML page using ajax (on button click). but that call always fail. Issue is only with ajax (on button click) call for that API. loading in combobox works perfectly fine. So, I hope it should not be a cross domain issue.
Following is the code where it causing trouble:
<body>
<a class="offline-button" href="../index.html">Back</a>
<input id="btnSayHello" type="button" value="Get Value From Ajax" /><br />
<div id="example" class="k-content">
<div class="demo-section">
<h2>Products</h2>
<input id="products" style="width: 250px" />
</div>
<script>
$(document).ready(function() {
$("#products").kendoDropDownList({
//dataTextField: "Name",
//dataValueField: "Name",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products",
}
}
}
});
});
$(function () {
$("#btnSayHello").click(function () {
$.ajax({
type: "GET",
contentType: "jsonp",
//contentType: "application/json; charset=utf-8",
dataTypes: "jsonp",
processdata: true,
data: {},
url: "http://demos.kendoui.com/service/Products",
success: function (data) {
alert("Success");
},
error: function (result) {
window.alert(result.responseText);
}
});
})
});
</script>
For button click's Ajax call's responseText it returns "undefined"
Same URL call for Document ready function works fine. and populate that ComboBox.
SOURCE CODE can be found at this link.
Thanks everyone in advance for your help!
you can see this,i think it solves your issue,try to send some duplicate value as queryparam by using callback.
$(document).ready(function(){
$("#btnSayHello").click(function () {
$.ajax({
type: "GET",
url: "http://demos.kendoui.com/service/Products?callback=123",
dataType: "jsonp",
success: function (data) {
alert("Success"+JSON.stringify(data));
},
error: function (result) {
alert("error:"+result.responseText);
}
});
});
});
http://jsfiddle.net/nPeaV/7370/
Okay I got my answer and the problem is because of "dataTypes" keyword. I changed it to "dataType" and it worked.
Well, I am new to web technologies and initially I tried to develop the same code in aspx page where "dataTypes" works just fine. Therefore, I tried to use same code base in a normal HTML file and it didn't work.
So, the conclusion is there might be some different treatment for "dataTypes" in aspx pages as compare to HTML5.

Sending ASP.NET Model through AJAX

I'm trying to send part of a model through an ajax call, but doing it simply like my code below, doesn't work. How could I pass this object along?
$.ajax({
url: "/Controller/Action",
type: "GET",
data: #Model.Company,
success: function (result) {
$('#myDiv').html(data);
}
});
This is what my JS puts outs:
MyProj.Domain.Entities.Company
This is my error:
Uncaught ReferenceError: MyProj is not defined
Your syntax would work fine for a primitive variable, but you should serialize your object to Json before sending. And also make sure that script stays in cshtml or aspx page, else '#Html' helper will not work.
$.ajax({
url: "/Controller/Action",
type: "GET",
data: #Html.Raw(Json.Encode(Model.Company)),
success: function (result) {
$('#myDiv').html(data);
}
});

unable to get json response coming from REST web service in html using jQuery

I have a JSON response coming from REST web service and want to bind that data to html using jQuery. Looks like its not even hitting web service url which I have provided in my jquery.
Url is working fine which gives me JSON data in browser but jQuery I am using unable to get any content from this. I am pasting my code here, plz let me know if some one can help.
While debugging script its directly going on error section in ajax call.
<script type="text/javascript">
$(document).ready(function () {
GetData();
});
function GetData() {
// alert(textblock.value);
$.ajax({
type: "GET",
url: "http://localhost:8092/api/Employees",
data: "{'employeeId'= '" + 1234 + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var results = $.parseJSON(msg.d);
alert(msg);
alert(results);
},
error: function (result) {
alert('here');
var tt = result.text;
alert(tt);
}
});
}
</script>
finally i am able to get data now.
I added below properties in $.ajax:
processData: false,
async: false,

Categories