CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapruby-on-rails-3.2
omarArroum
omarArroum

Reputation: 255

Javascript/JQuery not working in my Rails app

I've been trying for so long, this is the issue:

I've got a View with a text box, and all I'm trying to do in order to check if my JQuery is working, is to display an alert message when the value of that textbox is longer than 0. This is what I got at the moment:

registers/registration.html.erb

<script>
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");}
    });
</script>

<table border="1">
  <%= text_field_tag 'Card_ID',nil,  :autofocus => true %>
  <tr><td>Present</td>
    <td>University ID</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Time of Arrival</td>
  </tr>
  <tr>
  <% @studentregister.each do |t| %>
<%= simple_form_for t do |streg| %>
      <td><div class="present"><%= streg.check_box :present, :onChange => "submit()"%></div>
        <%= streg.submit :style => 'display: none' %></td>
            <td><%= streg.label Student.find(t.student_id).university_id %></td>
            <td><%= streg.label Student.find(t.student_id).first_name %></td>
            <td><%= streg.label Student.find(t.student_id).last_name %></td>
            <% if t.time_of_arrival %>
            <td><%= streg.label t.time_of_arrival.strftime('%H:%M:%S%P')%></td>
                <% else %>
            <td><%= streg.label " "%></td>
                <% end %>
             </tr>
    <% end %>
    <% end %>
</table>

For testing purposes, I have also put the same code (In CoffeeScript), into the relevant JS.COFFEE file to see if it works:

registers.js.coffee

$("input[type=text]").keyup ->
  alert "TEST"  if @value.length > 0

But no, it still doesn't work. It's only this code that doesn't work, because when I tried to display an alert "Test" or alert("Test") when the page loads, it works.

Any ideas?

EDIT: Added some HTML source code to show what it looks like, and to see the HTML elements:

  <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">

              <script>
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");}
    });
</script>

<table border="1">
  <input autofocus="autofocus" id="Card_ID" name="Card_ID" type="text" />
      <tr><td>Present</td>
        <td>University ID</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Time of Arrival</td>
      </tr>
  <tr>
<form accept-charset="UTF-8" action="/student_registers/9" class="simple_form edit_student_register" id="edit_student_register_9" method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
<input name="_method" type="hidden" value="put" />
<input name="authenticity_token"   type="hidden" value="c8B0JGs4ZLVILa4a4r4PJJrD/zFcLCDhTLscBKHbFeE=" /></div>
      <td><div class="present">
<input name="student_register[present]" type="hidden" value="0" />
<input checked="checked" id="student_register_present" name="student_register[present]" onChange="submit()" type="checkbox" value="1" /></div>
        <input name="commit" style="display: none" type="submit" value="Update Student register" /></td>
            <td><label class="string optional control-label" for="student_register_w122344112">W122344112</label></td>
            <td><label class="string optional control-label" for="student_register_Daniel">Daniel</label></td>
            <td><label class="string optional control-label" for="student_register_Smith">Smith</label></td>
            <td><label class="string optional control-label" for="student_register_ "> </label></td>
             </tr>

Upvotes: 1

Views: 156

Answers (1)

summea
summea

Reputation: 7593

This looks like a job for the jQuery ready() function. Try putting the JavaScript (from your code above) inside the following line of code $(function() { ... });

Like this:

$(function() {
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");
        }
    });
});

By doing this, the jQuery ready() function (at the very least) gives the DOM the chance to get loaded and ready before running (or preparing to use) the JavaScript on your page.

Upvotes: 1

Related Questions