CODEWITHSUNDEEP
javascriptphpjqueryajax
jdc
jdc

Reputation: 85

Jquery variable scope on Ajax loaded script

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:

console.log output

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>

Upvotes: 2

Views: 916

Answers (3)

Jack jdeoel
Jack jdeoel

Reputation: 4584

ajax is using for exchage data between javascript and php ,so you can't call your javascript value as javascript variable in ajax loaded file ,but can access by php GET or POST .For never mixed with php and js code !!! You can do like this ...

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 : {d : varFromMain }, //send para [exchage js var to php ]
                async : true,
                success : function( data ) {
                    alert(data);
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
</script>

loaded.php

<?php
  echo $_GET['d']; //access as php variable (this is what ajax purpose)
?>

Upvotes: 0

Rahman Ashik
Rahman Ashik

Reputation: 260

If you define variable inside $(function (){}), its not global scope. You can declare the variable also in this way:

window.var varFromMain = 1; //it will be gloabl also if declared inside the function

Otherwise You can pass the variable from ajax:

$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : {varFromMain : varFromMain}, //pass variable
async : true,
success : function( data ) {
     $("#ajaxLoad").html(data);
},
error: function(xhr, mesage, error) {
 }
});

Then in loaded.php, retrieve it using php get variable:

<script>
    $(function () {
        alert("<?php echo $_GET['varFromMain'];?>");
    });
</script>

Upvotes: 0

Chen Sturmweizen
Chen Sturmweizen

Reputation: 639

It goes like:

  1. anonymous function is called, varFromMain is declared in the function scope
  2. AJAX request sent
  3. AJAX request success
  4. Success callback is run (new JS printed).
  5. (Right after the callback is complete) Anonymous function complete, scope destroyed, varFromMain is no more.
  6. new JS run.

And if you declare the varFromMain globally it always stays at the document scope.

Upvotes: 1

Related Questions