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
Related
So I have built a drag and drop form builder for my client using jQuery UI. The form basically has so many items and the client will add, re-order, remove items from the list constantly. I am just having a dilemma with the approach I should take to save the list server-side.
A) Should I just attach the ajax event to update the server whenever the sortable interface is changed. jQuery UI has event for this. But that could mean tens of ajax requests in very short time.
B) Should I just add a button that says "Save changes" and the client uses it whenever he feels happy with the order, click the button and changes are saved on the server. Less neat/pretty than A) but speaking of performance. Do you suggest this solution to be practically better?
I'm thankful for any input as I'm now really unsure which approach to take.
I would go with option B) as it would be safer and would produce less overhead. Safer meaning the user wont accidentally safe something they don't want to.
Option C) would be websockets. You could build up a bi-directional connection between client and server that would hold on the whole session the user is editing the list. That would prevent you from sending many requests to the server. A nice PHP library for websockets is Ratchet: http://socketo.me/
Delay moment of ajax request every time when user drags something for a few seconds. That way you will save all changes without forcing user to do 2nd interaction (clicking button) and also you will not send redundant requests. Keep in mind that in that way, you should prevent from closing browser window by the user, you can do that by using onBeforeUnload. Of course you could use websockets as mentioned before, but there is some situations where you cannot do that.
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.
I've got a PHP-driven site that has a recordkeeping form. The user chooses a battle in the first dropdown, then the winning side in the second. Currently the winning side options are only Side 1 , Side 2 corresponding to which was listed first in the battle setup. The submission has an "are you sure?" step to make sure they have a chance to correct the side if they chose the wrong one.
I'm the first to admit this is annoying, and want to make the winning side dropdown populate automatically based on the battle selected. I've been told this is bread-and-butter AJAX stuff.
My concern, though, is how to maintain functionality for JS-disabled users. Can this sort of dropdown auto-population carry the original PHP fixed values behind it?
Sorry for the lack of code. I haven't yet begun to study JavaScript and AJAX methods, just considering the theoretical applications to my site at this point...
Thank you.
You could do it like this.
When the page loads, if javascript support is enabled, the button/link which does the post is hidden and the site works with javascript otherwise the button/link is displayed and the site works without js
I'm not the AJAX guru but your idea sounds good. You can of course populate a drop down list and JS enabled browsers can remove/repopulate/alter/... this field whatever they like by loading data via an AJAX request.
With a little bit of googling, you should be able to find such already-developed solutions or at least get an idea of what others have done.
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.
This is a technical design question more then a syntax question.
I have a large page with 9 forms corresponding to different tables. I've wrestled with the design and I there's no way out I have to send all the forms via ajax to the server for processing. There are lots of interrelations. I can't combine the forms into one large one either. So the question is what's the best way to send a lot of forms via ajax. To further complicate the issue there are dynamic forms with fields with same names.
I'm trying a technique of:
1. serializing each form,
2. prepending the form name to each field name
3. combining the serialized version of the forms into one
4. posting that combined serialized form to the server as one
5. breaking them apart on the server side into separate arrays and then finally doing the application logic
I just don't know if there's a tried and true easier solution and I'm making a mountain out of a mole hill
If there's genuinely no way to redesign the page, then your solution seems simple and straightforward to me, not at all "mountain"-ish. To me, though, your description of the page screams "redesign," though of course I don't have enough information to work with.
One such redesign would be to send field changes to the server as they happen, rather than waiting and submitting the entire thing. The server side can hold them as "pending" if you need the user to explicitly commit the whole thing when they're done. But that depends on expense of server resources, etc.
You should be able to send 9 separate AJAX requests without hassle (assuming that a: each doesn't rely on the response of another, and b: this isn't something which happens all the time).
Using your javascript library (you are using one, right??) just loop through your forms and AJAX submit each one. I think it'll probably only process probably 2 at a time, but if that's not a problem to your design, then all should be sweet.
It would certainly keep the PHP/Server-Side part of the equation much much simpler.
If you were working with a high-traffic site, then you'd probably want to reduce the number of requests being made, but chances are your current setup will work sufficiently well.
I'd prepare a javascript dispatcher which would smartly do the job of posting the data. So when the submit button is pressed it would collect all the data needed, and then send the data to the appropriate controllers on the server side.
It could block the form, in the meanwhile, or display a "Processing..." popup.