Variable is not defined

Question

I am trying this code to update the fallback of tipsy plugin. How can I access the variable a outside of first function ? I can override the variable to make the update, correct ?

<script type="text/javascript">
$(document).ready(function () {
    var a ="Login";
    $("#login_form").submit(function () {
        var formdata = $("#login_form").serializeArray();
        $.ajax({
            url: "ajax_login.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function (data) {
                if (data.livre === 'complete') {
                    var a ="success";
                } else 
                    var a = "Error";
            }
        });
return false;
    });
});
</script>

<script type='text/javascript'>
$(document).ready(function () {
    $('.login_fields input[rel=tipsy]').tipsy({gravity: 'w', trigger: 'manual', fallback: a }); // a is not defined
});
</script>

Answer 1

Either move the code within the second document.ready block to the first one (which will make the a variable accessible by your .tipsy() call) or make the a variable a global.

<script type="text/javascript">
$(document).ready(function () {
    var a ="Login";
    $("#login_form").submit(function () {
        var formdata = $("#login_form").serializeArray();
        $.ajax({
            url: "ajax_login.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function (data) {
                if (data.livre === 'complete') {
                    a ="success";
                } else 
                    a = "Error";
            }
        });
return false;
    });
    $('.login_fields input[rel=tipsy]').tipsy({gravity: 'w', trigger: 'manual', fallback: a });

});
</script>

OR

<script type="text/javascript">
var a = "Login";
$(document).ready(function () {
    $("#login_form").submit(function () {
        var formdata = $("#login_form").serializeArray();
        $.ajax({
            url: "ajax_login.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function (data) {
                if (data.livre === 'complete') {
                    a ="success";
                } else 
                    a = "Error";
            }
        });
return false;
    });
});
</script>

<script type='text/javascript'>
$(document).ready(function () {
    $('.login_fields input[rel=tipsy]').tipsy({gravity: 'w', trigger: 'manual', fallback: a }); // a is not defined
});
</script>

Notice I removed the var declaration from the success callback on your AJAX call.

UPDATE

To pass the updated value of a to tipsy you will need to run the .tipsy() call in your callback function. You could also run it as you are now and update the tipsy plugin in your callback function (however I am not familiar with the plugin and am not aware of how to do this):

<script type="text/javascript">
$(document).ready(function () {
    var a ="Login";
    $("#login_form").submit(function () {
        var formdata = $("#login_form").serializeArray();
        $.ajax({
            url: "ajax_login.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function (data) {
                if (data.livre === 'complete') {
                    a ="success";
                } else {
                    a = "Error";
                }
                $('.login_fields input[rel=tipsy]').tipsy({gravity: 'w', trigger: 'manual', fallback: a });
            }
        });
return false;
    });
});
</script>

Answer 2

It is not possible to change the fallback property of your Tipsy objects after they've been created without hacking the tipsy plugin itself.

Given the fallback parameter is a string, it is interpreted as soon as the $().tipsy({...}) function is executed. So changing the value of variable a afterwards will not change the fallback parameter.

I first thought that directly updating the fallback property from the $.fn.tipsy.defaults object would make it, but when a new Tipsy object is created, the fallback property is basically copied in it, so it will store the initial value of fallback forever.

One solution would be to fork the Tipsy project and change the fallback property to accept either a string or a function(). Like this it would be possible to do something like: fallback: function (){ return a;}.

Answer 3

Move the a variable outside the ready function:

<script type="text/javascript">
    var a ="Login";
    $(document).ready(function () {

Also, don't use the var keyword in your success function. You are re-declaring the variable, rather than setting the value of the variable defined at the beginning of the ready function.

 success: function (data) {
            if (data.livre === 'complete') {
                a ="sucess";
            } else 
                a = "Error";
        }

Answer 4

You could make it global. Whether or not that's what you should do depends.

If it's all running in doc ready, there's no reason to have a global; you could just run the code from the second docready from the ajax success (or complete, if it meets your needs).

Hard to say; don't know how close the snippets are to reality.

Answer 5

1) why do you have 2 Document.ready ??

2)you can use global param or $.data to transffer data.

3)for your solution - declare the var a ="Login"; out side or use self Executing func which keeps the scope for the global var.