0

Minor issue that I noticed in a Rails app that I use for learning new stuff.

I have some simple jQuery that I use to display the time elapsed since a start_time and an end_time on a form:

$(document).ready(function() {
    var initial_start = $('#formatted_start_time').val();
    var initial_end   = $('#formatted_end_time').val();
    $("#duration").text(findDuration(initial_start,initial_end));
})

The findDuration() function simply returns a string that says "1 hour 12 minutes," or something of the ilk based on the contents of the #formatted_start_time and #formatted_end_time fields. This all works as I would expect.

I noticed that the code fires after I submit the form, however, and Web Inspector shows a single js error TypeError: 'undefined' is not an object (evaluating 'startTime.split'), which just refers to the first line in the findDuration() function. The 'show' page does not have a #duration element, so the code shouldn't fire after submitting (or so I thought).

Why is this code running when I click submit and how do I prevent the error?

Edit: The code probably is firing on the 'show' page and not actually when I click submit. The issue seems to be that it is firing on a page with no #duration element, as if the show page triggers $(document).ready... for the previous page when it lands on the show page.

6
  • I find it difficult to believe this code is running when you click submit; there's absolutely no reason for it to. Where is this code located? Sep 12, 2011 at 1:19
  • I got the impression he means it fires on the load of the next page, after the form has submitted. If not, then the whole reasoning behind my answer goes out the window, and we need more of the code, I think :)
    – Joe
    Sep 12, 2011 at 1:22
  • I believe that it fires on the load of the next page, since the error presents on the next page. I don't think that clicking Submit is the issue. I just don't understand why it would fire there if there's no #duration element...
    – Clay
    Sep 12, 2011 at 13:03
  • Dave - the code is in in the 3.1 asset pipeline in a file called activities.js. It's compiled with the rest of the js when the app launches.
    – Clay
    Sep 12, 2011 at 13:05
  • You'd have to check the jQuery code to find out why, but a simple console experiment shows that whatever is passed in to text is called, even if there are no matching elements... $("#__un_freaking_likely_id_ohai__").text(alert('foo')); But I'm with Joe; why include the JavaScript if you don't want it to run? Sep 12, 2011 at 13:15

1 Answer 1

1

A simple way is to check the current page, and if it matches the one you want to run this on, run it.

Alternatively, you could just remove the script from the pages you don't want it to run on, which is a much better way to do it :P

$(document).ready(function() {
    if (location.href == 'http://page.you.want/this/to/run.on') {
        var initial_start = $('#formatted_start_time').val();
        var initial_end   = $('#formatted_end_time').val();
        $("#duration").text(findDuration(initial_start,initial_end));
    }
})

Another alternative to check if the #duration element exists first;

$(document).ready(function() {
    if ($('#duration').length > 0) {
        var initial_start = $('#formatted_start_time').val();
        var initial_end   = $('#formatted_end_time').val();
        $("#duration").text(findDuration(initial_start,initial_end));
    }
})
1
  • Is there a way to make it conditional based on the presence of the #duration element or an alternative to text() that won't fire on every page?
    – Clay
    Sep 12, 2011 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.