Tag: coffeescript
Nabin Nepal (Starx) click coffeescript jquery
March 18, 2013

JQuery on click not working

Question by Jamie Fearon

Jamie FearonJamie Fearon

I’m having strange behaviour where within the same file a change event is working but a click event isn’t. I understand I may have not posted enough code, but I just want to see if anyone knows why on event may work but another will not. Here is my code:

class AddBTS
  constructor: () ->

    $('#a').on 'change', (evt) => @a evt
    $('#b').on 'change', (evt) => @b evt
    $('#c').on 'click', (evt) => @c


  a: (evt) =>
    console.log 'a works'

  b: (evt) =>
    console.log 'b works'

  c: () =>
    console.log 'c works'

The html it refers to:

<input type="file" id="a">
<input type="file" id="b">
<button id="c">OK</button>

The events work fine on a and b, but the click event doesn’t work on c.

My compiled JS is executed after the DOM loads.

Could anyone give me some pointers on what may cause this and I will try it out.

Interestingly, when I double click on c I get the following error:

Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.

Answer by user1737909

user1737909user1737909

You have to call your c function :

@c()

Without parens, you’re only accessing it. Remember, CoffeeScript isn’t Ruby ;).

Answer by Starx

StarxStarx

I dont think you need the evt since you are not using it.

$('#c').on 'click', () => @c
Nabin Nepal (Starx) coffeescript javascript jquery
August 29, 2012

Disabling form button onClick, and then submitting the form

Question by bevanb

bevanbbevanb

My form lets users submit a poem.

Sometimes, there’s a field for a new user name on that page (if nobody’s logged in). In that case, I want to override the button click so that it signs them up first:

$('#submit-poem').click ->
  $('input[type=submit]').attr('disabled', true)
  if $('#new_poet_name_field').length
    signUp();  // This will submit the poem form after registering
    false
  else
    console.log("A poet was already logged in!")
    true

This used to work fine. But now, when there is no new_poet_name_field, the submit button stays disabled. Returning true used to submit the form. Now, I have to explicitly do $('#new_question')[0].submit() if there is no poet_name_field.

Why doesn’t the form submit when true is returned? My workaround is worrisome; it seems possible that the form might submit twice now: once when I explicitly submit it, and once when true is returned.

Answer by brains911

brains911brains911

You should bind to the form ‘submit’ event and use preventDefault/return false when you want someone to sign up instead of submitting the poem. This way there is no need to do any disabling/enabling of buttons.

Answer by Starx

StarxStarx

I dislike the idea of not having a form. Its invalid and sure to not follow HTML’s Specification.

Every constructive form elements should be wrap inside a form tag. You can control the submission of form in more than one way.

The code you are using is horrible

  1. WHY?? Is there more than one submit button? The code below disables every submit button on the page, which can be of other forms too.

    $('#submit-poem').click ->
  $('input[type=submit]').attr('disabled', true)

  2. This is wrong way to check the authenticity of submission, it can be easily manipulated with tools like firebug.

    if $('#new_poet_name_field').length
    signUp();

If finding out if the user is logged in or not that important, then you can quickly send an ajax request to a service page, that gets you that information

$('#submit-poem').click(function() {
    $(this).attr('disabled', true)
    $.post("yourservicepage.php", {}, function(data) {
          // RE suppose, data is the boolean value from server indicating logged in or not
          if(data != true) {
             signup(); //if not logged in then signup
          }
          //...
    });
});
...

Please fill the form - I will response as fast as I can!