Problem with scope and sequencing (javascript/jQuery)

JavaScript
1

Hy,

I’m working on a message sending system. It uses ajax functionality from jQuery.
The user inputs a message, it is send to the server. There it’s checked, cleaned and send to mobile devices. The cleaned message is returned (and maybe with some errors I need to cut of client side).
Then the script should display the returned message on the screen.

The problem is that I can’t seem to get the cleaned message out of the $.get callbackfunction and on to the display part.
The console log indicates that there’s a sequencing problem.
the console

input 1:<u>underline</u>
messages (regel 70)
GET http://localhost/json/messages/send/?telephone=0031631934378&message=%3Cu%3Eunderline%3C/u%3E
	
200 OK
		153ms	
after and outside the function:<u>underline</u>
messages (regel 83)
server return (post-cut):underline
messages (regel 79)

You can see that the console.log from inside the callback function is diplayed last, so probably after the message is displayed on screen.

$('#sendform').submit(function() {
    var message = $('#message').val();
    $('#message').val('');

	console.log('input 1:' + message);
	
    if (!message || message == '') return false;

    $.get('/json/messages/send/?telephone=' + $('#unit').val() + '&message=' + message, function(output) {
        //gets the cleaned message and sometimes a few errors which we need to cut of 
		start = output.search('<pre class="cake-error">');
		message = output.substring(0,start);

		console.log('server return (post-cut):' + message);
		//return message;
    });
    console.log('after and outside the function:' + message);
    
    
    $('.holder').append('<div class="msg-balloon right">' + message + '</div>');
    $(".holder").animate({ scrollTop: $('.holder').height() - $('.holder').scrollTop() }, 0);    
    
    $('#message').focus();
    return false;
});

Any ideas?

thx in advance

2

I think I solved the problem by putting the append and animate inside a function, which is called from inside the $.get callback with the right message.
This works, but I still think it’s weird to have the ‘wrong’ message available outside the functions.