I am writing a python web app for google app engine using jinja2 though my problem relates to HTML/javascript (jquery is good).
I have a menu guided by radio buttons. I have two columns that I want to permanently be there and I want the next three to be generated depending on what the user selects from the first two.
I understand somewhat how to generate the radio buttons automatically with JQuery (though any suggested resources would be great but I can probably figure it out) but my main question revolves around the fact that my final radio button has around 100 possibilities depending on the previous ones that are selected (only 3-5 will be displayed at a time mind you).
So my main question. Where should I store the names for the radio buttons and URLs that they will lead to? and how do I put these into the radio buttons as they are created?
Here is an image of what I want the final product to look like:
Thanks so much this is bending my mind for some reason!
Where are your 100 options stored now in javascript (front end)?
If all your options are stored on the front end you can implement your logic (which buttons to display based on the previous choices) on the front end. This would probably include an array of radio buttons. As you can see this could start getting unweildy to maintaint. Every time you want to update yoru logic you would have to manually update your js file.
If all the choices are stored in python/backend you will need to make an AJAX request from the front end to the backend. This can be done easily using jquery framework.
This request would include the choices the user makes. and it would return the correct radio buttons to display.
Related
I'm kind of a beginner to WIX Code. I have this site which I have made i.e www.rat-store.com. I am facing three problems which I know might get solved with some code but I don't know how to do it. Here are the problems:
In manual payment, I need to accept some form input from the user on a page and only if the user agrees to the terms and enters the correct date should the submit button get activated following which an otherwise collapsed image should also reveal (it's the QR code to make payment; Image 1) (www.rat-store.com/manual-pay-rat)
Image 1
I'm trying to link a repeater background to a page but it's not working. I have to create a button inside the repeater to do this. Any workarounds? I know an image will work but the thing is that the motive is to create a kind of a list which will keep on incrementing in the future and I can't just keep on drag-dropping images, text and then group them up and link. (Image 2) (www.rat-store.com/shop-by-events)
Image 2
Since WIX Stores doesn't have an inbuilt cancellation feature I built a form to substitute for the same but I want that no two same order cancellations are submitted i.e. a customer can only submit his/her cancellation request for a particular order number once. The next time s/he tries to do that it should show that the request already exists. (Image 3 and Image 4) (www.rat-store.com/cancel-orders)
Image 3
Image 4
Some help with the code and approach would really be great. I'm almost finished with my site; Only these last few things bother me. I'm attaching a screenshot of each page, serially w.r.t the question number. P.S: The order number is the number generated for each order by the Wix store app itself. I have nothing to do with that. The customer needs to enter his/her number and if that is valid we will process the request. Apologies for the length of the post.
Versions
Mac OS: OSX 10.10.2
Ruby: 2.2.1p85
Rails: 4.2.0
Bootstrap-SASS: 3.3.4 #For Web UI
Bootstrap-Switch-Rails: 3.0.0 #For Toggles
Context
I am building a site where someone can create a packing event to make bags for the homeless. I am using Ruby on Rails to create this webapp, Bootstrap to design the user interface, and am open to using JQuery, javaScript, HTML, and CSS to get the desired functionality. Though my working knowledge of the first two languages is minimal.
In the user's event creation and edit pages I have a list of items that a person can add to their bags. This list is in a table view as seen through the link below.
Dropbox link
Desired Functionality
I am wanting to do 2 things.
When the user enters the number of bags they plan on packing, I want to be able to update the column "Number Needed" for each item. So, for instance in the example scenario shown in the image above, the "Number Needed" for "Raise Money" would be "$6,500", for "Volunteers" would not be added, for "Water" would be "1000" and for "Food" would be "1000".
I want the user to be able to toggle whether to include an item on their event page. So, in the example picture, the user wants to show on their event page that they are raising money for their event, and requesting donations for water and food; but they do not need volunteers to pack the bags. In this scenario, I would like to disable the form fields of "Number Needed", "Currently Have" and "Number Remaining to Get" for the row "Volunteers".
Questions
For the first desired functionality specified above: Should I just have the table on a separate page maybe so that the fields are populated before the table is actually shown? Or, my preferred ability, do I need to put a button after the "Number of Bags" field that when clicked updates the table? And how would I do that?
For the second desired functionality specified above: Is there a way to have this done dynamically when the user toggles the "Include" column to "Yes" or "No"? How would I disable the desired form fields dynamically once a user toggles that row to "No"?
Let me know if you need any more information. And thank you in advance for your expertise.
First things first, I would put this in the comment, but I don't have enough reputation to do that yet.
Ok so there's a few ways to solve your problem. The first and ugly solution would be to rerender the page everytime something gets updated. You really shouldn't do it that way because that required the user to hit a button to submit the form and the controller would render the same page again with updated results.
Instead, you want to use jQuery to add event listeners to your form fields and the button mentioned in the second functionality. On those event listeners, put some handlers to update the desired field. It's hard to direct you on the jQuery if I don't know your HTML structure. As Santiago mentioned, there are many tutorials out on the internet for putting event listeners and creating the proper handlers.
Additionally, you should consider AJAX to asynchronously communicate with your controller to keep the front-end (what the users see on the browser) and the back-end (data stored in the database) in sync. Again, plenty of guides out there on the internet for this, but definitely look into the Rails functionality of "remote: true" on your form to make the set up of the AJAX process easier.
Let's say that I have a select box in an html page. And the values in that select box come from a db query that returns a not so small list of options.
Now if I need to add another 4 select boxes showing the same list of options, would I have to duplicate the code and so send back to the browser 4*(select_box_result_size) or this is normally done differently?
Regardless of how you are managing the server-side code, the answer is that each select box needs its own group of options. That said, if all options are the same then you should only make one query to your database, and generate the all the select boxes you need with a single function. Simply get the options from the database, store them in a variable and then create your boxes.
Do note that in your HTML each box will have the values hardcoded into it, so your client-side code will have duplicate data, but that doesn't really matter. What is important is that the code that you'll have to maintain is clean, and that you put as little stress as possible on your database. One query + one function is all you need.
If performance was really an issue, you always have the possibility of dynamically-generating the combo boxes using JavaScript. You could essentially embed one and then copy it four more times. However there are two things you need to consider for this:
Do you really have a performance issue that is being caused by these combo boxes? (Probably not)
Is the combo box so big that it will actually take longer to load the HTML across a network connection than it will to copy the box four times with JavaScript? (Again, probably not... remember that the longer the box the longer it will take to copy.)
Unless you have 1000+ options, I would recommend to simply stick to generating the box four times. If you do have that many then do two things:
Benchmark. Create two pages, one with a single combo box and one with four and compare the size. Then compare the load times.
Consider improving your UI. Perhaps if you have 1000 options it would be better for the end user to implement some sort of filtering process to reduce the number of necessary elements... i.e. If you have a box containing all the cities of the world, have one box to select the country and then populate the city box with only the applicable cities by way of a JSON request.
And the values in that select box come from a db query that returns a
not so small list of options.
For user friendliness you could try autosuggest, there are libraries for that but you could try writing your own.
If same data is displayed multiple times (4 times) depending on your server side script it might be best to fetch the data in memory and generate the selects instead of querying 4 times.
would I have to duplicate the code
It's best not to duplicate, at the very least you can write a helper function to generate the select list. If you're serious about removing code from html markup you can look into using one of the many MVC frameworks out there that use templates and allow you to bind data to it.
I'm trying to build a webform that has multiple stages. I'm patterning it off of the Stack Overflow / Stack Exchange flagging webform. The problem is, I'm not sure how to trigger the "next stage" action.
To illustrate, if one wants to flag a question on Stack Overflow, you click flag and then a popup prompts you to make a choice. If you choose the second option ("it doesn't belong here, or it is a duplicate") the form automagically takes you to a second screen.
First screen:
Upon click, it auto-redirects to:
The problem is that I don't know what the underlying trigger is. How does clicking that radio button send the end user to the next screen?
I tried checking the source, but I have a feeling I'm only seeing half the picture:
No amount of HTML tutorials I find have any practice example similar to this. I suspect this is JavaScript, but I can't find the linked .js file that would trigger these actions.
So: How does the webform auto-redirect upon click? As a follow-up, if it's using JavaScript, is there an HTML/CSS-only workaround I can use?
It might help to think about this at a lower level than frameworks. There are two ways one could make a multi-stage form.
The first (and generally older) way is to store the state on the server. Each stage of the form is actually a separate form, and the client's progress through the questionnaire is kept on the server (for example, as part of the session data).
The second way (the more modern one) is to use JavaScript, as you suspected. There is actually very little black magic in this case, and no auto-redirects on clicks at all. All you do is have one very long form where you show/hide some of the elements depending on the user's selections (of course, you could have multiple <form> elements which you show/hide).
Well, I'd use some sort of jQuery wizard plugin and adapt it to my needs. I did it very recently and it wasn't that hard. You should try SmartWizard 3.0, it's pretty active, the last release was about 2 months ago and the coders answered my questions pretty fast.
Here it is: https://github.com/mstratman/jQuery-Smart-Wizard
You can trigger the wizard to advance to the next step linking an event to the action of clicking the radio button.
Good luck :)
A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?
It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.
Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree