Home/ Questions/Q 849421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T07:06:12+00:00

Let’s look at the output of console.log. A click on the button changes the

  • 0

Let’s look at the output of console.log. A click on the button changes the name if we use the function changeName(). But if we use the function changeNameAjax() (where response.name = 'Ford Prefect'), one click on the button doesn’t change the name, only a second click does. Why?

<!DOCTYPE html>
<head>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function(){

            //changeName();
            changeNameAjax();

            var box = document.getElementById("box").innerHTML;
            console.log(box);

            function changeName(){
                $('#box').html('<p>Ford Prefect</p>');
            }

            function changeNameAjax(){
                $.ajax({
                    url: 'getName.php?jsoncallback=?',
                    dataType: 'json',
                    success: function(response){
                        $('#box').html('<p>' + response.name + '</p>');
                    }
                });
            }

        });
    });
</script>
</head>
<body>
    <button>Update</button>
    <div id='box'>
        <p>Arthur Dent</p>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is because AJAX is asynchronous, meaning that success function doesn’t run until later, when the response from the server comes back. So this line:

    $('#box').html('<p>' + response.name + '</p>');

    Doesn’t run until after you’ve called console.log, in fact if you click fast or the server is slow, you can click several times before the success function completes once.

    Even if the response is instantaneous (local server for instance), since JavaScript is single threaded, that success still happens afterwards…to see this, just stick a console.log('Success') in your success function, then you’ll get a good illustration of the order and when the callbacks execute.

    • 0