Ajax callback dunce
I am having a hard time figuring out how to implement the callback function. I searched a lot and found a lot of stuff on this topic, but nothing that I was able to implement in my jQuery code.
Can someone please edit my code here so that I can copy it back to my test page to see exactly what I need to do?
What I need
First, declare a variable and give it a value. Second Execute my Ajax call and reference this variable. Sounds simple, but I don't understand. Here is my sample code, if you would be so kind as to help me.
var myName = 'Ann';
$.ajax(
{
type: "post",
url: "URL",
cache: false,
dataType: "json",
data:
{
xxxxxx: xxxxxxxxx
},
success: function(objResponse)
{
//How can I do this????
alert(myName);
}
});
source to share
looks like it should work? works for me every day.
var myName = 'lol';
$.ajax({
type: "post",
url: "URL",
cache: false,
dataType: "json",
data: {
xxxxxx: xxxxxxxxx
},
success: function(objResponse)
{
//How can I do this????
alert(myName);
},
error: function (xhr, err) { alert("Error: \n\nreadyState: " + xhr.readyState + "\nstatus: " + xhr.status + "\nresponseText: " + xhr.responseText, 'nosave'); }
});
If the warning fails, you should add an error to it as I did above.
you should look into developing with firebug, you should be able to see all the ajax calls you made.
source to share
This should help you understand it a little better;) Your ajaxprocess.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px}
.content{
display:block;
width:300px;
height:300px;
border:1px solid #000000;
margin: 0 auto;
margin-top:30px;
}
.button{
margin:0 auto;
width:100px;
hight:100px;
display:block;
}
.strong{
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var myName = 'John';
var myImage = $('<img src = "path to your image"/>');
$('.button').click(function(){
$.ajax({
url:'load.html',
success:function(data){
$('.content').html(data);
//$(".images").append(myImage);//Uncomment this if you want to insert Your image...
$('.strong').fadeIn(2000,function(){
alert(data);//We shall alert our data after the DATA
alert(myName);//is Faded IN...
});
},error:function (xhr){
var msg ="Sorry there was an error:";
alert(msg+" "+xhr.statusText+" "+xhr.status);
}
});
});
});
Your load.html looks like this: Now all you need to do is copy these two files to your server and study carefully what ajaxprocess.html looks like ... Hope this helps :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<strong class="strong">This was loaded OK!!!<span class="images"></span></strong>
</body>
</html>
source to share
You can also use invokedata ajax. This will allow you to pass variables to the success function.
Here's an example in this link: http://weboutofthebox.com/en-GB/28/Article/Ajaxinvokedataparameter
I don't know if you are using firebug, but if not, use firefox firefox and see what happens.
source to share