jquery:ajax not firing in document getready - javascript

I have added jquery in head section and below code are in body section.
Problem is this isn't working.
Even alert is not showing. I am not getting any error in firebug.
I want to execute ajax on page load. I am not sure my approach is good.
Please advise. Below are the js code.
<script type="text/javascript">
$('document').ready(function(){
alert('Test');
$.ajax({
type: 'post',
url: 'profile_exec.php',
cache: false,
dataType: 'json',
data: uid,
beforeSend: function() {
$("#validation-errors").hide().empty();
},
success: function(data) {
var applied_counts = data.applied_count;
alert(applied_counts);
},
error: function(xhr, textStatus, thrownError) {
alert('Something went to wrong.Please Try again later...');
}
});
return false;
});
</script>

As you can see this should work fine:
$('document').ready(function(){
alert('ready');
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
}).then(function(data){
console.log(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
since even the alert is not showing, check your html code. Maybe swap your jQuery with the google CDN served jQuery.

Maybe you have conflict or noConflict somewhere else. Check this out: jQuery.noConflict
Try this code:
jQuery(document).ready(function(){alert('test')})

Related

Unable to use Ajax beforeSend and complete functions

I am trying to load the spinner image during ajax data loading hower none of my codes seem to work. Here is my code :
$.ajax({
url: '/Observer/GetInfoProfileByProfileId',
type: 'POST',
data: {
ProfileId: profileId,
},
beforeSend: function() {
console.log('spinner shown');
$('#spinner').css('display', 'block');
},
complete: function() {
console.log('spinner hidden');
$('#spinner').css('display', 'none');
},
success: function(response) {
//..do something with response
}
});
What is wrong with the codes above ? Appreciate any help
It is working, the issue i misspelled the name of my id in the html

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.

How to use Notify js?

I'm trying to give a success notification from my jQuery to the client...... this is how my script looks like.....
$('#submit').click(function () {
$.ajax({
type: "POST",
url: "../Home/Index",
data: $('#form').serialize(),
success: function(data){
$('#message').notify("Access Granted");
},
error:function(){
alert("Error!!!!");
}
});
return false;
});
But the notify part wont work in this..... it wont even give me an error... nothing happens.........
I have included the jQuery and Notifyjs scripts as well in my page....

Cannot use alert() in a jQuery method

When using jQuery to make an AJAX call, for the time being I want to just want to have a popup box (using alert()) showing me the response text.
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
var $button = $(this);
$.ajax({ url: 'getdata.php',
data: // <parameters>
type: 'get',
dataType: 'json',
success: function(output) {
// do something
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
The response text prints out fine. However, the alert() dialog is nowhere to be found.
Please help this poor noob.
Here is a jsfiddle with something very close to your code, working, the alert box pops up.
http://jsfiddle.net/pN869/
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
console.log("clicked");
var $button = $(this);
$.ajax({ url: 'getdata.php',
type: 'get',
dataType: 'json',
success: function(output) {
console.log("success");
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
Clean the browser cache. There will likely be branded the option of not showing more alert.
Testing in different browsers.
I hope that is helpful.

Issue with AJAX and jQuery

<html>
<head>
<title>Ajax</title>
<script type="text/JavaScript" src="jquery-1.5.1.min.js"></script>
<script type="text/JavaScript">
function register()
{
$.ajax({
type: "GET",
url: "http://exampleurl.com/api/index.php",
data: "action=login_user&app_key=MyAPIKey&username=Bob&password=HisPassword",
dataType: "text",
success: function(data)
{
alert(data);
}
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
}
});
}
</script>
</head>
<body>
<form>
<input type="button" value="Test" onclick="register()"/>
</form>
</body>
</html>
The URL returns a string (plain-text) when used in the address bar. Why is the above code not working? When I click on the button, I get no alert. Basically, nothing happens.
Browsers tried: IE 8 and Chrome.
Thank you for your time.
There's probably an exception being thrown in the $.ajax call.
Consider
ensuring your URI is well formed by taking the query parameters out of the URL and supplying a data object instead:
data: {
action: login_user,
app_key: ....
etc
}
adding an error handler too
Is example.com the URL of your local site? If not, your above example violates Same Origin Policy. You can circumvent this by doing the call through a proxy on the server side.
Try to add
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
http://api.jquery.com/jQuery.ajax/
Have you tried to separate the data ?
$.ajax({
type: "GET",
url: "http://exampleurl.com/api/index.php",
data: "action=login_user&app_key=MyAPIKey&username=Bob&password=BobPassword",
dataType: "text",
success: function(data) {
alert(data);
}
});
Do you have access over the backend url?
You might need to declare the contentType. You might also need to do a post and set the data.
data: "{ 'action': 'login_user', 'app_key': 'MyAppKey', etc. }"

Categories