I get some data from a page abc.html using Ajax and I store it in a table.
Once the data get stored in the table(i.e. commit takes place), I want that data to be updated in the page xyz.html in runtime so that the users can see the updates without having to refresh the page.
I have got the data and updated the data in the table.
But I don't know what to do once the data gets stored in the table.
I believe ajax is required to update the webpage xyz.html.
It would be of great help if someone can point to a resource on what approach to follow to implement it.
--Update--
I am a newbie but I am not asking anyone to write the code for me. Thanks.
You are going to have to look into something like Socket.IO for real-time updating.
http://socket.io/
Basically, socket.io is a javascript library built on top of Node.JS that constantly trolls a servers looking for new activity. This is sort of ajax, but an ajax request is normally prompted by a user (by a button click or scrolling to the bottom of the page, for example).
I'm not gonna write the code for you. If you are new, it's not going to be an easy thing to accomplish. This may seem like a simple feature, but it's actually quite complex.
If you start writing code, and get stuck, come back and ask a question, but no one is going to write this feature for you for free buddy, sorry.
Here is a tutorial on how to write a real-time updating chat-application with Socket.IO. Take some time and get to know how Socket.IO works and you should be able to figure out how to make it work for your needs.
Related
I am rendering an HTML page from javascript. I need to refresh certain contents periodically. I kick-start my JS from node, I use sendFile() method to render HTML contents to my localhost. The question is how do I access the elements within the rendered contents?
One possible approach I am thinking is webscraping. I follow the sequence within my index.js as follows: readFile(myHtml) -> scrape & modify contents -> renderFile(myHtml).. is this the only method? Or do we have any elegant methods? I know there is a way in Angular, but I am using plain vanilla JS at the moment, and I want to do a quick fix.
Thanks,
I did lot of research on my above question, as there were no answer, so finally found a correct solution to my problem. So the answer I am going to share is not a direct answer to above question, but overall solution I was looking for in the first place. I confess I didn't share my entire problem, I was just trying to get a quick fix to a roadblock on my way in previous approach.
I wanted to refresh my webpage periodically using access token which expires after a session. In my previous approach, I was using backend to handle both tasks obtaining token from Auth server and also refreshing my webpage. So, I loaded the html from backend and thought of refreshing it each time with fresh values, so I was able to scrape it, update it and had the fresh page ready to go. However, each refresh was failing because of res.send() or res.writeFile() methods were failing with "Err: headers already set, can't set headers again" error message.
So I looked at my architecture, and I realized it would be possbile to split the tasks between frontend and backend. So the page was refreshed by frontend script everytime using the token passed by backend, backend obtained fresh token before the session expired and passed it to fronend using socketio. There are several ways to pass values between fronend and backend, but I found it lot more convenient and we can use custom events as well.
So, the lesson I learnt from this is, "when the problem is so uncommon, re-look at your architecture".
Hope this piece of post helps someone in similar situation.
I've done plenty of web development at a pretty basic level, and usually just local pages to be called from shared network drives.
Here is where I'm stuck:
I am attempting to build a simple application for work where other leads and I can open a local html page from our shared drive, and add/remove employee names to different tasks, so we can keep tabs on who's doing what.
The tasks are the same every day, just hardcoded titles on sectioned out divs.
Problem is, I can't figure out how to make it to where changes I make will populate for other people with the window open (considering this is just a local page and not a live environment being hosted on anything).
For the general design, I've toyed with hard coding all the employee names under each task in hidden div tags, with a bit of jquery to make the div visible when that worker is assigned.
I have also toyed with appending data to the existing tags using .innerHTML.
Still have no idea how to make this live so we can see each others changes.
Can you point me in the right direction?
I've figured it out. It may be a bit on the lazy side, but i'm just setting the HTML page to auto refresh every 5s. The data displayed will pull from a notepad doc that leads will be able to update and save.
I am assuming that you just want your peers to be able to see the changes your making live? If so you need to use Ajax. You could set it to ping the server every so often to update on the fly. I'm still quite uncertain as to whether or not that was your question, but if not please elaborate or post your code so I can help further.
I have a question I tried googling but couldn't get what I was expecting. Hope people around here will make me clear.
Am working on AngularJS from last few months and now I have a situation where there is a list of data. This list is loaded via a server(PHP).
Each list has a tracking image which changes according to the status set in the database.
Now I want this tracking image to change when the admin changes the status of that list in the database.
Right now it happens when I reload the page or when I go back and come again on this listing page.
I know there is something called $watch and in js we have setInterval.
But is this a good idea to use $watch or setInterval as it will check continuously in the database for change. Am just wondering if this will lead to the crash or it will make my application to get slow.
Please note am developing a PhoneGap application using AngularJS.
Please throw your ideas it might be helpful. Thank you
Well, this is probably not the right place to answer your question but there is no problem in using $watch in AngularJS.
But, using setInterval and continuously polling your server will be expensive and is a waste of resource. You should probably go for the something called WebHooks.
Resources:
https://en.wikipedia.org/wiki/Webhook
http://www.webdesignermag.co.uk/automate-mobile-app-development/
Since you are developing a PhoneGap application, you can also use the Push Notification concept of Android and iOS.
If you want to let the server update your client, without the client repeatedly asking for it, then you will need to use websocket libraries. If your server is not able to supply a websocket service, then i fear that doing a $http.get every certain timeperiod is your only option. But yes it sucks, because of the often unneccesary data travels.
Here is current workflow:
In django admin someone adds data to model/form.
That starts
python code which runs completely in background and can take up to
5min to finish. Without console access they can't see what's going
on.
They have to wait and refresh site to see results.
I am thinking about something like displaying "progress"(done this, done that, error here) via bootstrap's notifications (js).
Have hard time wrapping my head around how to get data from python to JS(first time doing this) would appreciate any pointers or useful links.
Edit: I found this video: https://www.youtube.com/watch?v=PsorlkAF83s explains it great detail if anyone will be interested in the same thing.
If you could mention how far you achieve then it will be easy to figure out the answer... Anyway my answer is general at all...
First you have to use signal for tracking the database if any new entry it will activate and trigger your python code...
Secondly the best way to communicate with frontend is websockets and recent Mozilla Support for Django promise websocket into the core.
follow this guide for more info about the django channels
Basically, I have created a NODEJS app that uses Jade as its templating engine, along with Express and a MySQL database.
I am looking to create a new page which allows user to share a portion of text, and then a div underneath it named "Wall" will update dynamically with the new status.
Basically, it would ideally be similar to Facebook where something is typed, shared and then the page updates below dynamically. I'm also looking to have the wall page update when a new post have been shared from a users friend. All updates shared by the users would be sent to a database.
I have conducted a lot of searches but seem unable to gather a right answer.
I have narrowed it down to the use of either of the following: JQuery, Ajax, PHP.
Since the site I am building is built in JS - what is my best option?
I'm pretty new to all of this, but I assume when a user clicks share it calls a JS file which then stores the update in the database. But how do I get my "Wall" to refresh upon new content?
Any help greatly appreciated.
You've posed a conceptual question. So I'll do my best to explain some of the conceptual options you can choose to further explore and do your own research on how to best implement it with your project.
You have two paths to go here.
You can have your own wall update (do a refresh / re-render on the UI side) upon a successful AJAX write to your database, this would be something you implement in your AJAX callback function - basically the JS function that gets executed after your write request (submitting the new post) to the database returns successful.
A whole other branch of options you could explore, is implement either of the following options to basically "listen" in for changes server-side, and have the re-rendering react as the callback you use:
Polling - basically issue a request every X number of
seconds to check if there have been updates, or change of state on
server-side.
WebSockets - checkout Socket.io. Through this you can "push" messages from the server-side to your clients. As a note, WebSockets are not universally supported in every browser and from past experience I've found WebSocket protocols even differ by browser versions. So if you need universal support, I'd go with a polling method.
Good luck on your project, hope this helps!
Use...
setTimeout(function(){
/* update wall here */
}, 1000)
to poll your "Wall" backend and updated the content.