SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with scope and sequencing (javascript/jQuery)

    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
    HTML Code:
    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.

    Code JavaScript:
    $('#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
    Last edited by Hieronymus; Jan 4, 2012 at 04:26. Reason: error in code
    What good are one-liners if they don't
    fit.

  2. #2
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    What good are one-liners if they don't
    fit.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •