Javascript global variable simple solution

Question

I'm trying to learn javascript and encountered a wall due to working with variables through multiple functions.

After browsing through the documentation and stackoverflow most voted answers, related to global variables and how to effectively work with them through multiple functions.

I found little to no simple solution.

Any kind soul able to correct how this complete piece of code can work properly ?

variable "ttl" and "msg" are needed to be passed from "ajax" function to "notify" function

<script src="js/jquery.js"></script>
<script src="js/bootstrap-notify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Global variables ttl and msg needed ?
        var ttl = null;
        var msg = null;

        // Make an ajax call to json file.
        $.ajax({
            url: "lastorder.json",
            dataType: "json",
            // Parse title and message from json.
            success: function(data) {
                ttl = data.title;
                msg = data.message;
            }
        });
        // Notify function displays a title and message that was parsed from json file
        $.notify({
            icon: 'img/avatar.jpg',
            title: ttl,
            message: msg
        },{
            type: 'minimalist',
            delay: 3000,
            icon_type: 'image',
            template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                '<img data-notify="icon" class="img-circle pull-left">' +
                '<span data-notify="title">{1}</span>' +
                '<span data-notify="message">{2}</span>' +
            '</div>'
        });

    });
</script>

Can you move your $.notify code into the success callback? Or is there a reason it needs to be outside of it? — Mike Cluck
– Mike Cluck, Commented Apr 22, 2016 at 16:44
are you getting null values for both variable in notify function ? — Hiren patel
– Hiren patel, Commented Apr 22, 2016 at 16:48
@DanielAlmeida -- Never recommend setting async to false.... — Jeremy J Starcher
– Jeremy J Starcher, Commented Apr 22, 2016 at 16:54
@DanielAlmeida I'm not Jeremy but I can tell you that 1) It's deprecated 2) It encourages bad patterns and 3) It essentially locks up the browser while you're waiting for a response. — Mike Cluck
– Mike Cluck, Commented Apr 22, 2016 at 17:03
@DanielAlmeida It's not just the data -- it's the whole connection process. If there is any kind of slowdown in making the connection, from a DNS timeout to a a cellphone losing signal for a few seconds, the entire browser freezes. — Jeremy J Starcher
– Jeremy J Starcher, Commented Apr 22, 2016 at 17:05

Daniel Almeida · Accepted Answer · 2016-04-22 16:57:56Z

If you want to try @MikeC solution:

$(document).ready(function () {
        // Global variables ttl and msg needed ?
        var ttl = null;
        var msg = null;

        // Notify function displays a title and message that was parsed from json file
        function notify(data) {

            ttl = data.title;
            msg = data.message;

            $.notify({
                icon: 'img/avatar.jpg',
                title: ttl,
                message: msg
            }, {
                type: 'minimalist',
                delay: 3000,
                icon_type: 'image',
                template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                '<img data-notify="icon" class="img-circle pull-left">' +
                '<span data-notify="title">{1}</span>' +
                '<span data-notify="message">{2}</span>' +
            '</div>'
            });

        }

        // Make an ajax call to json file.
        $.ajax({
            url: "lastorder.json",
            dataType: "json",
            // Parse title and message from json.
            success: notify
        });

    });

Community · Accepted Answer · 2017-05-23 12:07:37Z

0

If you want to response returned from ajax request then you can get this data after ajax request successfully executes. Since ajax is asynchronus call , the code waiting for the response will be already executed by the time the response is received. So you will not get exact value return by ajax response in notify function.

So , in order to use values return by ajax response , you must call notify function in side success() method of ajax.

refer this SO question

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Apr 22, 2016 at 16:55

Hiren patel

9819 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript global variable simple solution

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related