I am using token inputs in a text field and would like to also make these tokens sortable (JQuery UI). I am using Ryan Bates screencast to get started however I am unsure how to apply content_for to my code. Here is what I have...
<fieldset id="presenters">
<p>
<%= event_form.label :presenter_tokens, "Presenters" %>
<%= event_form.text_field :presenter_tokens, "data-pre" => #event.presenter_tokens_tokeninput.to_json %>
</p>
</fieldset>
Here is the HTML I get...
<fieldset id="presenters">
<p>
<label for="event_presenter_tokens">Presenters</label>
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook">
<p>Mark</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-token-facebook">
<p>Laurie</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-input-token-facebook">
</ul>
<input data-pre="[{"id":131,"name":"Mark"},{"id":1311,"name":"Laurie"}]" id="event_presenter_tokens" name="event[presenter_tokens]" size="30" type="text" value="131,1311" style="display: none;"/>
I ended up solving this problem by using https://github.com/swanandp/acts_as_list
Related
I want to have dropdown at text_field in Ruby on Rails form.
I wrote the code like that:
<div class="dropdown">
<%= f.text_field :title, class: "dropdown-toggle", data: {toggle:"dropdown"} %>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
# some dropdown items
</ul>
</div>
My code doesn't work and I get an error...
Uncaught TypeError: Cannot read property 'setAttribute' of null
In my investigation, the problem seems ....
<div class="dropdown"
<div class="form-group">
<input class="form-control dropdown-toggle" data-toggle="dropdown" type="text">
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
# some dropdown items
</ul>
</div>
Since I'm using bootstrap form, f.text_field is automatically wrapped by "form-group".
I don't need this wrapper in order to make dropdown work well.
So, the following code will work, but I don't know how to realize it by using f.text_field in bootstrap form.
<div class="dropdown"
<input class="form-control dropdown-toggle" data-toggle="dropdown" type="text">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
# some dropdown items
</ul>
</div>
Please tell me how to coexist "f.text_field", "form-group", and bootstrap dropdown.
I found a solution at offical document (https://github.com/bootstrap-ruby/bootstrap_form)
You may want to define your own form group div around a field. To do so, add the option wrapper: false to the input field. For example:
f.form_group :user do
f.email_field :email, wrapper: false
end
I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!
SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.
I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Here is what isAuthor() looks like in my AngularJS controller:
$scope.isAuthor = function(msgAuthor, currentUser) {
return angular.equals(msgAuthor, currentUser);
}
Pretty simple really!
To compare two objects you can use:
angular.equals({{msg.authorId}}, <%= current_user.full_name %>)
Does anyone know if it is possible to render angular js curly braces type {{ }}
in ERB as parameters.
eg.
<=home_url( {{code.id}}, #code)/>
Taken from the example from here:
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
Also check this tutorial: http://blog.berylliumwork.com/2013/03/best-practice-of-using-angularjs-with.html
where you can see this example:
<div data-ng-init='mailbox.selected = "<%= #current_page %>"'>
<ul class="nav nav-tabs">
<li data-ng-class='{active: (mailbox.selected == "inbox")}'>
<%= link_to mails_inbox_path, 'Inbox' %>
</li>
<li data-ng-class='{active: (mailbox.selected == "outbox")}'>
<%= link_to mails_outbox_path, 'Outbox' %>
</li>
<li data-ng-class='{active: (mailbox.selected == "draft")}'>
<%= link_to mails_draft_path, 'Draft' %>
</li>
</ul>
</div>
I'm having trouble implementing the wysihtlm5 editor using the wysihtml5-rails gem: https://github.com/NARKOZ/wysihtml5-rails
First of all, my html tags are not saved to the database. Then if the form submit fails, the text_area is only filled with plain text. How can i make sure, the html tags are sent to the server in the right way?
In the debug output i can see that the description is arriving in the controller without html tags:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"fW5FMxr/sgNkLUowLT2E0UfIXtFbXvkOubPYM0GJm0I=", "description"=>"sdfgsdfg"}, "_wysihtml5_mode"=>"1"}
application.js:
//= require wysihtml5
//= require parser_rules/advanced
In my view:
<%= form_for #auction do |f| %>
<div class="control-group">
<label class="control-label" for="auction_days">Beschreibung</label>
<div class="controls">
<div id="wysihtml5-toolbar" style="display: none;">
<div class="btn-group">
<a data-wysihtml5-command="bold" title="CTRL+B" class="btn"><i class="icon-bold"></i></a>
<a data-wysihtml5-command="italic" title="CTRL+I" class="btn"><i class="icon-italic"></i></a>
<a data-wysihtml5-command="underline" title="CTRL+U" class="btn"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="btn">H1</a>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="btn">H2</a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="insertUnorderedList" class="btn"><i class="icon-list-ul"></i></a>
<a data-wysihtml5-command="insertOrderedList" class="btn"><i class="icon-list-ol"></i></a>
</div>
<a data-wysihtml5-command="createLink" class="btn"><i class="icon-link"></i> Link</a>
<!--<a data-wysihtml5-action="change_view">switch to html view</a>-->
<br /><br />
<div data-wysihtml5-dialog="createLink" style="display: none;" class="alert alert-info input-xxlarge">
<label><strong>Link einfügen:</strong></label>
<input type="text" data-wysihtml5-dialog-field="href" value="http://" class="span3">
<a data-wysihtml5-dialog-action="save" class="btn">OK</a> <a data-wysihtml5-dialog-action="cancel" class="btn">Abbrechen</a>
</div>
</div>
<%= f.text_area :description, :id => 'wysihtml5-textarea', :label=>false, :class=>"input-xxlarge", :placeholder => "Beschreibung hier einfügen ..." %>
<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", {
toolbar: "wysihtml5-toolbar",
parserRules: "wysihtml5ParserRules"
});
</script>
</div>
<%= button_tag(type: 'submit', class: "btn btn-success") do %>
<i class="icon-ok icon-white"></i> Send
<% end %>
<% end %>
is the editor load properly? try inspect element in browser for the case when validation fail ,is because what you re saving is plain text, so it will just display plain text for you as well.
I saw there is a html view tag in the demo, maybe you try check whether it can be changed to html text or not.
Additionally:
I personally recommend the plain 1 without gem.
https://github.com/mindmup/bootstrap-wysiwyg
or ckeditor or tinymce :D
I'm trying to group related attributes into a "Doublefield" by putting them into a form.inputs block:
<%= semantic_form_for MyModel.new do |f| %>
<%= f.inputs 'Advanced' do %>
<%= f.input :name %>
<%= f.inputs 'Min/Max', class: 'doublefield' do %>
<%= f.input :min %>
<%= f.input :max %>
<% end %>
<%= f.inputs 'Zip/Place', class: 'doublefield' do %>
<%= f.input :zip %>
<%= f.input :place %>
<% end %>
<% end %>
<% end %>
However, this produces a markup like that (omitted irrelevant markup):
<form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">
<fieldset class="inputs">
<ol>
<li class="string input optional stringish" id="my_model_name_input">
...
</li>
<li class="input">
<fieldset class="doublefield">
...
</fieldset>
</li>
<fieldset class="doublefield">
...
</fieldset>
</ol>
</fieldset>
</form>
Only the first nested fieldset in the fieldset gets surrounded by the <li> tag, the others are just rendered as <fieldset> which leads to invalid markup (<fieldset> as direct child of <ol> is not allowed). This isn't just ugly but also makes it hard to apply styles to the form.
In my research I've stumbled upon some comments about this issue where it stated that this could have been an issue with formtastic itself, but I haven't found a workaround or suggestion up until now.
Any ideas?
Version Information:
rails (3.2.0.beta bd4bd3f)
formtastic (2.0.0.rc4 7d3bb2f)
ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-linux]
Full markup:
<form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="zPm0lLyT6MM4M+LI1b7c9d7NqGQM2PiT+kHsjUnfTWM="></div>
<fieldset class="inputs">
<legend><span>Advanced</span></legend>
<ol>
<li class="string input optional stringish" id="my_model_name_input">
<label class=" label" for="my_model_name">Name</label>
<input id="my_model_name" maxlength="255" name="my_model[name]" type="text">
</li>
<li class="input">
<fieldset class="doublefield">
<legend><span>Min/Max</span></legend>
<ol>
<li class="number input optional stringish" id="my_model_min_input">
<label class=" label" for="my_model_roosts_min">Min</label>
<input id="my_model_min" maxlength="4" name="my_model[min]" step="any" type="number">
</li>
<li class="number input optional stringish" id="my_model_max_input">
<label class=" label" for="my_model_max">Max</label>
<input id="my_model_roosts_max" maxlength="4" name="my_model[max]" step="any" type="number">
</li>
</ol>
</fieldset>
</li>
<fieldset class="doublefield">
<legend><span>Zip/Place</span></legend>
<ol>
<li class="string input optional stringish" id="my_model_zip_input">
<label class=" label" for="my_model_zip">Zip</label>
<input id="my_model_zip" maxlength="255" name="my_model[zip]" type="text">
</li>
<li class="string input optional stringish" id="my_model_place_input">
<label class=" label" for="my_model_place">Place</label>
<input id="my_model_place" maxlength="255" name="my_model[place]" type="text">
</li>
</ol>
</fieldset>
</ol>
</fieldset>
</div>
[EDIT] made the answer relevant to Formtastic 2
This was a bug in formtastic, which has been fixed 3 days ago: https://github.com/justinfrench/formtastic/commit/4c5bf686b7fc5bbbc2e03c61cace101e713a51e0
If you don't want to wait for the release (and you likely don't), use the version from git:
gem 'formtastic', :git => 'git://github.com/justinfrench/formtastic.git'