hood.ie with couchDB method to refresh pages with DB change - couchdb

I've started using hood.ie to make a web app.
I wanted to ask is there a convenient way to refresh pages whenever data in the couch db changes?
Thanks.

If you have a function that renders your page, like render, you can do this
hoodie.store.on("change", render)
The "change" event will trigger every time something changes in your data, be it because you called on of the hoodie.store APIs, or because of a changed synced from remote

Related

Update HTML page on mongodb data change

I want to update the HTML/pug page of multiple users when particular data changes in my MongoDB database. A user(A) follows another user(B) (whose data is stored in a different collection). When user(B) updates something, user(A) should see the change. There can be multiple people following the same user, and all the people following the user should see live updates.
I tried looking into socket.io but it doesn't look like it is the right thing for my purpose.
Your main options are either websockets (socket.io), server side push notifications with http2, or polling with http.
If socket.io seems overkill, server push notifications probably will too.
You can poll instead. Ie, send an http request from the client at regular intervals, like every 10 (or whatever seems suitable) seconds and update the page based on the response data
You’ll need to use JavaScript on the client for this. Pug templates render just once on page load. If you want dynamic updates after the initial render, you need client side JavaScript in all cases.

How to reload Angular app (All Pages) after every few seconds

I'm currently working on Angular,Mongodb and nodejs as backend. But problem is whenever I add something like image or any entry I have to refresh the angular page to show the changes.
So is there any way to automatically reload every page of an angular app?
Also I would like to add that it's a group project so if another partner enter any image (image path) into data from his/her side I dont get the image as image doesn't not existed in my laptop and visa versa.
Is there any other way to reflect the image both the side even if it doesn't exist in each other's memory ?
You could always add a reload function on a timer:
setTimeout(window.location.reload.bind(window.location), 250);
But I would argue that this method isn't conducive to a good user experience though - window reloads are jarring.
A better option would be to create an observable bound to changes in collections on your database, and reset the image holder HTML based on events from that observable.

Node.js application not rendering mongoDB collection after model.find()

I'm experiencing an issue in my node application with accessing the contents of a mongoDB collection via mongoose.
this problem only ever happens the very first time my application makes a call to the database collection. what should occur when the user presses the submit button, is that the contents of the collection should be added dynamically to the DOM. However, this does not occur. but when I check the collection via the command line interface, the user submitted data is there, and then when I press the refresh button on the browser (which hits the same route the user was redirected to upon initially submitting the form) the data renders to the page like it should have the first time.
When I noticed this, i tried starting from scratch. I dropped my database, restarted my server, but this time, I used robo3t to create the db and the collection before I started my app and filled out the form data, and viola, when I submit my data and hit save, the information gets saved to the collection AND rendered the the page successfully the first time.
So i went and looked at the different Model methods provided by mongoose and thought maybe I just needed to add a function call to initialize the collection sometime before calling Model.find() but everything i'm looking at tells me that the collection is already (obviously) initialized when you call mongoose.model()
so i'm a little confused about what to do in order to make sure my data gets rendered to the webpage the first time the user submits information, rather than after refreshing.....i've been careful about awaiting all the async functionality but maybe I missed something?
the repo is here in the unlikely case someone wants to clone this and try to recreate the situation. Let me know if there is more information I can provide
https://github.com/Funkh0user/TripCheq-Travel-Assistant
Thank you.
I Solved it. I needed to rearrange some things such that the block of code responsible for doing some computations and then sending the result back to the application was in the callback for model.find()
Thanks!

Save the state in customised search

I was viewing this website which has an awesome customized search options panel. I was wondering how can we remember the state of checkboxes and textfields when the query returns the results and HTML page renders. Take this page for example, it saves the user's selected options when the page refreshes. I want to implement this feature in Node, Mongo and Express.
There are two ways you could do this. If you want to persist the options long term, when the user selects something, you'd send a POST or PUT request to the server and have the server save the settings in Mongo. The second option (which I think is a better choice here) is to just use local storage on the client. See this documentation for how to use local storage.
With local storage, everything is client-side, so you don't have to worry about the latency and complication of dealing with the server. The user will have their options saved on that computer until they go into their browser settings and delete it.
Edit: I think what you're looking for is session storage. This is similar to local storage but it gets reset when the browser window closes or the session expires.

Web design/development - alternative to manually refreshing the page?

I wonder if there is a better way to write my PHP sites without always having to manually refresh the page I'm working on. Could there be a program that monitors a folder and automatically refresh my browser whenever a change occurs. I'm developing on a local machine with a local amp stack by the way.
You can achieve this by ajax. In ajax you can check the changes in database if any new record added you can call
location.replace('');
in ajax success
Use Ajax poll (checking for status change on server with time intervals) and when the change occurs, either refresh the page with Javascript or replace the part of it to reflect the change.

Resources