Steve Hougom
asked on
Help adding loading spinner to a JS rendered html form
I have an html form that gets rendered from JS that im struggling to add a loading spinner to.
The html is rendered from JS. The JS was handed down to me to use.
This is the submit method. Im trying to show a page spinner when the its clicked on.
JS file attached. my-form.js
The html is rendered from JS. The JS was handed down to me to use.
This is the submit method. Im trying to show a page spinner when the its clicked on.
JS file attached. my-form.js
There are two parts to this, the rendered html/js/css and how you get there by writing code for what looks like https://lit-element.polymer-project.org/guide or https://lit.dev/
Your question here should really be how to do this with rendered html/js/css and you can work backward to put that into lit.
In any form of javascript, the way it works is to detect the click of the submit button, inject your animation to a button or other element, perform your ajax request, when you receive your response, close the animation and display your response.
Here is a codepen example I found that should get you going https://codepen.io/wang0nya/pen/bzwQPr
In your code, that will go where you have
Your question here should really be how to do this with rendered html/js/css and you can work backward to put that into lit.
In any form of javascript, the way it works is to detect the click of the submit button, inject your animation to a button or other element, perform your ajax request, when you receive your response, close the animation and display your response.
Here is a codepen example I found that should get you going https://codepen.io/wang0nya/pen/bzwQPr
In your code, that will go where you have
headers["Authorization"] = "Bearer " + this.accessToken;
fetch(this.action, {
method: "POST", // or 'PUT'
headers,
body: formdata,
})
//.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
confirm("Form submitted. Thank you!");
this.resetForm();
})
ASKER
I added the following lines of code to my embedded my-form.js and re-ran but it wont show the spinner.
submitForm methed lines 466,467, 508.
Render method line 538.
Added the embedded css in the file too:
I do see an error in the console though.
submitForm methed lines 466,467, 508.
Render method line 538.
Added the embedded css in the file too:
I do see an error in the console though.
ASKER
Line 138 in the console. my-form.js may have nothing to do with the above changes but its the only error i found.
Rest of the console below:
ASKER
If i comment out the following js it at least loads the graphic.
Can you render your code to just html/js/css to shre or better put a sample page on a your public test URL or use codepen or other playground. We just need the rendered code, not the uncompiled js. It will make it easier to see what is going on.
ASKER
Yea i was about to put on codepen the problem is everything is in js file. But i will see if i can somehow simulate that on codepen.
Right, you just need to render it. In other words, view the source in the browser, copy and paste if that is easier.
ASKER
When running it on localhost it pauses on exception here.
Your spinner is probably not defined properly.
Does the console give you any clues?
Does the console give you any clues?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
There are a number of js spinners you could try from the js end
HTML
Open in new window
CSS
Open in new window