Our great sponsors
-
jquery_jeditable
Discontinued jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Now it's time to look at the front-end. I mentioned before that the web page was designed using Bootstrap. And one of the nice things about Bootstrap is that it uses jQuery for all of its front-end cleverness. So it's likely that a page that uses Bootstrap already loads the jQuery core library. We just need to look for an add-on that will support the feature that we need to add. A couple of minutes with Google led me to jQuery-editable which does everything we need.
The code for this demo app is available on GitHub and in that version you can edit the client name and email address, together with the project name.
Now it's time to look at the front-end. I mentioned before that the web page was designed using Bootstrap. And one of the nice things about Bootstrap is that it uses jQuery for all of its front-end cleverness. So it's likely that a page that uses Bootstrap already loads the jQuery core library. We just need to look for an add-on that will support the feature that we need to add. A couple of minutes with Google led me to jQuery-editable which does everything we need.
This is a very basic Dancer2 application. There are two tables, called client and project. I've used Dancer2::Plugin::DBIC to make it easy to access my database from my application. There's a single route that displays this page and the page has been made to look reasonably well-designed by using Bootstrap.