Standard way to implement data input table's frontend for Django - javascript

I need to build a website with the following types of data input table.
I want to use html, css, js and bootstrap for the frontend and Django for the backend and SQLite also as Django's default database system. Now I am confused about what is the standard way to implement this type of input table's frontend. I can generally implement a table and inside the cell(means inside <td> tag) I can put another <input> tag to take input data and send it in the database from the user). Or I can use an editable table (Actually I do not know if it is possible to use this type of editable table to send data in the database or not).
Here I need an add row button and delete row icon also like the picture to add/remove the input row if needed, and I don't know how to implement it also thus it will easily reachable from the backend.
So please suggest to me what is the best way and how I should implement this frontend thus I won't be trouble to implement this website's backend also.

You can think of saving the table cell data to the backend on blur.
For this you might need to post data without submitting the form.
You can create an invisible form and submit the edited cell data of the form on every blur with row and column value to backend. You can trigger the submission of form programmatically and doing a prevent default to avoid page redirect.
On loading of the page you can get the whole data and use the framework to create table.

Related

How to save dynamic form to database / edit form back

I've made myself a dynamic form builder using jquery ui that the the user can drag form inputs to wherever they like on the screen and create a report. Now I'm looking to save this to a SQL database. What would be the best way in going about saving the layout of this form and creating a database table from it that the user can then fill in reports and submit them to the database.
How would I go about saving the HTML elements styles like transformations etc. I'd need these as I would like to be able to take an existing form and recreate it if it needs anything to be added/removed.
Would appreciate any suggestions.
How about arrange its fields and data into XML format or JSON then save it to database. You can use XML datatype column for XML format and varchar for JSON in Database.

jQuery Select2 with spring and hibernate

I am using Tag functionality of select 2 in my spring application and hibernate to save it. I am using the AJAX call to save this form.
Till here it is working fine.
My problem is:
How can I populate the data from DB and display it in screen as tag so that user can update it. (this data has id and text)?
How can I save this data in DB using AJAX call. Basic form is saving but for this select2 data I am able to get only keys. I need proper Entity so that I can save/update it directly in DB?
an example will be very much appreciated. right now, I am not putting my code there. Please comment n this post if you want me to post any code.
FYI: I am new in spring and hibernate.

Sending Html table data by ajax to php page

I am using laravel framework, I have one index page in that I am retrieving dynamic table from another page by ajax(using div). Then now I am allowing user to edit table values so now I want to send modified table data to next php to process some actions on those values. So how can take those modified table values and how to send it to next php page by ajax or php script. And how can I assign those ajax values to php varriables.Here is the snapshot of table
There are 2 jQuery datatables packages for Laravel (that i know of) which handle this kind of thing for you. No need for HTML in AJAX responses. Im using the one by Chumper and it makes things a lot easier. You just need to provide the data in your controller or route, and add the helper to your view.
https://github.com/Chumper/Datatable
https://github.com/bllim/laravel4-datatables-package << (haven't worked with this one)

How to Save and Access Checkbox Data HTML?

I'm trying to create an online store, and this is my first HTML endeavor (I've got the basics but that's all).
Basically, I need to know the code required to save a customers selection when they click a checkbox.
Then I need to be able to search for that data on a cart page and pull up the value.
Here is the code for one of my checkboxes:
<li><INPUT TYPE="Checkbox" Name= "printoptions" Value ="79.99">18” x 24” - $79.99*</li>
If they select this checkbox, what coding do I need to be able to get that value to show up on a separate page?
Unfortunately using HTML alone you cannot save information as HTML is just a markup language and can only display information.
In order to do something with the data you will need to use another language such as PHP, Ruby or Python.
In order for the data to be saved in any way, it needs to be either sent to a server where the information will be stored in a file or database (server side), or the data can be saved into a cookie (client side), or it can be kept displayed on the next page using either POST or GET.
In PHP you need to define an "action" and a "method" for the information to be saved in anyway. For example, if you wanted to POST the information being input to the next page, you would put:
<form action="process.php" method="post">
I recomend using tizag.com to learn PHP as it teaches you the basics and enough to create a web form.
Good luck.

page navigation without losing form field data?

I would like to know instead of using PHP Sessions to save the field data, is there any concept in Ajax or jQuery, to navigate between lot of form pages, but to save the form data until the user submits, if user submits, all the information present on different pages should also get submitted.
you can try the form wizard its a jquery plugin : http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
There are multiple concepts of that type.
You can use JavaScript with the jQuery library to paginate a huge form using functions for HTML elements manipulation. That way, you don't require the user to create another HTTP request, and thus the information entered on other pages doesn't get lost when the user switches pages. The form can then be submitted using AJAX or a normal, "front-end" HTTP request method.
Also, you could try saving the entered information in a cookie with JavaScript and jQuery.
Here are some examples of jQuery pagination:
http://dl.dropbox.com/u/4151695/html/pajinate/examples/example1.html.
You can easily apply these concepts with anything, including HTML forms.
And here are various plugins with source:
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/.
A cookie is nothing more than a plain text file that is stored on a visitor's computer, which means you can easily encode and embed your form data into it.

Categories