I'm trying to devise a form that will allow me to input multiple contacts. It's a pretty long form so far and I want to keep it as short as possible. I was thinking of just having one set of fields for contact inputting which will add this contact to a list box or gridview but I'm not sure that is the most elegant solution. Could anyone else point me in the right direction to something good I can use?
I'm writing in HTML / asp.net / javascript.
Thanks,
Steve
I'm a big fan of the way Facebook does this in their new message popup. If you have an account, try creating a message and adding multiple contacts to the "To" box. Basically it's a big box with a list of contacts you've added. At the end is an inline borderless textbox to add the next contact. Clicking anywhere in the field focuses the hidden textbox at the end. At least that's how I think it works... If you decide you like it, maybe take a closer look at it using Firebug for Firefox. I'm not suggesting ripping off their code or anything, I just think it would be a good starting point for what your talking about.
Related
I'm creating a kind of calculator of economic status, using two separated forms in the same web page, but hiding the second one.
What I need is a way to do this, how to "move" the first form away of screen and show the second one after pressing a button and also show the results in the same way. Honestly I have no idea of how to search for that so I ended here.
Also, what would you recomend me to use with this, only Javascript? thaking in mind that there is no users or any kind of storage besides the data obteined from the form.
I would use angularJS (ngShow ngHide) or use a new state
I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.
The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.
I have a page where users can vote for businesses by choosing a category and typing a business name. When they begin typing, the page predicts the business name in a span below the text box.
I want a user to be able to click one of these predicted names and have the name become the value of the text box for submitting. This will ensure consistently correct business names. Ideally, this will happen without having to submit a form or reload the page.
I've seen lots of mentions of jQuery and AJAX but I'd really rather just use PHP in possible. If I have to use a second programming language, let me know.
I apologize if this question isn't very detailed, but I'm new to PHP and still trying to poke around, and I'm picking up on work done by someone else. Also, I'm not looking for blocks of code as answers. If I know the functions I have to use, I should be able to get the rest myself. Thanks SO!
You need some form of JavaScript manipulation for this. It cant be done in PHP alone.
I would like to add "add another field" and "remove field" button in django admin which results in to add/remove a text field respectively. And all these field should be concatenated(separated via some character) and assigned into one model textfield. How could I achieve this?
You're best bet is going to be to use Javascript. Have Javascript create the new field (or remove it) on button click. Let the user fill in the field as they need to. When they are ready to save you'll need to catch the submit (again using Javascript) and concatenate everything into the initial textarea field and then let it submit to the server where Django should handle it.
You'll also have to then have Javascript run on page load to check the textarea and split out the different sections of your textarea.
More or less that is how you are going to have go about it. If you're wanting to have someone write it for you then that would be a whole other discussion.
(I know it's easy to come along and say "why do that, that's not the best way". I often run into constraints where the best way isn't going to work, so I try not to knock others not knowing their constraints.)
I know on the regular create/edit entity it's trivial. What I'm looking at is when creating an entity via workflow, you can click on 'Set Properties' which opens a form that's different than the standard form. Is it possible to have a custom onload event in there?
One example of something we do is that we convert a text box into a drop down menu dynamically based on information in their CRM system. This breaks in the workflow form.
If you need me to clarify anything, please ask. I've included screen shots of what I'm talking about with the workflow form.
Nope, the form you see in the workflow designer is the current default form for that entity - it also has all the hidden/unused fields tagged onto the bottom.
All form JavaScript is disabled I believe. Perhaps look at another approach?
You're cross pollinating your concepts.
The Workflow form is something your end user will never see. As such, the screen you get is form that contains all fields for your entity.
The Dialog screen is the one you use when you require a user to interact with a controlled process. However, this too is not able to have the customizations you mention.
The concept of Webresources only affects Forms; and this is where your GUI-magic impresses your customer with your ability to help him (or her) better use your design.
(If this is unclear, the answer is "no", you cannot use your webresources and custom controls on workflows.)