I have a simple jquery.hide() function that is on all the divs with a class “groups”.
But for some reason it doesn’t work and I don’t know why. I’m using rails 3 and have both put the jquery in the application.js file and the actual file ‘edit’ in script tag. Both don’t work. can anyone see why?
Here’s my .html.erb file
<h1 class="head">Edit information</h1>
<%= form_for(@user) do |f| %>
<%= render 'shared/error_messages', :object => f.object %>
<div class="field">
<%= f.label :username %><br />
<%= f.text_field :username, :disabled => 'disabled' %>
</div>
<div class="field">
<%= f.label :full_name %><br />
<%= f.text_field :full_name%>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<%= javascript_include_tag 'application' %>
<div class="groups">
<%= f.label :password %><br />
<%= f.text_field :current_password %>
<%= f.label :password_confirmation %><br />
<%= f.text_field :current_password %>
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password %>
</div>
<% if current_user.has_role? :Admin %>
<div class="field">
<div style="width:150px"><legend >Group</legend>
<table border="1" width="100%">
<tr>
<th></th>
<th></th>
</tr>
<% for role in @roles %>
<tr>
<td><%= role.name %></td>
<td><%= check_box_tag "user[role_ids][]", role.id, @user.roles.include?(role) %></td>
<tr>
<% end %>
</table>
</div>
</div>
<% else %>
<% end %>
<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>
<%= button_to 'Back', user_path(@user) %>
and my jquery which I have used in the js file and the top of the html.erb file
function (){
$('.groups').hide();
};
its worth noting that ive tried:
$(document).ready (function (){
$('.groups').hide();
});
aswell.
The application.js file gets loaded in the page as does jquery.
It’s been a long day of code so I might be missing something obvious.
Update
<!DOCTYPE html>
<html>
<head>
<title>PadOnRails | Edit user</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c="/>
<!-- Stylesheets -->
<link href="/stylesheets/custom.css?1313743921" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/screen.css?1313067331" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/print.css?1312273016" media="print" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui.css?1313072205" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.6.2.min.js?1312273015" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.14.custom.min.js?1312273015" type="text/javascript"></script>
<script src="/javascripts/jquery_ujs.js?1312273015" type="text/javascript"></script>
<script src="/javascripts/jquery.dataTables.min.js?1312800139" type="text/javascript"></script>
<script src="/javascripts/datatable.js?1313666950" type="text/javascript"></script>
<script src="/javascripts/rails.validations.js?1312877646" type="text/javascript"></script>
<script src="/javascripts/error_messages.js?1313056625" type="text/javascript"></script>
<script src="/javascripts/jquery.dataTables.columnFilter.js?1312807797" type="text/javascript"></script>
<script src="/javascripts/application.js?1313762558" type="text/javascript"></script>
</head>
<body>
<!-- Container for all the content on the page -->
<div class="container header">
<header>
<div id="top-menu">
<div id="account">
<ul>
<li>Logged in as: <b>admin</b> </li>
<li>Current IP: <b>127.0.0.1</b> </li>
<li><a href="/users/6" class="round">My Account</a></li>
<li><a href="/logout" class="round">Sign out</a></li>
</ul>
</div>
<ul>
<li><a href="/" class="round">Home</a></li>
</ul>
</div>
</header>
<div class=" maintitle">
<div class="lefthead">
<a href="/"><img alt="Matflo" src="/images/logo.png?1312273015" /></a>
</div>
<div class="righthead">
PAD
</div>
</div>
</div>
<!-- Get contents from pages -->
<div class="container main">
<!-- Messages Blueprint => :error [red], :success [green], :info [blue] and :notice [yellow] -->
<h1 class="head">Edit information</h1>
<form accept-charset="UTF-8" action="/users/6" class="edit_user" id="edit_user_6" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c=" /></div>
<div class="field">
<label for="user_username">Username</label><br />
<input disabled="disabled" id="user_username" name="user[username]" size="30" type="text" value="admin" />
</div>
<div class="field">
<label for="user_full_name">Full name</label><br />
<input id="user_full_name" name="user[full_name]" size="30" type="text" value="admin" />
</div>
<div class="field">
<label for="user_email">Email</label><br />
<input id="user_email" name="user[email]" size="30" type="text" value="admin@dai.co.uk" />
</div>
<div class="groups">
<label for="user_password">Password</label><br />
<input id="user_current_password" name="user[current_password]" size="30" type="text" />
<label for="user_password_confirmation">Password confirmation</label><br />
<input id="user_current_password" name="user[current_password]" size="30" type="text" />
<label for="user_current_password">Current password</label> <i>(we need your current password to confirm your changes)</i><br />
<input id="user_current_password" name="user[current_password]" size="30" type="password" />
</div>
<div class="field">
<div style="width:150px"><legend >Group</legend>
<table border="1" width="100%">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>Developer</td>
<td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="1" /></td>
<tr>
<tr>
<td>Corporate</td>
<td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="2" /></td>
<tr>
<tr>
<td>ProjectManager</td>
<td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="3" /></td>
<tr>
<tr>
<td>Admin</td>
<td><input checked="checked" id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="4" /></td>
<tr>
<tr>
<td>TeamLeader</td>
<td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="5" /></td>
<tr>
<tr>
<td>Engineer</td>
<td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="6" /></td>
<tr>
</table>
</div>
</div>
<div class="actions">
<input id="user_submit" name="commit" type="submit" value="Update" />
</div>
</form><form method="post" action="/users/6" class="button_to"><div><input type="submit" value="Back" /><input name="authenticity_token" type="hidden" value="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c=" /></div></form>
</div>
</div>
<!-- Debug information outside page container- REMOVE WHEN FINISHED! -->
</body>
<div class="container">
<div id="bottom-menu">
<pre class='debug_dump'>--- !map:ActiveSupport::HashWithIndifferentAccess
action: edit
id: "6"
controller: users
</pre>
</div>
</div>
</html>
Html straight out of the source as requested.
Be sure prototype is not included, the ‘$’ can be used by any library. Try this:
Extra: If you writing your script out of a HTML element, the correct is use double quote notation (“”).