We work on a 3rd party opensource CMS. We cannot edit any piece of code of it in any sense.
There're forms to fill which we design for the users. Those forms have section tabs. Those section tabs are implemented with a plugin.
Instead of loading all form tabs content on page load, it basically loads dynamically via AJAX when tabs are clicked. Classic.
I created a button on a "CUSTOM HTML pill" on the form (which lets you inject HTML+JS+CSS), which on click basically triggers a click on every TAB on the designed form. This way, it loads everything on page (when loaded, just hidden from that moment on, and not ajax is called again for that specific clicked tab).
Then I serialize all the form and send it to a Python Flask server via an AJAX call made by me.
THE PROBLEM:
As I said, before ajax call to Flask, I trigger click to every tab to load on page all form fields there, because this way I sent ALL the real form to Flask, if not, only some form pieces goes to the request.
If every goes fine, it goes as expected. But tab content ajax load is ASYNC, so sometimes it doesn't finish and Flask receives incomplete form.
THE QUESTION:
On my custom button click, how can I force clicking to every tab, and wait for ALL the async requests made (programmed on the 3rd party plugin not editable) to finish and finally, make my call to Flask with the complete Form serialized data?
Cannot use promises (await, $.when()) because tab click makes a common $.ajax() call but not with a return $.ajax().
//Pseudocode:
mybutton.click(
$(allTabs).click() //this creates a cascade of ajax calls loading every tab data from server. Just once (first time)
WHEN ALL PREVIOUS ASYNC CALLS FINISHED AND ONLY THOSE:
let FORMDATA = serialize(FULL FORM WITH EVERY TAB LOADED)
$.ajax(post call to my Python Flask, FORMDATA)
)
Related
I have a button that is used for displaying an annual leave request by doing an ajax call to a servlet which then retrieves data in the response and displays it on the modal.
'view modal' buttons in a table.
Once one of these buttons are clicked, they run a javascript function which does an ajax call and displays the data that recieved on the modal
(Screenshot). Basically I need another ajax call to a servlet as and when the "respond to request" panel is clicked. I've heard of event binding which might be useful for solving my issue, however being the newbie I am, I haven't seen an example of how this works that I understand so maybe someone could attempt to provide one here for me.
The second ajax call is to basically running a query against the database to check whether or not the currently logged in user on my web app has already accepted/declined the request so that I can disable/remove the buttons without refreshing the page.
Thanks in advance!
Two options for submitting different calls:
Each button submit different form, each form submit different action - example with jquery
Each button submit different JavaScript function the execute different ajax call
- example JavaScript
On my webpage I am achieving most of the functionality using JS like saving the record using ajax request etc. My scenario is like when I click on Update/Save Changes button and Ajax Request or other Javascript functions are invoked. After performing the operations if I refresh the page or reload it the whole code is run again and data is again saved in the database. Can you please give me a solution of how to stop this from being done.
You will need some indicator that the script should not run.
For example if you have the following scenario:
Page is loaded -> JS runs with AJAX -> data is saved to DB
You will need to add the indicator:
Page is loaded -> JS to check if it should run -> JS runs with AJAX or stop
You can generate this indicator from the server side or save it on the client via cookies, localStorage, IndexedDB or anything else you would like.
I have a Javascript function that manages the action done pressing an Input Submit button. I want that, before the function calls return, the user could be redirected to a "mypage.php" in which he will do another action, and, if this action completes successfully, also the Javascript function completes successfully.
Thank you
Redirecting to another page in javascript can be achieved by setting window.location;
BUT, when you redirect to another page the code execution of the javascript in the current page ends, a new page is fetched from the server and its javascript starts.
So if you want code on that page to interact with the code on the first page you need a more complex solution. I can think of two options:
The best solution is the do everything in a single-page app. Instead of redirecting to a new page you would fetch data via ajax, render it into a new div, hide the old div. You would have a single source of javascript, no problems.
Another option is to use iframe to show the new page. You can communicate between the page inside the iframe and the page outside it via messages.
As seen in YouTube, when you click a YT link it before redirecting you it preloads the layout of the page and then it redirect yoo it, for you to not having to see how the layout items load.
How do I make this with, JavaScript, PHP, HTTP, jQuery or with any other language?
I don't think you really understand what is going on behind the scenes at YouTube. You see, the template/layout doesn't always change. The data always changes. It isn't loading the layout (unless the new page has a different template, such as sending a message or viewing a user profile), it is fetching the data from a database and then it uses javascript to replace the current data on the page with the data it just fetched. It does this through AJAX. They use Python on the back end.
Basically... this is what happens when you click a link for a new video:
1) You click the link.
2) Some JavaScript code makes an XMLHttpRequest to a script on the server which processes the request. A progress bar appears on the screen.
3) The script on the server connects to a database and grabs the information... like other videos in the playlist, comments, the video description, etc. It does this by submitting a query to the database.
4) The query returns the information to the script which in turn organizes it and returns it to the AJAX request (asynchronously, of course).
5) The JavaScript receives the information that it was waiting for and updates the HTML of the page. The JavaScript also does some other stuff behind the scenes, like update the URL and browsing history so that you can hit your "back" button and return to the previous page that you were on. (If the template for the newly requested page is different, the JavaScript will restructure the HTML of the page appropriately.)
Is there any way to show a loading element when user click on a link or any thing that cause page start to reload , until browser start to show server response?
you have to write a JavaScript function that shows the element that contains your loading mock up when you click let's say a button.
The page render will override that as soon as the server response back.
if you are familiar with JQuery and Ajax the best way would be to use an asyn post.
Use Jquery to show the loading mock up
Async post to the server
Use Jquery to get the response,hide the loading mock up, refresh the portion of the page you need to