Calling Methods from Different HTML Pages - javascript

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'

Related

How to refresh a page once it's opened from a previous link?

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.

Capture "Form Data" instead of querystring in javascript/jquery

I am trying something different to check if it is feasible. Otherwise best alternative way is to send data using querystring.
I have a html page which has list of students. when user clicks on perticular student for edit, this html page should take student ID and redirect to another html page, which will load respective student details for editing.
Here, I want to send data using "POST" method to hide studentID from URL (querystring), so I created a hindden form (method="POST" action="edit.html")on list html and put one hidden field under it. on lcik of edit button on list, I am setting value to hidden field & submitting form.
Now this redirects properly to edit html page and also when I see this flow in chrome developer tool, I can see this form value under headers sections - Form data. Now I am trying to fectch this form data on edit html page load e.g. in JQuery under document ready function or simple in javascript.
with alternative option if I create hindden form (method="GET" action="edit.html") then the hidden field value which I am setting is showing up in query string and also in chrome developer tool, it is showing under headers - query string parameters. This query string parameters can easily be accessed using location.search and then play around and will get expected value.
Here id I have taken just example, however in actual scenario, I need to send multiple values or may be objects which I dont want send thrugh query string. So I thought to submit form with POST method and retrive values on next HTML page load thrugh javascript on jquery.
HTML
<form style="display: none" action="jquerywebapidoestudenteditpoc.html" method="post" id="formEdit"> <input type="hidden" id="id" name="id" value="" /> </form>
JQuery
$(document).on("click", ".edit", function () { var id = $(this).data("id"); $("#id").val(id); event.preventDefault(); $("#formEdit").submit(); });
If anyone came accross this situation or implemented it in very appropriate way, would be very good.
In other words, I would like to implement is:
list.html will post data to server (.NET Web API)
At same time list.html will redirect to edit.html
On load of edit.html, response from server will be loaded on page.
Query string is part of the "identifier" of the subsequently loaded page (or any other resource). As such, it is accessible from the page. Data sent in the body of a POST request are different - they are meant for the server only and are inaccessible from the subsequently loaded page.
However, if you wish to make the data sent using POST available to the next page, you can always inject it into the page manually. Using PHP (as an example), it could look something like this:
<script type="text/javascript">
var postData = <?php json_encode($_POST); ?>;
</script>
If you just want to pass data from one page to another and leave the server out of it, you may either use GET (query string) for exposed communication or use cookies for "hidden" communication.
Bsically, what I understood after going through lot many blogs ans sites, I have to have a client controller (javascript based) which will take care of which view has to load and post data.
This I was able to achieve using AngularJS, where I can configuration can be done for routing and by same, I can post data & receive its whatever output on another view/ form (so called page).
e.g.
$routeProvider.when("/orders", {
controller: "ordersController",
templateUrl: "/app/views/orders.html"
});
AngularJS Rocks !!!

How can I access a JavaScript array in JSP

I want to access AJAX value in JSP. I am able to get the values by using ajax from backend that I need to use in the JSP page.
What I want to achieve is described below:
When a user clicks on any category AJAX call will be made to defaulty, after what I want to load received subcategories in the <div> of the category;
I tried to use AJAX to get values and then in JavaScript i am able to get the values in an array. I tried to store that array in a JSTL tag like <c:set var="subCatIds">subCategoryIds</c:set> but I didn't succeed.
The turn of events, as you understand it, is wrong. What I can get from your post is the following:
Initially load the view by a servlet. It doesn't have any subcategories. but all first-level directories are populated;
You want to populate subdirectories on some event, i.e. button click, hover, etc. For that you're sending an ajax request, specifying parent dir as request parameter, for example by $.get(), intercept that request in a servlet, and get the response with subdirectories from that servlet in, for example JSON;
In a callback function you are having a JSON with the data you want. Iterating over it, you'll create the HTML structure you want, and finally you'll set the inner HTML of the initial called div with that content.
If my understanding is correct, just go ahead, do that step by step, and you'll get the desired result.

How to get javascript pagination data via jquery?

I need a web sites some data which I want to parse via jquery. I am able to do everything except the pagination which contain javascript anchor link.
(source: grinshare.com)
2
I want to load the second page (certain selector, say "p #listo") in a paragraph in the 1st page via ajax. Can I do this via ajax? if it is possible, please can you share the code..
Thanks in advance..
Note:
I want to get the 2nd page via ajax...I tried a lot things....
$.ajax({
url: __doPostBack('grdResults$ctl29$ctl01',''),
success: function(data){
//Some function I will perform
}
});
But it reload the page...if I use quotation for url it give error... I tried get, load, post but unable to do it...
You need to have a URL that outputs data and handles pagination on the server side. For example, it could be /mydata/page/3/, and it would grab page 3 of the data and return it in some format (JSON, XML, YAML, whatever).
Then, you can have jQuery send an ajax request on click of each of the items in the pagination controller instead of running __doPostBack().
Switching to ASP.NET MVC would help you.

how to re-load a JavaScript page with re-displaying it

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/.

Categories