CODEWITHSUNDEEP
javascriptjqueryfunction
Jetteh22
Jetteh22

Reputation: 141

Javascript Calling Function In Function Not Working

I'm trying to create a very simple chat system with auto refresh and refresh on submission of new chat message from the user.

I currently have two functions - one for submitting the new message, clearing the form and refreshing the chat (using the next function) called clearchat():

function clearchat() {
    var frm = document.getElementById('chatform');
    document.getElementById('fullmessage').value = document.getElementById('chatmsg').value;
    frm.submit(); // form is being submitted to a hidden iframe.
    frm.reset();
    refreshchat();
}

And then the other that refreshes the chat that should be called when clearchat() runs and is also called every 3 seconds using an interval:

function refreshchat() {
    $('#qcwindow').load(document.URL +  ' #qctext');
    $('#chatwindow').load(document.URL +  ' #chattext');
    var chatwindow = document.getElementById('chatwindow');
    var difference = chatwindow.scrollHeight - chatwindow.scrollTop;
    if(difference < 750) {
        chatwindow.scrollTop = chatwindow.scrollHeight;
    }
}

This function loads the new chat information into the DIV and then keeps it scrolled to the bottom of the div unless the user has manually scrolled away from the bottom of the div.

Both functions work individually. The problem I'm having is that when the user submits a new message it does submit the form and clear the form but it does not refresh the chat. The chat still automatically refreshes every 3 seconds, though. But I'd like the new message from the user to show up instantly.

I cannot figure out for the life of me why the refreshchat() function inside the clearchat() function isn't being called.

Any help would be appreciated. Thanks.

UPDATE:

I've added console_log("refrehsed") to the refreshchat() function and it gets added to the log every time both through hitting enter manually and also the auto refresh but the div only actually updates on the auto refresh.

Upvotes: 3

Views: 70

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

When you submit the form to an iframe, you should wait for the post to finish before updating the UI. You can know that the form finished submitting by listening to the load event of the iframe the form is targeting.

Upvotes: 2

Related Questions