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"
});
});
Related
I have to call to my spring controller through ajax but when the page is launching and when i click ADD it's not doing anything.
function myFunction(x,y){
var num1= x;
var num2= y;
$.ajax({
type: "POST",
url: operation.htm,
success: function(response){
//what i will do with the viewname here? how to display the page
$("#content").html(response);
},
error: function(e){
alert("Error"+e)
}
});
}
<html>
<head>
</head>
<body>
ADD
<div id="content"></div>
</body>
</html>
It is not showing anything when clicking
Because my actual example is way too big I made a very short example:
test1.php
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--jQuery-->
<body>
<p> What is the first letter of the alphabet?</p>
<button type="button" id="button">Tell me!</button>
<div id="div"></div>
<script>
$(document).ready(function(){
$('#button').click(function(){
$.ajax({
url: 'test2.php',
success: function() {
$('#div').html();
}
});
});
});
</script>
</body>
</html>
test2.php
<?php
echo "It's the letter A!";
?>
I want to this to print out "It's the letter A!" when I hit the button, which does not seem to work. Could somebody help end tell me why this doesn't work and how to fix it?
Thanks
1st : Should be enclosed by quotes $('#button')
2nd : Get the response in success function like this.
success: function(res) {
$('#div').html(res);
}
3rd : Set data type to text .
dataType:'text'
Update 1:
$(document).ready(function(){
$('#button').click(function(){
$.ajax({
url: 'test2.php',
dataType:'text',
success: function(res) {
$('#div').html(res);
}
});
});
});
Its because you haven't output the result you got from ajax.
<script>
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url: 'test2.php',
success: function(data) { //<---result from ajax
$('#div').html(data); //<----add result to div element
}
});
});
});
</script>
If your script is only a call of a page without GET/POST arguments, the simpliest way with jQuery is $.load() :
<script>
$(document).ready(function() {
$('#button').click(function() {
$.load("test2.php #div");
});
});
</script>
doc here : http://api.jquery.com/load/
I've made game in phaser (JS library for games) and i now want to make the scoretable with JS/PHP. What interest me is to pass a variable from js to php to update the database. I've read many topics and all the answers lead to AJAX and this example:
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
});
}
But it's not working. Im sure that the function can be called, cause when I put alert there, it works. But with AJAX happens nothing. The file is in the middle, cause it comes from game:
(HTML)
(...)
<body>
<center>
<div id="gra">
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="create.js"></script>
<script type="text/javascript" src="update.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</div>
</center>
</body>
(...)
Thanks for answers!
If you are using GET request you should make your request like that :
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php?mydata="+var_data,
type: "GET"
});
}
Or you can use POST request if you don't want to pass your parameters in URL.
You can put success and error function for testing your code like following
you can also fetched data that is returned from ajax call as returnedData
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
success:function(returnedData)
{
alert('success');
},
error:function()
{
alert('Error');
},
});
}
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.
I am using jQuery and Ajax.
My MainFile has the following code:
<html>
<head>
<script src="Myscript.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: 'ajax.php',
success: function(data){
$("#response").html(data);
}
});
});
</script>
<body>
<div id="response">
</div>
</body>
</html>
My ajax.php get the sample data
...
MyScript.js has the following
function display (text,corner)
{
}
..
I have Myscript.js. In this, I have a function called display(text,corner). I have to call this function after executing ajax.php.
How do I do it in jQuery for the above code?
Is it possible to decide the order of execution after ajax.php and make call for display(text,corner)?
You should invoke the display function in the callback function of the Ajax Request, like such:
$.ajax({
type:'POST',
url: 'ajax.php',
success: function(data){
display(data, /* your other parameter, corner */); //Invoking your data function
}
});
In the above case, data is the response that is received from ajax.php