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.
Related
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.
I am currently working on my self-project using Node.Js (Express) + MongoDB + Javascript/Jquery + HTML (using EJS as my template engine).
Currently I have some knowledge of sending data from Node.js router to Views and sending form data from Views back to router using "POST" and "GET" method.
I was wondering if there are other methods of sending a data from Views to Node.js router without going through
<form action="/" method="POST">
...
</form>
methods...
I have no knowledge on Angular2 and REACT..
For example, I am trying to send back the updated data from Views (probably using Jquery's editable() plugin to simply edit a text that was generated from MongoDB and send the updated contents back to server so I could update MongoDB
and save contents based on updated contents.
I feel like using a form should be only done once when I want to add new stuffs into DB...please help me out! Some of the stuffs I am asking are vague but these are the best I can explain. Or learning Angular2 is the best approach Lol ?
It sounds like you want to learn about $.ajax (if you're using Jquery) or XMLHttpRequest (if you aren't). That is significantly more versatile than forms (though you still should use a form to hold the entry fields; just don't give it an action if you're using a JavaScript-based AJAX call instead).
If updating an existing entry, you probably want the PUT method.
I need to insert a product into a sql table.I'm using kendo UI grid and angular js.
How do i validate if the product is already there in the database before inserting it.Database access is using webApi method?
can anyone helps here?
Thanks in advance?
One option (that may not fit your requirement) would be to expose a Upsert method (you would typically do this with the PUT verb). Then, if it doesn't exist, it would create it. If it does, it would update it.
However, if you want to perform a POST and receive and error for existing records, a typical response would be 400 - bad request. It isn't clear what you are using on the server-side. If you are using ASP.NET Web API, this would result in an invalid model state and return a BadRequest (400).
I currently have a spring mvc app that gets a list of users from a database and displays their information in a table using JSP to basically loop through each object in the list and create a table row for them.
Each user has an expiry date attribute as part of their record in the database. What I want to achieve is basically a button that when toggled shows or hides all users that have expired (i.e. their expiry date is less than today's date).
For this I am trying to use AJAX calls to my controller to fetch me all users expired or not OR only users that haven't expired depending on how the button is toggled.
What I would like help on is the best way to achieve this as I can think of a few nasty ways of doing it like having a separate page and refreshing but I am confused on a few things.
Should I just ditch the JSP looping through to make the table and make a method in JavaScript that creates that table when given the data? If so how do I get the data from the controller to JavaScript, can an AJAX call to a controller return me a list of my user objects?
My best guess is that instead of adding a list of objects to a model and letting JSP do the work, that I instead return a JSON with the data and use JavaScript to build the table. I can then call an update method to re-build the table.
You are correct. You have 2 options:
Have AJAX call return html (i.e. jsp) for the table and then replace
the body of the table
Use JavaScript to build the table and then
update the table with AJAX call which returns JSON.
If you want to get more sophisticated, you could use a JavaScript framework like Knockout.js which would let you mark up the table and refresh the table without too much of JavaScript writing.
Blurgh I'm not sure why this question has received so much attention, especially now in the days of angular but if you are struggling with this then I would strongly recommend the following library:
https://www.ag-grid.com/
In my MVC site I am displaying data from my model in a table in the view. On the first column (which is a unique number within the model data) I have made it into a click-able link that displays an alert box using jQuery.
What I would like to do is when the link is clicked it queries the model for another piece of data using this unique number and displays that in the alert.
Would someone be able to help me with the query I would need to write?
What you are looking for is Backbone.js
http://backbonejs.org/
What you describe is a perfect example of a collection of models, by clicking on one of them you want to fetch the full model from the server.
With Backbone.js this is easy made and whats even better, you can easy save changed date without writing complex code to do it.
var Model = new Backbone.Model.extend({
url: 'www.call-this.com/to-fetch-from-server/1'
}).
//gets the data from the api
Model.fetch()
//sends data to the same defined api via post
Model.save()
You might have great fun with Backbone ;)