I am having difficulty understanding how to implement a callback function. I've search around alot and found a lot of material on the subject but nothing that I've been able to implement in my jQuery code.
Can someone please edit my code here so I can copy it back into 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 that variable. Sounds easy but I don't get it. Here's my code example if you would be so kind 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);
}
});
seems like this 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:
readyState: " + xhr.readyState + "
status: " + xhr.status + "
responseText: " + xhr.responseText, 'nosave'); }
});
if the alert isn't firing, you should add an error to this, like i did above.
you should look into developing with firebug, you will be able to see all ajax calls you make.
This should help you to understand it a bit 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 is to copy those two files on your server and scrutinize how 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>
You can also use the invokedata of ajax. This will let you pass variables to the success function.
Here a 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 install firebug and view what is happening.