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.
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'm making a website with the Steam API.
I was trying it out by getting the friends list of the signed in person.
But the more friends you have, the longer it takes to load the page.
So I made the page start to load the friends as soon as the page is done loading.
If I try to refresh the page or sign out while the page is requesting the friends list, it just keeps on loading until the friend list has been fetched and only then, it refreshes the page or signs out.
How do I fix so I can refresh the page without having to wait for the request to be fuly performed.
Here is the jQuery I use to load in the PHP file:
$(function() {
$('#friends').load("friendstest.php");
});
Please tell me if you need more information.
The website is here.
This can be due to a sessión write lock.
If you make the request and it takes a long time, the user session file is locked for writing, so another request can't open it for writing before the previous request release the file, and it is done at the end of the php script.
If your php script is not going to write any data in the session, you can call the session_write_close() function to release the lock (http://php.net/manual/en/function.session-write-close.php) so you enable other request to open the session file.
So at the begining of your friendstest.php and after the session_start, you can call the session_write_close().
Instead of loading the entire friends list in a single call, you can split it into multiple calls with something like:
upto = 0;
function loadMoreFriends() {
$('#friends').append("friendstest.php?limit=10&start="+upto);
upto += 10;
}
In this example, upto records how many friends have been loaded. The php would return only 10 friends and start from where the page is upto.
You would call this function on page load and then whenever you would like to load more friends to the page (scroll to bottom or similar).
I have a problem with project iam working on. In one route(program/messages) of my application, user can create and edit messages(using ckeditor textarea). These messages are saved in database. On another route(program/display) the application generates html site with messages(retrieved from database) created by user. The problem is that i need to update the display view(without site refresh ofc), when user change something in messages data(edit, or create new / delete). Any solution? Iam using codeigniter for backend.
Your view page must contain an ajax script. Which will check for database changes upon certain interval. That's all. I think ajax is new for you. Please grab a bit more AJAX concept. It's pretty handy ..
You can see W3school --
http://www.w3schools.com/ajax/default.asp
If you are in a hurry .. then ..
https://thenewboston.com/videos.php?cat=61
You can use
Jquery ajax() function
Javascript setInterval() function
Set the interval to certain time which will execute the ajax function to see if there is certain change in the database. if there is a change then update the view in success of ajax call.
There is another solution by using triggers in the database. But I am not quite sure about this.
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