i have the below scenario:
There is an arraylist of Java Pojo which stores data from db. The pojo has 3 fields and after fetching the data from db, the size of arralist is 250. I am storing that data in application scope. Its a spring mvc application.
I have created an end point in a controller class which filters the arralist using collection streams and returns the list of string as json.
I have implemented jquery autocomplete at frontend jsp and javascript, and i am fetching the source from this end point through ajax call.
My question is, whether ajax call approach is good or should i filter the data at the javascript code only.
After implementing ajax, the xhr call is taking on an average 300ms in local.
Note: IE11 support is also needed.
Related
I'm creating an application that needs to pull certain data to show it to the user. This data is pulled via a JavaScript function that ideally I'd like to have on the server side, not on the source code of the page.
The flow should be:
User chooses 1 parameter in the website and clicks ok
Send a POST request to Django with that parameter
Django's view uses that parameter to pull another 4 parameters from the Django database
Somehow use this 4 parameters in the JavaScript function to get some timeseries data
Pass this data from JavaScript to the view, and from the view update the browser's template without the user refreshing the page
How can I pass the 4 parameters from Python to the JS function, and then the result of the JS function back to Python?
The reason I need to use JavaScript and not Python for retrieving that data is because JS has a specific library that would make my life so much easier.
I am doing a POST-request using jQuery which seems to succeed. But how can I work with that on server side and modify the response?
Do I need another servlet because the Faces Servlet is just not designed to deal with this?
$.ajax({type:'POST', data:{"status":status}, success: function(response) {
alert("Qapla'");
}});
It is used for the following process:
user inputs address and hits commandButton which invokes JS
JS retrieves geodata using google maps and sends it to server (which I am considering to use the above code for)
the servers responds sending some close places from database
JS retrieves exact distances using google maps again and sends them to server
server redirects client to next page with results
There is one case where a failing validation for the used inputText might be needed: At point 2 the server rates the geodata as not valid.
If sending the ajax POST by usual JSF means (UICommand component, jsf.ajax.request(), etc, in flavor of <h:commandButton>, <p:remoteCommand>, <o:commandScript>, etc) is really not an option for some reason left unspecified in your question, then you'd indeed better create a separate servlet or even JAX-RS or JAX-WS webservice listening on those requests and returning e.g. XML, JSON, etc. JSF is a HTML form based MVC framework not a web service framework.
You only need to take into account that you deal properly with JSF view state when you manipulate the HTML representation of JSF components afterwards. E.g. when you use custom JS/ajax to enable a disabled HTML button as generated by <h:commandButton> without involving/notifying JSF, then it won't appear as enabled in JSF component state and its action would never be invoked.
See also:
How to use Servlets and Ajax?
How to generate JSON response from JSF?
How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
I've developed a web application with the concept of Single Page Application but none of the modern techs and frameworks.
So I have a jQuery page that dynamically requests data to localhost - a Laravel instance that compiles the entries in the DB (within a given time interval).
So the client wants to see all the entries for last week, the app works fine. But if he wants to see the results for the whole last month... well, they're so many that the default execution time of the php ins't enough to process all the data (30 seconds). I can easily override this, of course, but then the jQuery client will loop through these arrays of objects and do stuff with them (sort, find, sum...). So I'm not even sure jQuery can handle this many data.
So my question can be broken in two:
Can laravel ->paginate() be used so the ajax request of jQuery can also chunk the data? How does this work (hopefully in a manner that doesn't force me to rewrite all the code).
How could I store large amounts of information on the client? It's only temporary but the users will hang around for a considerable amount of time on my webpage, and I don't want them to wait 5 minutes every time they press a button
Thanks.
If you want to provide an interface to a large amount of data stored in a backed, you should paginate the data. This is a standard approach, so I'm sure your client will be ok with that.
Using pagination is pretty simple - see the docs for Laravel 5.0 here: http://laravel.com/docs/5.0/pagination
In order to paginate results in the backend, you need to call paginate($perPage) on your query instead of get() in your controller, like that:
$users = User::whereIsActive(true)->paginate(15);
This will return paginated result with 15 records per page. Page number will be taken from page parameter of the request. In order to get 3rd page of users, you'll need your frontend jQuery app to send a request to URL like:
/users?page=3
I don't recommend caching data in the frontend application. The data can be changed by some other user and you won't even know about it. And with pagination, your requests should be lightweight enough to stop worrying about a request sent to fetch every page of results.
Not sure if you're subscribed to laracasts but Jeffery Way is amazing in explaining features of Laravel and I highly recommend his videos.
In short you can paginate the results, then on the view when you call the foreach on your items you can array_chunk() the results to display them how you need to. But the paginated results are going to be fetched using a query in the URL, and i'm not sure that is what you want if you're already using a lot of jQuery to keep everything on the same page.
https://laracasts.com/lessons/crazy-simple-pagination
But assuming you're already paginating the results with whatever jQuery you've already written for the json data...
You could also use a query scope to get the data you need to for the amount of time to scope to create a simple api to use with ajax. I think that's probably what you're looking for.
So here's what I would do assuming you're already doing some pagination manually with your javascript.
Create a few query scopes to filter the data for different lengths of time
Create simple routes to fetch results from URI using the query scopes
Get the json data from the route preforming an ajax requests to the URIs created
More information on Query Scopes: http://laravel.com/docs/5.1/eloquent#query-scopes
I am returning a JSP, which will have a table generated depending on the data attached with the model. I want to convert the table to a JQuery data table after the JSP is loaded. How can I achieve this?
In fact I think it may be more adequate do already use a JQuery Datatable in your JSP from the start and not doing any further conversions when JSP is loaded.
If you are to consider that approach, your work would be to create an integration model between your Datatables component and your controller, which I am assuming is Spring MVC since Spring is tagged in your question.
That being said, your roadmap would be something like:
Create value objects to move datatables parameters back and forth between your JSP view and your Spring Controller;
Create your controller, that are going to handle data requests. This controller must be able to convert your incoming HttpRequest parameters to your value object. If you are indeed using Spring, your Spring Controller would use a customized WebArgumentResolver which are going to read the request and return your VO. This controller must handle your request and retrieve whatever response you might have to provide. Oh, also don't forget to resolve that Resolver in your MVC configuration.
Finally, your response would be a JSON, understandable by Datatables.
This is a great tutorial, which I used the first time I needed to implement such integration. Might fill some details for you.
Best regards.
I'm doing a market/stocks watch web project.
At the server side I have a Servlet and Service on a cometd-jetty implementation.
The Service (CometD Client publisher) sends a JSON published data. i.e. [{"Stock Code":"ABC"},{"Stock Code":"DEF"}]. Time interval of published data is almost every second or even less.
At Front-end, I'm using cometd javascript implementation to fetch the data and render it in html table using jquery.
Questions:
1.) What is the best way to render the data in a table (using datatables plugin) with very fast receiving of data from publisher/cometd server (less than a second each message)?
2.) How can I indicate change in price through hi-lighting table cell when stock price changes? I'm trying to figure this out using js or jquery?
Your help is very much appreciated!
1) The DataTables plugin can use a JavaScript array as its data source. You'll have some sort of method that's processing incoming data; push that into a JS array and then call .dataTable() with that as your source.
2) Inside the DataTables initialization object you can set callback functions at various stages. One of these is fnRowCallback, which allows you to modify the row and the cells within, based on the available data. Grab the data, run your comparison function, and when the conditions are met, modify the cell.
For both questions, there should be sample code available at DataTables.net.