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.
Related
I have to access data from MySQL database which is updated dynamically without refreshing the page. Example: A user requests a service and the details are stored in the database. When the admin accepts the requests it should be updated from pending to accepted on the user's web page without him refreshing the page.
This can be accomplished by using ajax.
Since you did not provide any code or a detailed explanation of the enviroment you want to implement this in i can't help you with the specifics but i can point you in the right direction.
the easiest one is using jquery and its ajax api.
Link to jquery documentation
But since i do not see jquery tagged in this question i assume you have your reasons not to use it. The best alternative. in my humble subjective opinion is Axios Link to Axios github page
you can also use the native XMLHttpRequest [backwards compatible with older browsers] And fetch native api's. but these are harder to implement as a beginner.
Try Ajax.
With ajax you can call without refreshing the page.
This can be accomplished by Ajax, but you need to query in intervals to see if data has changed.
A better approach would be, if you have access to CRUD methods in your codebase, then write a trigger that whenever CRUD operations happen, you will call the web service to refresh the page.
For example,
Consider GIT , when ever you push a change, if anyone looking at the pull request will see a msg that it is outdated and needs to be refreshed
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.
I'm working on a project which needs to load via AJAX some HTML information on the page.But I'm not quite sure how to load that information.
I don't know which method is better for me:
1) Load the entire HTML with AJAX and then just append it to the page
or
2) Load only the data with AJAX and then build the HTML using Javascript(+JQuery)
The one I tend to use is the first method because it's the easiest one but also it is more expensive regarding the memory (the biggest file I have to load has about 7kb which is not too much)
The second one which is the hardest, involves a huge Javascript (Jquery) code to build the HTML(I have also to load the attributes for the element).And because I have lots of different HTML code to load I have to make lots of conditions (e.g. one for a button, one for a title, one for a textarea etc) and also I have to create variables that containes that HTML.
My question is what method is the best to use in my case?
I would always stick to the solution where I cleanly divide data/logic and view. This would probably the case in the first alternative. Making changes to HTML generated with JavaScript is quite hard.
I'd suggest another option: Use client side templates. Load the template and the data with an ajax call and then fill out the template using javascript. There are some libraries out there for this scenario.
I can imagine a couple of developers working: A full-time back-end developer and a full-time front-end developer.
The BE developer has to send some data for the FE developer to display it right. Thinking of programming as easy as possible, he chooses the first method described by the OP. Everyone is happy.
A few months later, the presentation of this very data needs to be updated. The manager quickly calls the Front-End developer, which says:
"Uhhh... No can do. The entire data already comes formatted directly from the server."
Oh noes! Would this have happened if the data came only as RAW DATA from the server? I wonder =)
the second method:
Load only the data with AJAX and then build the HTML using Javascript(+JQuery)
is much appropriate, one main advantages of these method is your ajax response will become faster.
Also, it is more logical to separate the logic from design.
Note: always the best solution is depend on your specific case.
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.
Web-Applications these days make extensive use of Javascript, for example various Google Products like Gmail and Calendar.
I'm struggling to how NOT having duplicated logic server and client side.
When requesting a page or state of the application, i would prefer to send the complete UI, meaning: not just some javascript, which in turn makes a dozen ajax requests and builds the user interface.
But here lies the problem, the logic deciding what to show or not has to be written once in the server-side and once in the client-side language.
Then i was wondering if it was somehow possible to process your javascript logic server-side and send the whole to the client, who in turn can continue using the application with all the advantages of a responsive ui, but without disadvantage of the initial loading/building of the user interface due dependency of background ajax requests.
I hope the explanation of my problem is a bit clear, because i'm not the most fluent English writer. If you understand what i mean and if you can describe the problem a little better, please do... thanks!
So my question is:
Is something like this possible and or realistic?
What is your opinion on how to tackle this problem?
;-)
When we started our web app, we had the same kind of questions.
It may help you to know how we ended:
The backend (business logic, security) is totally separated from the frontend (gui)
frontend and backend communicate through JSON services exclusively
the JSON is rendered client-side with the PURE templating library
and the backend is Erlang (anything streaming JSON would be ok too, but we liked its power)
And for your question, you have to consider the browser as totally unsafe.
All the security logic must come from the backend.
Hiding or showing some parts of the screen client side is ok, but for sure the backend decides which data is sent to the browser.
Seems you describe Jaxer.You can write everything in JS. Also, there is GWT that allows to write whole thing on Java
Then i was wondering if it was somehow
possible to process your javascript
logic server-side and send the whole
to the client, who in turn can
continue using the application with
all the advantages of a responsive ui,
but without disadvantage of the
initial loading/building of the user
interface due dependency of background
ajax requests.
Maybe the apps you're looking at just use Ajax poorly.
The only content you can pre-process on the server is the content you already know the user wants. For example, in an email app, you could send them a complete view of their inbox, pre-processed on the server and fetched with a single request, as soon as they log in. But you might use AJAX to fetch a particular message once they click on it. Sending them all the messages up front would be too slow.
Used correctly, AJAX should make your pages faster, because it can request tiny updates or changes of content without reloading the whole page.
But here lies the problem, the logic
deciding what to show or not has to be
written once in the server-side and
once in the client-side language.
Not necessarily. For example, in PHP, you might write a function like displayWidgetInfo(). You could use that function to send the initial widget information at page load. If the user clicks the widget to change something, send an AJAX request to a PHP script that also uses displayWidgetInfo() to send back new results. Almost all your logic stays in that single function.
Your instincts are correct: it's bad to duplicate code, and it's bad to make too many requests for one page. But I think you can fix those problems with some refactoring.
I understand what you're saying.
But I don't think you should be having much 'logic' about what to build, on the client side. If you did want to go with a model like you're proposing (not my cup of tea, but why not), I don't see why you'd end up with much duplicated.
Where you would normally show a table or div, you would just output JavaScript, that would build the relevant components on the client side.
I would consider it just as another 'View' into your data/business logic model.
Have you go a small example of a problem you're coming up against?
I understand your question in this way:
Suppose we have an html form on web-page. There is a field for name and surname. We have to check it for validity both on client-side (with JS) and Sever-side (on php script while processing form inputs). So here is the duplication - regex check on both sides. So what is the way to prevent it and combing these logics?