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.
Related
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)
)
I have two basic pages with the urls
http://localhost:8000/page-a and
http://localhost:8000/page-b.
I'm using html5 history api and following this tutorial.
The only difference is that I add the api endpoint of the data, like
http://localhost:8000/api/page-a and
http://localhost:8000/api/page-b, in pushState().
I can easily go back and forth in history but when reloading the page and go back and forth, window.popstate does not trigger anymore. Rather, it directly navigates to page-a and page-b as it says in the console.
In the demo, I reloaded the pages but it still works fine. Is this because the data has to be fetched with AJAX? (but in the tutorial it says the AJAX is fine)
EDIT
I forgot to mention that the pages are created dynamically (with Django). Is it because of the dynamic nature of the pages?
SOLVED
I should have added the url of the state like http://localhost:8000/api/page-a/. On page reload, Django always resolves the url http://localhost:8000/page-a to http://localhost:8000/page-a/ so when I click the back button the onpopstate is never triggered. It was just a '/' and costed me like two days.
I'm in trouble. I'm trying to do something which can appear easy but I don't manage to do it.
Here is the situation :
I have 3 different html pages :
The first one called index.html is my main page with a button to lauch a test in AJAX (I'm gonna talk about it after).
The second one corresponds to a redirection to the third page.
The third one has data.
What I wanna do is :
Click on "test" button on the first page and then start an AJAX request on the second one to reach data from the third one (with the redirection) to print it in the first.
I mean the first page calls the second one in AJAX, but the just to redirect on a specific third page. Depending on the third page which is called, data returned to the first page will change.
Do you think it's possible to find a solution to this problem in Javascript ? I hope I have been clear enough.
Thank you in advance for answer.
What you are describing doesn't really make sense. There are methods of redirection that AJAX follows (an HTTP 301 code, for example). However, what you are describing is not that sort of redirect. You are describing Javascript code that, when run, will redirect the browser elsewhere.
However, you are not loading that Javascript with the browser, you are downloading the page via AJAX. Once it is downloaded, you will have the text that represents that page, but in order to find out where it would redirect to when run, you would either have to run it and somehow capture the redirect value (not recommended), or parse it yourself (also not recommended).
There are other options that could work, depending on what you are trying to accomplish:
The server could return an HTTP redirect code when the second page is requested
The second page could instead be a text or JSON file containing a URL, which the first page could read, then request data from that URL.
If there is logic in the second page that determines where the redirect goes, it could be moved to the first page
You could have the second page employ server-side scripting (PHP, etc) to determine what data should be returned and return it directly to the first page
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