Javascript Calling Function In Function Not Working

Question

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.

What happens if you remove the automatic 3-second refresh from the program? Does it refresh correctly (of course, only when you submit a message)? — Katana314
– Katana314, Commented Mar 15, 2016 at 2:26
The thing is that ajax is not completed instantly, if you want the message sent from a user to pop up instantly, you probably have to manually change the html contents of the chat box to include the message so that it looks like it is out instantly. — chris97ong
– chris97ong, Commented Mar 15, 2016 at 2:27
@Katana314 - Hmm.. When I remove the automatic 3-second interval it does load the information automatically about 75% of the time but not every single time. — Jetteh22
– Jetteh22, Commented Mar 15, 2016 at 2:39
You should set a load listener on the iframe you're submitting to and call refreshchat when it finishes reloading — Ruan Mendes
– Ruan Mendes, Commented Mar 15, 2016 at 2:50
@JuanMendes - That seemed to work. Is there any way I can mark this as a correct answer? I guess chris97ong and JanR were right about the ajax being delayed.. between that and the actual submission of the form. This fixed my problem for now until I can come up with a better solution. Thank you! — Jetteh22
– Jetteh22, Commented Mar 15, 2016 at 3:04

Ruan Mendes · Accepted Answer · 2016-03-15 03:09:03Z

2

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.

answered Mar 15, 2016 at 3:09

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jetteh22 Over a year ago

This worked perfectly. Added an event listener to the iframe loading that called the refreshchat() function. Everything works properly now.

Collectives™ on Stack Overflow

Javascript Calling Function In Function Not Working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related