How can I access a JavaScript array in JSP - javascript

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.

Related

If I use ajax to add new elements to the dom, how do I use a url query string to do the same?

I have a project written in php and javascript that allows users to 'crud' images. I use the mvc pattern with index.php being the controller that takes the actions submitted via ajax, and returns the relevant data in a json string.
I am trying to create usable links by placing the query in the url, but I'm not sure of the correct approach.
Until this point every request was made by ajax post, so ajax handled the response which includes creating new elements, updating the layout etc.
If I add ?action=foo to the end of the url I only get the json string as the controller renders everything for the initial page load(javascript resources etc), then simply returns json strings based on subsequent ajax requests. I tried also including the view/home.php with the relevant action code, but this just displays the home page with the json string hidden underneath and this approach will not work when using ajax.
Since the home page is only rendered on the initial page load, putting the action in the url skips the home page and the page reloads with only the json string. Should I add a test condition to check if query was not sent by ajax? If I then reload the home page with the json how do I get the correct js function to handle the json? Or do I need to completely rethink how I structured my code?
switch ($action) {
case "home":
case NULL:
include_once('view/home.php'); //this includes all relevant js resources on page load
break;
case "search":
//retrieve requested data from db then-
header('Content-Type: application/json');
echo json_encode($foo);
break;
}
New elements are added to the dom via javascript functions after the user makes a request using ajax. I'm trying to figure out how to repeat this functionality using a query string in the browser url. What am I missing?

JavaScript: how to pass additional information to source page?

I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?
You could store the data in local storage or session storage, and retrieve it again on the destination page.
So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.
One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.
What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.

How to get value from form in the html page's variable

I am creating a small webpage which contains a drop down. So a user can select a value from it. This is in a form.
When the user selects a value from it say value "A", based on that I want to do a database query say, Select * from Table where value = 'A'. And display the result on the same page, preferably without full page reload.
I can access the value of the dropdown selected in javascript method by calling a method onchange event and doing document.getElementById on it.
How should I pass the value in a variable on the same html page, so that I can send the value to the database?
Thanks for your replies in advance.
This question itself is very vague, but I'll do my best.
You first need (if you don't already have) something server-side that can accept the incoming parameter and return the results from the database. e.g. /some/service/?param=DROPDOWN_VALUE_HERE. Ideally you would hit this service and receive back JSON/XML (something you can work with in the client).
Next, given you don't want a page reload, you need to look into how to leverage AJAX with reaching out to that service and dealing with the results. You should be able to send a request to the service (with the dropdown's value) and receive back something that would allow you to modify the page in a seamless way.
Use AJAX to send a POST request to the server asynchronously.
Using jQuery:
var value = 'A';
// make an HTTP POST request to the 'submit' route on your server
$.post('submit', {value: value})
.done(function(data) {
alert('Server response: ' + data);
}
On the server side, you need to handle the POST request to the 'submit' route and make your database call, and send back a response if necessary.

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 !!!

Calling Methods from Different HTML Pages

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'

Categories