<div id="navbar">
<a href="/">Home</a> &diam;
<a href="/famous">Famous Dragons</a> &diam;
<span id="navwelcome"></span>
</div>


<script>

$(function() {
    var name = "<%=data.username %>";
    var greetNewcomer = "<input type='text'/><button>Tell me your name</button>";

    const sayYourName = function() {
        var visitorName = $('#navwelcome > input').val();
            $.ajax({
                url: 'welcome',
                type: 'POST',
                data: {
                    'nombre': visitorName
                },
                success: (data) => {
                    if(data=='SUCCESS') $('#navwelcome').html("Welcome, "+visitorName+"!");
                }
            });
    }

    if(name=="") {
        $('#navwelcome').html(greetNewcomer);
        $('#navwelcome > button').on('click', sayYourName);
        $('#navwelcome > input').on('keyup', (key) => {
            if(key.keyCode==13) sayYourName();
        });
    }
    else {
        $('#navwelcome').html("Welcome, "+name+"!");
    }    
});


</script>