Javascript/JQuery not working in my Rails app

Question

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>

Do you have an error message in your JavaScript console? Also... did you mean for the "Card_ID"<input> to be outside of the <form> tags? — summea
– summea, Commented Mar 18, 2013 at 18:05
Hey, I'm not too sure how to use the JavaScript console, so I wouldn't be able to tell you if I got an error. The reason why I put the <input> outside the <form> is because if I have it within the form, it will duplicate itself as it's within the <% @studentregister.each do |t| %> loop as well — omarArroum
– omarArroum, Commented Mar 18, 2013 at 20:34
If you open up the JavaScript console in whatever web browser you are using you can then hopefully get an error message of whatever is happening with your app. Then, if you post the error message on your question, someone might be able to help! — summea
– summea, Commented Mar 18, 2013 at 20:47
I wonder if it might have to do with the ready() function in jQuery. You might want to consider putting your JavaScript code inside: $(function() { ... }); so that your JavaScript can find those input tags. — summea
– summea, Commented Mar 18, 2013 at 21:15
nope, still not working ;-( EDIT: I take it back, IT WORKS :D Thanks. When doing it in CoffeeScript, the code should start with: $ -> — omarArroum
– omarArroum, Commented Mar 18, 2013 at 21:23

summea · Accepted Answer · 2013-03-18 21:38:05Z

1

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.

answered Mar 18, 2013 at 21:38

summea

7,6634 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript/JQuery not working in my Rails app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related