auto_complete_for: prevent the first item from being auto-selected - ruby-on-rails

The auto_complete_for dealio from script.aculo.us is great an all, but is there a way for me to selectively disable the fact that it always auto-selects the first item in the list?
The problem is that, if I want to type my own entry that is new, and novel, I don't want the first item in the list to be auto-selected. The reason is because when I TAB out of the field, it selects, and fills the text box with that first item.
I got around that, somewhat, by making the first item in the list the same as what I'm typing, but that's not perfect either, because the auto_complete list doesn't always update with every keystroke, depending on how fast I type. I've tried setting the list refresh rate to the lowest value (1 millisecond) but no go.
What I really want is an option in "auto_complete_for" that doesn't select that first item at all - the same way that Google Instant doesn't automatically select the first suggested search phrase - you have to arrow-down to select one.
Maybe I can do this via an HTML option that I'm missing?

Looking at the source, there doesn't appear to be an option for that, but I bet if you changed line 284 of controls.js to this.index = -1; it would do what you want.
Otherwise, it might be time to look for a different autocomplete widget.

If your requirements are too far away from the available plugin, then I guess there is no point in tinkering around. Its best to write your own JS code.
You might want to consider this: https://github.com/laktek/jQuery-Smart-Auto-Complete
or this : https://github.com/reinh/jquery-autocomplete

I'll add another alternative that works great with Rails 3:
http://github.com/crowdint/rails3-jquery-autocomplete

I recently implemented auto complete for more than a field for Rails 2.0.2.
The plugin I used is:- https://github.com/david-kerins/auto_complete . Not sure if it supports Rails 3.
I have also encountered issues on implementing the above scenario and have posted questions( Implementing auto complete for more than one field in Rails ; Implementing a OnClick kind of functionality and formatting wrt Rails Partial-Views ) on stackoverflow for the same, I have been lucky on getting things working for me based on my requirement.
Kindly refer to these questions, they might have relevance to your requirement.

Related

Hiding a span in an accordion

