I am using GET and POST methods for getting data from the server and getting response using request.send(object);.
However my requirements changed, I need to use request.render('pageName',object); but the render method refreshes my page but I only want to refresh a particular <div> section. I read on this link https://www.npmjs.com/package/ejs but I am not able to refresh only particular section without refreshing the entire page.
If you want to redraw only a part of the page then you probably need some kind of client-side rendering for your templates. You fetch the data from the server using GET just like you mentioned and then do the actual drawing of the page on the client instead of sending HTML with request.render.
Related
I want to render a page (output.ejs) and then download that same page all with one button click. In my POST method I redirect to "/output" where the GET request renders output.ejs. However I cannot call res.download("") after that render (something to do with it being asynchronous). What's the best way at tackling this. BTW I am using wkhtmltopdf as PDF generation which needs to happen AFTER the page gets rendered since I am sending data to it.
Best
Try res.render('/output').download()
I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.
If you work with AJAX and you change the HTML on the server, the new ajax call on client side will fetch you the new html code.
In AngularJS, I need to refresh the page to see the new changes, I cant simply change routes or use $scope.reload() and see the updated HTML.
But the problem is that I loose all my form fields (the $skope is reloaded) when I refresh the page.
I know I can save the scope in cookies or local-storage, I will probably use that in future, but right now, is there any way that I can re-render the html without reloading the page?
Here we have a <div id="content"> and inside it AJAX loads data from the server. We have preloaded JS scripts in the whole file.
Some of the server's AJAX answers are whole forms. That forms have the same ids, but different structures. What is needed is to pick the data from freshly baked forms came from the server via AJAX, using JavaScript and create a kinda queryString to send its data again to the server via AJAX itself.
What has been tried:
I put a code which is getting data from the form on the page using JS. It works great when the form is a static part of the page and i loaded within the initial DOM loading, but, after AJAX re-loading the real DOM is differ than that in the cache, which has been initially loaded with the page.
I tried to put JS code into the answer from the server with the form. But, it does not work as well. Even simple alert('Hello!') does not work.
I am new in AJAX so, please, do not judge me with all the severity.
Thanks!
If your issue is picking up only the latest baked forms, you can try the following approach:-
In each ajax call of the page, before setting the response content to the desired div, find all objects having class name called 'lastUpdated' (or any other unique class name that you can come up with) and remove all the lastUpdated class associations using the jQuery code
$('.lastUpdated').removeClass("lastUpdated");
Now set the response to the desired div and add the class 'lastUpdated' to this div alone.
Thus at any point of time,
$('.lastUpdated')
will help you pick the data from freshly baked forms came from the server
How should I proceed in achieving the following:
I need to get the data from another server which is a jsp page it has the data related to the information i want to show in tooltip. The code for this is working and I can make ajax call to get the response.
The concern is that I want the contents of qtip library to fit in the page since the page doesn't allow cross domain contents. If I will try to just reference the contents of qtip saved on my website(the domain is different from the page which I am using) it wont allow to do this. so is it fine embedding the contents in the main form or there is some other optimal way?
Similar question was asked:
How to display information returned by ajax call in a tooltip
If you can't reach cross domain via AJAX you can always uses an intermediary script (in your case Java) to output a buffer containing the information you want in the qTip.
Script calls digest.jsp?params=someparameters
digest.jsp fetchs the information from any domain it needs.
outputs the information in a buffer in XML o JSON
with javascript you parse the information an put it in the option attribute.
If it doesn't work for you nor you want to do it you can always relay in putting the information in each title="" attribute in each option.