I'm executing a script from an ajax loaded html but i'm getting "variable is not defined" error accessing the variable declared on parent html.
Here's my code:
index.php
<div id="ajaxLoad"></div>
<button id="buttonLoad">Load</button>
<script>
$(function () {
var varFromMain = 1; // this is the variable
$("#buttonLoad").click(function () {
$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : "",
async : true,
success : function( data ) {
$("#ajaxLoad").html(data);
},
error: function(xhr, mesage, error) {
}
});
});
});
</script>
loaded.php
this is loaded from Ajax
<script>
$(function () {
alert(varFromMain);
});
</script>
Here's what i get on console:
Of course, I can access varFromMain successfully from the loaded script if i declare the variable globally.
<script>
var varFromMain = 1; // this is the variable, declared globally
$(function () {
$("#buttonLoad").click(function () {
$.ajax({
Can someone please explain this?
UPDATE:
I'll accept chen's answer below for this reason: I tried declaring another anonymous function on the same file and i'm already getting the same error.
So the variable is only accessible from the anonymous function that declared it. It is not destroyed though.
<body>
<button id="buttonLoad">Load</button>
<div id="ajaxLoad">
</div>
<button id="checkVarMain">Check Variable</button>
<button id="checkFromFunc">Check From Jquery Function</button>
</body>
<script>
$(function () {
var varFromMain = 1;
$("#buttonLoad").click(function () {
var self = $("#ajaxLoad");
$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : "",
async : true,
success : function( data ) {
self.html(data);
},
error: function(xhr, mesage, error) {
}
});
});
$.fn.TestVarFromMain = function() {
alert(varFromMain);
}
});
$(function () {
$("#checkVarMain").click(function () {
alert(varFromMain); // get's reference error
});
$("#checkFromFunc").click(function () {
$.fn.TestVarFromMain(); // Still displays the variable
});
});
</script>