I need help in hiding/unhiding neighboring spans. I'm building a series of FAQs using an accordion structure. I need to have each question truncated by default, but when clicked, the question must then appear in full. Finally, when the open FAQ (or another one) is clicked, the question should return to its truncated form.
My markup is of this form - where I have placed a truncated version of the question in one span and the untruncated version in a neighboring span:
> <div class="accord"><h4><span class="shortver">What steps do I need to
> take to ...</span><span class="longver hide">What steps do I need to
> take to install a constructed wetland?</span></h4><div
> class="faqcontent">Answer goes here</div>...</div>
The following function controls the FAQ:
function fnSetUpPageFAQAccordion(){
$(".accord > div").hide();
$(".accord > h4").click(function(){
$(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide');
$(this).toggleClass("close").siblings("h4.close").removeClass("close");
$(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return;
}); };
This code closes the truncated version of the question and opens the full version when the FAQ is clicked. What I can't figure out is how to reverse that sequence when the FAQ is clicked again (or another FAQ on the page is clicked).
Any suggestions - perhaps there is a better approach altogether?
Thanks/Bruce
Here's a slightly different approach, and a solution.
I think you could simplify this. Instead of having 1 span with the short version and 1 with the long version, put the beginning of the explanation in the first (let's call it class="questionStart")and the rest of it in the second (class="questionEnd"). That way you can leave the beginning always visible and only worry about toggling the class on the second. This is simpler but you'd need to remove the '...' which may not be worth it for the readability loss.
To address your issue of hiding the element when clicking something else, try adding an onClick event that first adds the hide class to all of the "questionEnd" spans, then toggles it on for just the one you've clicked on. I haven't tried it but I think you could make that work pretty easily either with your original approach or with mine.

Loading select options after setting value

My program flow requires that I first set the value of a select option in the Viewmodel and then I load the available options into the Viewmodel. This causes problems, typically the first available option will be seen in the selection list after this, while the selected option value stays at the specified value.
I was hoping that setting the new "valueAllowUnset" would help, but instead my page becomes unresponsive when using it.
Therefore I currently set the original value again after loading the options. Strangely, this only works when I set the value, set a different value and then set the value again, e.g.
self.data()[field](orgValue);
self.data()[field]({});
self.data()[field](orgValue);
(I store values for multiple selection lists in the self.data observable and access them with the property index "field".)
I tried to strip this down to a simple JSFiddle (http://jsfiddle.net/timvdh/HN6DE/), but the behavior does not show there, although the example pretty much resembles my actual application. However, I am using about 30 select lists there.
So I was hoping, that someone can make an educated guess about what goes wrong in my application, I am hoping that the fact that I have to set the original value three times maybe gives a clue.
EDIT: This fiddle demonstrates, that setting the selected option before and after filling the options list does work with "valueAllowUnset": http://jsfiddle.net/timvdh/HT5Tp/
I am using JQuery Mobile with knockout.js and that caused the problem (sorry I did not even think about JQM being the problem in the first place). I am now setting the option before filling the list and after filling the list I call
$("#selectmenuID").selectmenu("refresh");
to display the option.
The hanging browser was not caused by knockout, there are additional subscriptions to the selectmenus in my app. "valueAllowUnset" changed the behavior of the selectmenus and triggered loops caused by problems in my code.

Dynamic embeddedForm

I'm looking to add an embeddedForm dynamically in Symfony 1.4 using Doctrine.
What I'm mainly looking to do is:
1) Only show the relation based on whether or not a checkbox has been ticked
2) If checked, show the embeddedForm
3) Have then the ability to add a new embeddedForm or delete an existing form
I have seen ahDoctrineEasyEmbeddedRelationsPlugin, which looks pretty good with los of configuration. The only problem was that 'newFormsInitialCount'=> 1, means that there is always 1 form as default. I need 0 forms as default and only.
I've also seen a couple of tutorials, but all seem to have at least one relation by default.
For me, the embeddedForm needs to be OPTIONAL, and only display when needed.
Thanks
Follow information based on these links :
http://www.thatsquality.com/articles/stretching-sfform-with-dynamic-elements-ajax-a-love-story
http://www.symfony-project.org/more-with-symfony/1_4/en/06-Advanced-Forms#chapter_06_sub_the_form_saving_process
First is about adding "subforms" with ajax, derived from second you could hide the unneeded form fields and toggle them per javascript (e.g. jQuery.toggle())) !

How to create a tagging system like on Stack Overflow or Quora

