Skip to content

Instantly share code, notes, and snippets.

@hannesfostie

hannesfostie/_form.html.erb

Created July 9, 2012 18:08
Show Gist options
  • Save hannesfostie/3077961 to your computer and use it in GitHub Desktop.
Save hannesfostie/3077961 to your computer and use it in GitHub Desktop.
Download ZIP
chosen troubles
Raw
_form.html.erb
<%= form_for @schedule, :html => { :class => 'form-horizontal' } do |f| %>
<fieldset>
<legend><%= controller.action_name.capitalize %> /Schedule</legend>
<div class="control-group">
<%= f.label :date, :class => 'control-label' %>
<div class="controls">
<%= f.date_select :date, :class => 'date_select' %>
</div>
</div>
<div class="control-group">
<%= f.label :doctor_id, :class => 'control-label' %>
<div class="controls">
<%= f.collection_select(:doctor_id, Doctor.all, :id, :name, {}, { :class => 'chzn' }) %>
</div>
</div>
<div class="control-group">
<%= f.label :province_id, :class => 'control-label' %>
<div class="controls">
<%= collection_select(:schedule, :province_id, Province.all, :id, :name) %>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', schedules_path, :class => 'btn' %>
</div>
</fieldset>
<% end %>
Raw
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require chosen
//= require_tree .
//= require initializers
Raw
generated html
<!DOCTYPE html>
<html>
<head>
<title>Osteo Scheduling</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/calls.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/doctors.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/schedules.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/calls.js?body=1" type="text/javascript"></script>
<script src="/assets/doctors.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/initializers.js?body=1" type="text/javascript"></script>
<script src="/assets/schedules.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="vi1qTG/l5Cw0VERg3pk53c8oUjauWzXYetRzWJwHBfo=" name="csrf-token" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Osteo Scheduling</a>
<div class="nav-collapse">
<ul class="nav pull-left">
<li>
<a href="/schedules">Schedules</a>
</li>
<li>
<a href="/doctors">Doctors</a>
</li>
<li>
<a href="/schedules/archived">Archived Schedules</a>
</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="/users/edit">Edit account</a>
</li>
<li>
<a href="/users/sign_out" data-method="delete" rel="nofollow">Logout</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<form accept-charset="UTF-8" action="/schedules" class="form-horizontal" id="new_schedule" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="vi1qTG/l5Cw0VERg3pk53c8oUjauWzXYetRzWJwHBfo=" /></div>
<fieldset>
<legend>New /Schedule</legend>
<div class="control-group">
<label class="control-label" for="schedule_date">Date</label>
<div class="controls">
<select id="schedule_date_1i" name="schedule[date(1i)]">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<select id="schedule_date_2i" name="schedule[date(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option selected="selected" value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="schedule_date_3i" name="schedule[date(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option selected="selected" value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="schedule_doctor_id">Doctor</label>
<div class="controls">
<select class="chzn" id="schedule_doctor_id" name="schedule[doctor_id]"><option value="1">Hannes Gmail</option>
<option value="2">Hannes fostiebe</option>
<option value="3">Hannes Maloik</option>
<option value="4">robin demeeter</option></select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="schedule_province_id">Province</label>
<div class="controls">
<select id="schedule_province_id" name="schedule[province_id]"><option value="1">Brussel</option>
<option value="2">Brabant Wallon</option>
<option value="3">Vlaams Brabant</option>
<option value="4">Antwerpen</option>
<option value="5">Limburg</option>
<option value="6">Liege</option>
<option value="7">Namur</option>
<option value="8">Hainaut</option>
<option value="9">Luxembourg</option>
<option value="10">West-Vlaanderen</option>
<option value="11">Oost-Vlaanderen</option></select>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" name="commit" type="submit" value="Create Schedule" />
<a href="/schedules" class="btn">Cancel</a>
</div>
</fieldset>
</form>
</div>
</body>
<script>
// $(function () {
// $('.dropdown-toggle').dropdown();
// $('.#myTab').tab();
// });
</script>
</html>
Raw
initializers.js
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
$('.#myTab').tab();
console.log('dom ready');
$('.chzn').chosen();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment