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.
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.
Related
Hello I'm trying to scroll into the div only when the submit finishes with promisses
function submitForm(form) {
console.log("submitForm: ", form);
return Promise.resolve(() => form.submit());
}
async function submitFm (form) {
console.log("submitFm: ", form);
await submitForm(form);
};
submitButton.addEventListener("click", () => {
submitFm(form).then(() => {
console.log("should display after submit is done!");
});
});
The promise is suppose to work like this, does anyone knows what's missing ?
Thanks in advance
The submit() method on a form triggers form submission (and navigation to the result).
As soon as that is triggered, the submit() function finishes.
Then the promise resolves.
Then the then function executes.
Then the browser navigates to the new page.
There is no way for JavaScript running in a web page to directly cause JavaScript to run in the next page the viewport navigates to.
Unloading the current page will kill any JavaScript running in it. The next page, whether it be on the other end of a link, or a form submission or a call to location.reload(), etc. is a blank slate. Any JS in that page runs from scratch.
If you want to cause an effect in it you need to do so by passing a message through something that will persist between page loads.
Examples include a query string on the URL or the Session Storage API.
Then you need JavaScript in the next page to check for that message, act on it, and possibly clean it up so it doesn't effect the next page load.
If you submit a form base on form action, you need to pass the state to the next page. The simpler way is that use an anchor in the URL, URL with a hashtag will scroll to the element that id is the hashtag.
e.g.
<form action="/post/data#id" method="post"></form>
If you submit based on ajax or fetch, you redirect the URL when submitted, you also use hashtags. or you can persistence your data by Storage API, and control the scroll action on the next page.
If you use SPA frameworks like Vue React or others. You can use the router API to handle URL changes on submit. or handle scroll directly when form submits success.
I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved
I have a page that refreshing part of the page every 10th second, and the reloaded content is using php to do a check in mysql database. If some cafeterias are met the refreshing should stop until a new button is pushed / function is called from the new content. My idea was letting the refresh function be controlled by javascript boolean but I cant get it to work.
In the main page I have the refresh function
var update = true;
function autoRefresh_div()
{
if (update)
{
$("#messagebox").load("include/messagebox.php");
}
setTimeout(autoRefresh_div, 10000);
}
function messageboxClose()
{
update = true;
$('.messagebox').hide();
}
In the php file that is loaded except from connection to database I have a link that calls function to hide this div and also enable refreshing again.
Hide
And also a script that disabling refreshing
var update = false;
The problem I have is that calling the function in the main page isn't working. When refreshing update variable is set to false and refreshing content stops. But when I click the link it doesn't start again. It seems like the sub page cant access the function on the main page. Is there a better solution to this?
I am designing a page for quiz contest. I need to submit the quiz when users tries to refresh page. I am using JavaScript. Plz help me..!!
function reload() {
if(localStorage.load == 1) {
localStorage.load = +0;
document.getElementById('quesform').submit();
}
set();
}
function set() {
if(!localStorage.load || localStorage.load == 0)
localStorage.load = 1;
}
I used this code, but it didn't works in chrome. It executes the coding after submitting the form. It sets value to 1 and redirect immediately before displaying question page..
I have removed my previous answer because it is not possible to submit a form when the user tries to leave the page.
You are limited to giving the user the choice of leaving/staying.
The only solution would be to set a cookie containing the form data, so that when the user next visits your page, the data can be retrieved and submitted.
I need to submit a form to a new window and then submit slightly altered values to the same form in the original window. I have the following function to do that.
//Now lets create the page making function!
function createInternetPage() {
//Start by checking to see if the internet page has been requested.
req_int = document.getElementById("marterial_internet").checked;
if (req_int == true){
//If it has, create the internet page.
//Send the completed form to submit in a new window, creating the broadcast page.
document.getElementById("new_material").setAttribute("target","_blank");
document.forms["new_material"].submit();
//Add "(Internet)" to the current form title
var title = document.getElementById("material_title").value;
var title_new = title + " (Internet)";
title = document.getElementById("material_title").value = title_new;
//Then submit the form on the existing window to make the internet page.
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
//If it has not been requested then just submit the normal form.
else {
//alert("NOT Checked");
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
}
Everything work great EXCEPT that the form on the original window never gets submitted. It changes the material_title value to add " (Internet)" after it but doesn't submit the form.
Any ideas why this is and a work around to get this working?
EDIT:
When adding a setTimeout delay, see below, the same thing is happening. Everything runs except for the last form submit.
function delay() {
//Send the completed form to submit in a new window, creating the broadcast page.
document.getElementById("new_material").setAttribute("target","_blank");
document.forms["new_material"].submit();
}
function delay2(){
var title = document.getElementById("material_title").value;
var title_new = title + " (Internet)";
title = document.getElementById("material_title").value = title_new;
//Then submit the form on the existing window to make the internet page.
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
//Now lets create the page making function!
function createInternetPage() {
//Start by checking to see if the internet page has been requested.
req_int = document.getElementById("marterial_internet").checked;
if (req_int == true){
//If it has, create the internet page.
delay()
//Add "(Internet)" to the current form title
setTimeout('delay2()',10000);
}
//If it has not been requested then just submit the normal form.
else {
//alert("NOT Checked");
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
}
You do not give enough time for the form to do the actions. You need to break up the requests. Use a setTimeout to do the second action.
If you are submitting to the same domain, you can always use Ajax to make the first submission and not open up a new window.
Better, is have the server handle the requests and make a second submission.