dynamic marking changing content JavaScript - javascript

I created a table that receives data from a SQL database to a PHP script that parse this back though my AJAX to the HTML page.
With this information I create the table.
It works and the beauty of it: every time the data changes the table changes.
BUT: it reloads the whole table with new data.
What I want is to have it only reload the part that's been updates and then "mark" it until you mouse over it.
Is there any function in JS that allows to compare 2 JSON encoded strings and then only update the part that's not similar?
I have use jQuery but haven't found anything as of yet.I apologies for not showing any code but it's protected from sharing

You have to poll AJAX request to the server after every few seconds or minutes and see if there's any update. If so, you receive that update with say the id or index number of the data which you can replace with the new one. That way you won't have to update the entire thing.

Related

Is there a way to store previous html and if there are any changes in json then update only those changes in html?

I am working on a chrome extension for the very first time.
A brief info about the extension : It fetches json data from a url containing an array objects of Coding contests happening/to be happened on sites like Leetcode, Codeforces, etc and shows them in the html.So to make this happen, everytime the extension icon is clicked, the json data is fetched from the url and every single time html is cleared and new html is displayed (using js dom manipulation) by looping over the json which makes the page loading slow.
So how can i add/delete my html only with the new/removed json objects also maintaining the order of Contests on the basis of their time?
In short : Is there a way to store previous html and if there are any changes in json then update only those changes in html?
Using JS only

Refreshing html table after ajax success

When we perform destructive operations on database tables (insert/update/delete) using ajax, the DOM has to reflect this change. I see two commonly used approaches.
When the destructive database operation succeeds, manipulate the rows in the html table to reflect the change
When the destructive database operation succeeds, refresh the html table by making another ajax request
Suppose users A and B are accessing a table of 5 rows. Then A deletes the first row while B deletes the second row. With the DOM manipulation approach, A will not see that the second row is deleted while B will not see that the first row is deleted. This problem can be eliminated by the refresh approach, but both users can only see the full updates when they themselves perform an operation.
Which is the best approach?
The problem cannot be eliminated by simple "refresh" approach(option 2).
Let's say both A and B viewing the table. Now A deleted a row, if you refresh the page of A it'll be only updated on A's view window. But code running on B will not be aware at the moment of the fact that the row is deleted. He will see the update only after he delete one row as per option 2 or obviously make a browser refresh.
One quick solution is to refresh the table data by using Ajax request in a fixed interval. For ex: 5 seconds.
To make the table reflect truly real-time data of the database at any moment for every user you have to use websocket. For this you need both real-time server and client.
You can implement a portion or feature of your entire web application in something like Socket.IO to make that portion real-time while keeping the other portion as is using your existing technology stack.

get changes by other users in MS Access

Is this possible?
To know data changed by other users in realtime without requery or refresh on MS Access.
I'm developing user forms in HTML & Javascript and using MS Access as back-end DB.
Three or four users always keep opening the form.
I want to refresh and display other user's changes into the form in real-time, like SQLserver's SqlNotificationRequest or Ajax with php.
I allowed only using MS Access and HTML with JS on intranet, due to an authority.
Is there no way but using timer function with refresh or requery in JS?
You can't do it in real time; you will have to fake it. Decide what is an acceptable lag in the information update (5 seconds? 30 seconds?) and set up a timer on your front end.
When the data is modified on your database is there logging/audit? Do you keep a timestamp? If yes, you can use that to check for new changes. If not, just create a single record, single field table to store the last modification timestamp. Or if you have a generic parameter or global values stable, add one more record there. Make sure anything on your front end that alters data updates this timestamp field.
Then your front end's timer function can check the last update timestamp and compare it with its own last update timestamp (which you stored locally on the previous timer event) and see if it needs to refresh the data or not.

AJAX: dynamically change contents of second page

I am attempting to change contents of a second page depending on changes in another page. Simply put i have an image display page - #1 and an information display page - #2.
Page #1 displays an image depending on a get variable which i acquire with javascript function and another function sends it off to a php page with an XMLHTTPRequest and handles it.
Now my question is do I need to use a Database table to store the variable and then create another PHP script acting as a listener from the database and if the variable changes send it off to Page #2 with the display information or is there a simpler way?
In simpler terms - The get variable is set to 1 -> display picture 1 AND show information related to product 1 on PAGE #2. Then get variable set to 2, then 3 and so on...
Thank you!
4 options:
1 - You have a PHP website and go ahead as you describe:
Just reuse the parameter received by the first page (www.mysite.com/page1.php?id=1) to load the second one. Your script can take the parameter and modify the link for the second page so that you have www.mysite.com/page2.php?id=1 and on page 2 you know how to get your parameter and use it.
2 - You have a PHP website but you can make things a lot simpler:
The link www.mysite.com/page1.php?id=1 makes your PHP code to intercept the parameter directly so that you load your content directly there and make the link for the second page (www.mysite.com/page2.php?id=1) from the server or PHP and this is sent to the client directly. You don't need so much JavaScript and AJAX, your second page is a PHP page again, so you load everything from the server again. It's the most common way. I hope you don't have any obstacles with this method.
3 - You have a single page application in JavaScript:
If your JavaScript gets the id, just keep the value in a variable and the "second page" would access this variable too.
4 - If your second page is already open and you want it to update when the first one gets modified, YES you need to keep the variable on your server and why not a database.
And you need ajax repetitively called with setInterval() (or maybe better with setTimeout() ) to get the variable from a PHP script that will query your database.
I would not advise you to make your second page to refresh, it is unpleasant for the user.
There are potentially some other cases if you have other restrictions. Don't hesitate to ask for some details if something is not clear.

Javascript control page and user view page

Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io

Categories