Trying to send a simple Jquery GET request, which doesn't work.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clk").click(function() {
$.get('http://www.abelski.com/courses/ajax/emailajaxservice.php', { email: 'mymail#example.com'}, function() {
alert("Sent");
});
});
});
</script>
</head>
<body>
<input type="text" id="email" />
<input type="button" id="clk" />
<span id="res"></span>
</body>
</html>
http://www.abelski.com/courses/ajax/emailajaxservice.php is on.
I don't get any alert. what is the problem in my code?
Why don't you try this one:
$.ajax({
type: "GET",
url: RequestURL,
dataType: "html",
success: function(htm) {
alert(htm);
}
}
});
In your code snippet, the function
function() { alert("Sent"); }
will be called when the request succeeds. If it fails for any reason (cross-domain requests are forbidden, answer returns with a non OK code, ...) nothing will be executed.
You can add a .fail() listener to see if an error was triggered :
$.get( ... ).fail(function(){ alert("Error"); });
Check your web console to have more detail on the failure.
Related
I'm calling a simple JS script to load ajax functions.... and it doesn't work... I debugged using document.write to see where the problem lied and I can see my TEST 1 but not my TEST 2...
MY HTML
<html>
<title>Ajax Infinite scroll using jQuery - InfoTuts</title>
<head>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img id='loading' src='img/loading.gif'>
<div class="masonry" >
<div id="demoajax" cellspacing="0"></div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
MY JavaScript
var ajax_arry=[];
var ajax_index =0;
var sctp = 100;
$(function()
{
$('#loading').show();
/* document.write("TEST1"); */
$.ajax(
{
/* document.write("TEST2"); */
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response)
{
$('#loading').hide();
$('#demoajax').html(response);
}
});
/* MORE CODE BELOW */
my document.write TEST 1 prints on screen, but my TEST 2 can't print..
It seems it's not going in the $ajax( section of the code
Do not use document.write to debug. Browsers have a console. Use console.log and you can set break points.
And you are creating an error putting document.write in the middle of an object!!! That is a syntax error.
If you are trying to figure out why the Ajax call is not loading, add an error handler and see if it is getting called.
$('#loading').show();
console.log("loading shown");
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=1",
cache: false,
success: function(response) {
console.log("success", response);
$('#loading').hide();
$('#demoajax').html(response);
},
error: function() {
console.log("error", arguments);
}
});
You have missed to close your function;
put this }); after your ajax call.
if you got "500 (Internal Server Error)", you may have to change the Permissions of that PHP file.
try by putting document.write("TEST2"); inside success function.
Put $.ajax on document.ready function
$(document).ready(function(){
$.ajax({
/* document.write("TEST2"); */
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response){
$('#loading').hide();
$('#demoajax').html(response);
}
});
});
I was reading several posts about this, and make some changes to my code but no luck.
Can anyone look into this, to see what's going on here? Or perhaps another way to do what I need (retrieve city, state by a zip code using ziptastic)
The code works fine in Chrome (http://jsfiddle.net/7VtHc/117/)
html
<asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>
script
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='txtZipCode']").keyup(function () {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.getziptastic.com/v2/US/" + el.val(),
cache: false,
dataType: "json",
type: "GET",
success: function (result, success) {
$("input[id$='txtCity']").val(result.city);
$("input[id$='txtState']").val(result.state);
}
});
}
});
});
</script>
Thanks,
Actual issue in your code is showing "No Transport" error in ajax error call back. add this line jQuery.support.cors = true; would solve your problem
Try this below code in IE and other browser.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
jQuery.support.cors = true;
$("#zip").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.getziptastic.com/v2/US/" + el.val(),
cache: false,
dataType: "json",
type: "GET",
success: function(result, success) {
$("#city").val(result.city);
$("#state").val(result.state);
}
});
}
});
});
</script>
</head>
<body>
<p>Zip Code: <input type="text" id="zip" /></p>
<p>City: <input type="text" id="city" /></p>
<p>State: <input type="text" id="state" /></p>
</body>
</html>
Check out these links:
CORS
No Transport error
The issue is IE8 doesn't support the Cross Origin Resource Sharing (CORS) XHR, so you can't do a cross domain ajax call with the native XHR or jQuery's $.ajax.
For IE8, Microsoft decided to come up with their own cross domain XHR instead of using the CORS XHR, which is called XDomainRequest, so you'll have to implement that to support IE8 users. An example usage can be found in this answer.
Alternatively, you could proxy the cross domain request through your local server side, making the external request a server to server situation, which won't be subject to Same Origin Policy.
Your request look fine but if it's a IE8 then you probably have a problem with header of file that you are loading, it have to be application/json
PHP example
header('Content-Type: application/json');
Very simple, add the following line on your page:
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
I have an ajax call which grabs data from a php file that connects to an api. I have a success handler that receives the data from the ajax call and then loads a function from the API library. The issue is, I want the user to click a button and then run the function inside of the success call (using the same data from the ajax call earlier).
I believe my ajax call needs to stay inside the window.onload = function(), it doesn't work if I try to run the ajax call when the user clicks the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
function hello(){
alert("hi");
}
function successHandler(data){
screenleap.startSharing('DEFAULT', data, {
nativeDownloadStarting: hello
});
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
Please let me know how I can do this, any help would be greatly appreciated.
Update:
so I have tried adjusting my code, but for some reason nothing happens anymore when I click the button. It doesn't even shoot out my console.log confirming I had even clicked the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
var dataFromServer;
function hello(){
alert("hi");
}
function successHandler(data){
dataFromServer = data;
console.log("data from server: ")
console.log(dataFromServer);
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
$("#submit").click(function(){
console.log('clicked submit');
if(dataFromServer)
{
console.log(datafromserver);
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
all the best,
-- 24x7
You can store data to some global variable and on button click use same variable.
var dataFromServer;
function successHandler(data){
dataFromServer = data;
}
jQuery("#submit").click(function(){
if(dataFromServer)
{
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
Update:
Instead of window.onload use jquery onload function to populate data.
http://jsfiddle.net/ZGggK/
$(function() {
$.ajax({
type: "GET",
url: "https://api.github.com/users/mralexgray",
data: '',
success: successHandler,
dataType: "json"
});
});
I'm sending form data to a PHP file via AJAX, using jquery I hoped I could send the data easily seeing as it's only one text box etc. On submit click event the form data should be serialised and sent to submit.php, then I should get an alert from the php file with the response. Why doesn't it work?
Thanks.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$('#submit').click(function (e) {
e.preventDefault();
$.ajax({type:'POST', url: 'submit.php', data:$('#myform').serialize(), success:
function(response) {
alert(response);
}});
});
</script>
Then the HTML:
<form id="myform" >
<input type="text" name="content" value="button should be on same line" /><input
type="submit" class="button" value="Submit" id="submit" />
</form>
You haven't initalized the DOM ?
$(document).ready(function(){
// do your work here
});
EDIT :
Try this:
$("#submit").live("click", function (e) {
e.preventDefault();
$.ajax({type:'POST', url: 'submit.php', data:$('#myform').serialize(), success:
function(response) {
alert(response);
}});
});
});
First, try to determine that the form is submitting correctly. try submitting to
url: '/submit.php'
instead, as that may not have been the correct path.
Second, try sending the value unserialized and see if you get a correct.
I've got a form on the html page which gets submitted by javascript in some cases. The problem is that browser window change its location to the action URL specified for this form. Is there any way to prevent it of working this way?
Use a javascript library to submit the form via Ajax (xhr) or submit to iframe
Full Jquery example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#yourForm').submit(captureSubmit)
})
function captureSubmit(event) {
var frm = $(event.originalTarget);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function(results) {
// do stuff
alert(results);
},
error: function(result) {
// handle the error
alert(result.status + ' ' + result.statusText);
}
});
return false;
}
</script>
<form id="yourForm" action="foo.html" method="POST">
Name: <input type="text" name="name">
<button type="submit">Submit</button>
</form>
[EDIT] made example more complete.
Post it with Ajax
You can either:
Submit with AJAX
Submit to an iframe