I need to read a page from the server to get the data of an element that the server will dynamically change.
I don't want to re-display the entire page -- I just want to read from the server just the single element that changed, and only re-display that single element.
This is because it is a vxworks server page and the single element will be a dynamically chaning windmark (vxworks's method of exposing vxworks data to a web page).
I never worked with vxworks, but I think an Ajax request will also do it in this case.
With Ajax you are able to load specific elements of your site asynchron. This means the whole site doesn't reload, only the element.
Normally I use the JQuery framwork for this, as it easier to use.
For more information check it here: http://api.jquery.com/jQuery.ajax/
Just load the jQuery library and make an ajax request to fetch the data.
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.get('/your/server/path/of/the/data, function(data) {
// do sth. with the data, e.g. insert the data into your element.
$("#elem").html(data);
});
})
</script>
Your HTML should include an element whose id is "elem" to display the data.
For more information about jQuery, visit http://jquery.com/.
Related
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.
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
I have an web page which displays data selected by a category.
The categories are listed in one page (categories.html) and the data is shown in another page (list.html).
Instead of reloading the whole page (list.html) to display the data whenever a new category is selected I want to write a public method which can be called from (categories.html) so that only the data is fetched alone but not the whole list.html page again.
I'm using HTML5 + JS + CSS (JS as in jQuery and Dojo). Is this scenario possible?
I cannot combine both categories.html and list.html as a single file, as I have multiple list.html files for displaying various data for the selected category.
Thanking You in advance...
You can use $.get or .load with jquery to get remote html content
$('#containerDiv').load('list.html')
or
$.get( "list.html", function( data ) {
$('#containerDiv').html( data );
});
from javascript alone I don't think you can do this but you can use any server side language you like for example php.
first you have to bind the click event or any event which is triggered when category is selected and in that event's callback you can use jquery ajax method to call the php script. You have to pass the desired data for example the category name selected to the php script through ajax. Now you can create a html snippet file if you want to simply append data to list.html.
in the js script for list.html you can put an interval that will check for the for the snippet file after say 1/2 seconds and use jquery get or load ajax methods to fetch the snippet code and add it to 'list.html'
I am looking for a very similar solution described under Q: How to get a table cell value using jquery? but in case where table is actually on another website within same domain (no server side scripting is available).
I will appreaciate your help.
If you can make an AJAX GET request to it (that is, if you're not impeded by the same origin policy), then you can use jQuery's .load() function.
You essentially pass the function a resource and a selector, and it will fetch the resource and parse out the content of the selector and load it into whatever you called it on, then on complete execute a function that you also pass to it. For example...
$('#emailAddress').load('index.html p.contactInfo span.emailAddress', function() {
alert('loaded new email address');
});
What this will do is:
Find an element in the current DOM with the id "emailAddress"
Make an AJAX GET request to index.html
In the response, find a p with the class "contactInfo" which contains a span with the class "emailAddress"
Set the content of that span to the originally selected element (id "emailAddress")
If you want to load information from another page on your site, you want to use .load() via jquery.
$('#ValueContainerOnYourPage').load('SomeWebPage.html #SelectorForTheElementYouWant');
That will take an element on a page and load it into an element on your page. Once you have this information you can use the methods in that other post to get the specific data you want.
You can read more about load here: http://api.jquery.com/load/
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.