I want to create a tagging system like seen here on Stack Overflow or on Quora. It'll be its own model, and I'm planning on using this autocomplete plugin to help users find tags. I have a couple of questions:
I want tags to be entirely user-generated. If a user inputs a new tag by typing it and pressing an "Add" button, then that tag is added to the db, but if a user types in an existing tag, then it uses that one. I'm thinking of using code like this:
def create
#video.tags = find_or_create_by_name(#video.tags.name)
end
Am I on the right track?
I'd like to implement something like on Stack Overflow or Quora such that when you click a tag from the suggested list or click an "Add" button, that tag gets added right above the text field with ajax. How would I go about implementing something like that?
I know this is kind of an open-ended question. I'm not really looking for the exact code as much as a general nudge in the right direction. Of course, code examples wouldn't hurt :)
Note I am NOT asking for help on how to set up the jQuery autocomplete plugin... I know how to do that. Rather, it seems like I'll have to modify the code in the plugin so that instead of the tags being added inside the text field, they are added above the text field. I'd appreciate any direction with this.
mbleigh's acts_as_taggable_on gem is a feature-complete solution that you should definitely look into a little more closely. The implementation is rock-solid and flexible to use. However, it is mostly concerned with attaching tags to objects, retrieving tags on objects, and searching for tagged items. This is all backend server stuff.
Most of the functionality you are looking to change (based on your comments) is actually related more to your front-end UI implementation, and the gem doesn't really do much for you there. I'll take your requests one-by-one.
If user inputs a new tag, that tag
gets added, if user inputs an
existing tag, the existing tag gets
used. acts_as_taggable_on does this.
Click a tag from suggested list to
add that tag. This is an
implementation issue - on the
back-end you'll need to collect the
suggested list of tags, then display
those in your presentation as links
to your processing function.
Autocomplete as user enters
potential tag. You'll use the jQuery
autocomplete plugin against a list
of items pulled off the tags table.
With additional jQuery, you can
capture when they've selected one of
the options, or completed entering
their new tag, and then call the
processing function.
Restrict users to entering only one
tag. This will be your UI
implementation - once they've
entered or selected a tag, you
process it. If they enter two words
separated by a comma, then before or
during processing you have to either
treat it as one tag, or take only
the text up to the first comma and
discard the rest.
When you process the addition of a
tag, you will have to do two things.
First, you'll need to handle the UI
display changes to reflect that a
tag has been entered/chosen. This
includes placing the tag in the
"seleted" area, removing it from the
"available" display, updating any
counters, etc. Second, you'll need
to send a request to the server to
actually add the tag to the object
and persist that fact to the
database (where the taggable gem will take over for you). You can either do this via
an individual AJAX request per tag,
or you can handle it when you submit
the form. If the latter, you'll need
a var to keep the running list of
tags that have been added/removed
and you'll need code to handle
adding/removing values to that var.
For an example of saving tags while editing but not sending to server/db until saving a form, you might take a look at the tagging functionality on Tumblr's new post page. You can add/remove tags at will while creating the post, but none of it goes to the database until you click save.
As you can see, most of this is on you to determine and code, but has very little to do with the backend part. The gem will take care of that for you quite nicely.
I hope this helps get you moving in the right direction.
The more I try to force the acts-as-taggable-on gem to work the more I think these are fundamentally different types of problems. Specifically because of aliases. The gem considers each tag to be its own special snowflake, making it difficult to create synonyms. In some cases it doesn't go far enough, if you want the Tag to have a description you'd need to edit the given migrations (which isn't hard to do).
Here's what I'm considering implementing, given the trouble I've had implementing via the gem. Let's assume you want to create a tagging system for Technologies.
Consider the following psuedo code, I haven't yet tested it.
rails g model Tech usage_count::integer description:text icon_url:string etc. Run the migration. Note the
Now in the controller you will need to increment usage_count each time something happens, the user submits a new question tagged with given text.
rails g model Name::Tech belongs_to:Tech name:string
Name::Tech model
belongs_to :tech
end
Then you could search via something like:
search = Name::Tech.where("name LIKE :prefix", prefix: "word_start%")
.joins(:tech)
.order(usage_count: desc)
.limit(5)
This is starting point. It's fundamentally different from the gem, as each tag is just a string on its own, but references a richer data table on the back end. I'll work on implementing and come back to update with a better solution.

How to create a changelog?

I'm building a site that shows changes in deals that we have in our db. For example, if a deals status changes from pending to win, I want to show it, and if the value goes up or down, I want to show it, that kind of thing. Also, if you open the overview page, I want it to show the history of changes. So I need some kind of change logging, to be able to look in the past. How do I do this?
It is a rails project, but I think that's irrelevant.
I doubt there is any generic solution to this problem.
You can roll out your own. Start by considering all objects that need change logging. How many types are there? How often do you expect changes to occur? This will help you estimate the potential number of changes throughput you'll need to be dealing with. If there aren't too many, just stick them into database. If you are generating a lot, try storing to comma-separated-value file.
I have implemented a similar system before. I had 3 types of changes: 1) property value change, 2) adding of a value to a list, 3) removing value from a list.
I used the following format, stored in a log file:
//For type 1)
1,2011/01/01 00:00:00,MyObject,myProperty,oldValue,newValue
//For type 2)
2,2011/01/01 00:00:00,MyObject,myListProperty,addedValue
//For type 3)
3,2011/01/01 00:00:00,MyObject,myListProperty,removedValue
This captured most information I needed. The value parts were just some user-readable summary of the changed/added/removed property value.
Paper Trail Gem
Since you're on Rails, take a look at the PaperTrail gem. It does exactly what you're looking for and is beautifully built. You'll just need to add in a callback so that your overview page knows that a change occurred. But for the history of a model, just use the built-in PaperTrail functionality.

Resources