This is more a question of concept. here is the situation, we have a list of objects, and need to show a modal with a editing/adding form for an object. You have around 10 fields, which is better, to generate the form on the fly with javascipt, to make an ajax call and generate the form with the server language then return it as html and show it, or generate the form inline (when the list is created ) and just show it?
I am not asking on how to do it, i can do it in all of the ways i have described, the question is which of these is cleaner and more efficient by today's standards.
The third option (generate server side) is the best, for two reasons:
People with JavaScript turned off can still see the forms. (Make sure you hide them with JS if you're showing them with JS.)
Screen readers will be able to read the forms.
JavaScript is a great tool to enhance UX, but don't rely on it for things to work.
I would use the "on the fly" method or the third. With the first you may decrease Serverload (it's depending of your user-base and the data) and as the normal user has JS enabled it's not a problem.
The third is good because it doesn't requires Javascript enabled, and so even old or mobile devices can display the form correctly.
The second is IMHO the worst as it requires JavaScript and takes the server under more load.
When you don't have a big user-base which needs this form often then use the method which is easier for you to develop and maintain.
Related
I have a dilemma and I guess the best way to solve it is to turn to the community. I have an Add button, that gives you a list of options. Depending on which option you choose it should show a dialog box and a form.
What is the best way to do it?
Have all the forms already coded and delivered and activate the right one (this might mean that I have to repeat a lot of code and it's not an optimized way of doing things)
Load the form through Ajax (this could be a good way if it wouldn't come with the expense of having to fetch the form from the server)
Create it dynamically in Javascript? (the best?)
First one is surely not an option if you have most of the questions same.
Option 2 and 3 have both their plus/minus points.
AJAX Fetching Form
This way, you avoid cluster on the code page, you can hide certain options from users until they select particular option (this can be both good/bad depending on circustances).
Might involve more time in fetching data from another server, but less processing on client side, more on server side.
Dynamic Javascript
Quite opposite of the above, all the form generating rules will have to be in form of JS and thus available in source code. Can cluster it a bit, and not hidden.
More data processing on client side than on server side.
If it was upto me, I would do AJAX one, just because it looks cleaner, but depending on your restrictions/tolerance, you may go for 3 as well.
Second option is same with the first one; to fetch the right form, you must have forms already there.
Third option is good but it is not so edit-friendly. You will come to your code after 3 weeks and BOM!
I can recommend you to AJAX one, even if you write that much of code. But pay attention to this
I've created a jQuery form that people can fill in. When they're finished, they can click one of two buttons to post the form to a PHP file. The PHP file processes the data in the form and put it into the database. The database then has some triggers, and the data is output.
What I'm wondering is if I should submit to the same PHP file regardless of which button they press and just use conditional statements inside the PHP file? Or is it cool if I use a different PHP file: one for either button?
I'm also using the PHP wordwrap() function with <br> as an argument. I'm wondering if I should just be using CSS to word wrap because it may cause problems with handling the data form within MySQL.
If the logic triggered by the two buttons is largely similar, then a single script makes sense - you only have to special-case whatever minor bits are different between the two.
If the two logic paths are fundamentally different, then it may make more sense to have two separate scripts. The choice is up to you.
As for wordwrap, generally you should alway store data in its "raw" format, and only do such processing upon retrieval for display. This is especially true if the data will be used in multiple output formats: plain text, html, pdf, excel, etc... Each has its own word wrapping rules/requirements, and forcing your data to be stored in html-style means you'd just have to undo all that work when dealing with one of the other targets.
Six of one, half dozen of the other on the method. I personally progressively enhance my forms to use Ajax submission to an "AjaxDispatcher" that processes ALL form submissions, but that's entirely preference.
With the PHP, be thinking about the worst case scenario--if someone gets some bad info through or the DB fails, how am I going to tell them of the problem? That's why I use the Ajax method, with built-in return methods for easy notification. It can be done server side too to avoid ajax, it's just not as quick for the user or pretty.
Definitely don't forget the form pre-processing, which is made much easier via jQuery inline validation It makes for more user-friendly feedback about form issues and doesn't "cost" a php hit in the process. It's not a replacement for server-side validation, but a nice added touch.
I would question the need for two buttons. I do UI development in online applications for a living and a recent site "dictated" that we do two buttons for relatively similar paths because the marketing types couldn't understand how similar the paths were. It turned into a giant mess, with multiple different "paths" through the process that just confused the living daylights out of the site's users. Never mind that it resulted in having to write a test routine that had 14 different cases (don't ask!) Depending on your situation, you can draw from hidden fields, combinations of answers, or other methods to achieve a form with just one simple input, which is much more user friendly in the grand scheme of things. It also makes it an easier decision on your part as to how to process the data.
When in doubt, remember that the art of UI is simply making an unfamiliar situation feel familiar to the user despite never having been there before. Now, how many forms have you filled out recently with two different methods to submit, side-by-side?
I wouldn't personally wordwrap a textarea. It could have some unexpected consequences if the user starts resizing your textareas as most modern browsers now allow. HTML actually handles wrapping relatively gracefully, considering it's just markup.
When I first started web development with php, when using POST I would have the page with the form that contained the information and then another php page which the “action” attribute pointed to and hence where the all the processing i.e. database work was done. After making a website with many forms I found that I was building up lots of pages and it was getting quite messy.
Then I started to look for a way to avoid this. I then found that I could post a page to itself and hence halving the amount of pages that I needed to use to submit a form. I did this using the isset() function in php. The problem with this is that the whole page needed to be refreshed.
Even more towards the future I discovered jquery and its use of ajax to submit forms etc. This led me back to me original problem of having too many pages and getting confused with what did what. So now I am wondering (although I’m not quite sure I can make sense of it) if there is a way to combine the two? Can jquery use ajax to process a form which points to itself?
The other options that I was thinking of would be to have one page that I send all forms and actions to, which has all my processing in and determine which section to use based on a switch. I’m not sure of the effects that this would have on performance though.
What views do you have on each of the methods?
What are the pros/cons?
Are any of the methods I mentioned frowned upon/bad practice?
This question has been baffling me for a while now, and so I thought it best to get the thoughts of the experts.
Thanks in advance.
Adam Holmes.
Well the answer is quite simple. Jquery uses AJAX to request pages the same way as you would with a regular form. Thus you can use jquery to post information from the form on the page itself, and then as you would normally with isset() do whatever you want.
The obvious advantage is that you don't need to refresh the page, and everything seems more seamless. However sometimes you will need to refresh anyway, for instance during logging in. The disadvantage is that users with javascript off will not be able to use that form, however from my experience this now mostly applies on mobile devices, and in limited manner even then.
I would say that using jquery/ajax to submit your forms is the way to go, just be sure to provide javascript-less alternative if it is something essential and if you receive a lot of traffic from mobile devices.
Somebody else will probably provide more elaborate answer, so take this just as a little summary.
jQuery can process it, and send anywhere you want :-)
Don't you thinked about using some kind of classes and autoload ( PHP 5 ) ? - it makes choosing in your second option much simpler ( somepage.php?class=Foo&.... )
I am quite new to web development and have a task to develop a web application that will basically show the user 5-15 pull down lists on one page, where each selection will limit the choices in all other lists. The user should be able to start with any one of the lists (so no set selection order) and when the user have selected something in each list or all parameters are otherwise locked by previous choices the user has to press the GO button and some calculations will take place, presenting a database selection. Basically it is a muliple parameter product selector application.
The relations between the lists are not simple, and could need calculated fields etc, and one list could affect the content of several others. The database behind will be MYSQL, probably a single large table, with perhaps 30 fields and 500-5000 rows. I will be using PHP, JavaScript and perhaps AJAX unless you have a strong reason not to.
I have done some research and found three ways to do this:
Send all data to the browser and handle the filtering etc client side with Javascript.
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
Use AJAX to change all list content dynamically without reloading the whole form.
Since I am so new to this I have a hard time telling which way to go, what pitfalls there are etc...
I have some conserns:
A. Slow initial loading. Worst for #1?
B. Slow dynamic response. Worst for #2?
C. Complicated programming. Worst for #3?
D. Compatibility issues for different browsers and plattforms. Have no idea of which method is most likely to create problems...better if I use some Framework?
E. Could I even try to make something at least part-working for people with javascript turned off? (like selecting each list on a new page and having to press GO button each time)? (I think I can tell my users they must have Javascript on so no big issue....) Perhaps #2 is best here?
F. I think the specification of "free selection order" means I have to download most of the database initially, so perhaps I should try to avoid that option.....if I keep it I might as well use method #1, or???
G. It would be best to do as much as possible of the selction/filtering in SQL to allow future extensions by building custom SQL code, so that gives a big minus to #1...
H. Other pitfalls etc???
I have found tutorials etc for all three methods, but if you can point to good resources like this I would appreciate it, especially so I dont base my code on examples that are not smart/good/compatible....
1:
http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
http://javascript.about.com/library/bl3drop.htm
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20523133.html
2:
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list3.php
3:
http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html
http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu
http://www.noboxmedia.com/massive-ajax-countryarea-drop-down-list/
http://freeajaxscripts.net/tutorials/Tutorials/ajax/view/Create_AJAX_Dynamic_Drop_Down_List_using_PHP_-_xajax.html
3+jQuery:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
Now to the question: Could anyone experienced in all these methods help me out a bit, with the evaluation of methods 1-3 above so I can choose one and get started on the right track? Also, will I be helped by learning/unsing a framework like jQuery+jSON for this?
Rgds
PM
I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.
Send all data to the browser and handle the filtering etc client side
with Javascript.
You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).
Send parameters back to the server after each selection and reload the
whole form after each selection.
Probably a littebit Javascript and
most code in PHP.
I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..
Use AJAX to change all list content
dynamically without reloading the
whole form.
By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)
My personal recommendation is to go with AJAX.
Raw SQL or not is really a question of what backend you are using.
You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.
The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.
It's no easy task to make it fully customizable.
The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.
jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.
There are many ways to handle forms. one is to simply submit the form and the get variables on php and another one that i'm thinking of, is to send data with ajax and during this process we can show a dialog and show the information about processing the data with a progress bar.
despite the fact that ajax is faster than the standard technique and sometimes it's easier to use why there's a very few websites that are using the ajax method ?
It's not that you shouldn't be using ajax to post forms, is that you have to "double" your work (for small amounts of double). I usually make a form work with normal submit, and then I override it with javascript. That way you have a non-javascript fall-back, and don't leave anyone behind. Also lok at jQuery's $.post and $('#myform').serialize methods.
There is no intrinsic reason that it isn't used more. It's just that for most websites, AJAX isn't really needed.
Javascript, as a language, should be treated primarily as an 'addon'. Your page should work perfectly without using Javascript, AJAX, or any other browser languages.
What should ideally happen, is when you Javascript loads, it puts in an event catcher that when the form is submitted, it returns false and instead submits it using AJAX. If Javascript is not enabled, nothing every submits false, and the form is submitted server side.
This allows the most compatability, and is the reason people discourage having a lot of Javascript in the actual tags like this:
Go
Some people turn off Javascript, and some old browser might have errors with that onClick event. Heck, people might develop new browsers that omit Javascript completely for one reason or another.
The Point is that Javascript should simply be an 'addon' to the web page, not the heart of it.
(Unless it is a Javascript Application, which does absolutely everything through Javascript. Normal forms however are not Javascript Applications)
AJAX is not necessarily faster, it's not necessarily easier to use, and not all visitors will be able to use it at all (in particular those who have disabled JavaScript for some or all websites). It's also not always possible to reliably show a progress bar for the AJAX submission any more than it is for a traditional submission. Finally, since the server-side code will look about the same regardless of which client-side submission method you use, submitting via AJAX is more effort, which is not always justified.
That's not to suggest that AJAX is a poor technology, or that it should be avoided. However, even forms that have the option to submit via AJAX should also support traditional submissions. After that, which forms you choose to enable AJAX submissions for should depend on where you have the budget (or, if it's a pet project, the time) to do the extra work.
AJAX is a relatively new technology, and I'm sure in some applications is difficult to implement. If you're doing down the road of adding AJAX to your application consider Progressive Enhancement.