5

I have a text area that has a .change() handler bound to it. Upon change, it forces an ajax call to save some data. In another part of the page, there is also a form with a submit button.

The desired behavior is that if the user types in the text area, then mouses over the submit button and clicks, the ajax call is made, then the form is submitted.

What appears to be happening is that the click on the button triggers the change() event, but no click happens.

Any recommended ways around this?

Update:

$('#content').click(function(event) {
  console.log("content clicked");
});

$('input#order_is_gift').change(function() {
  console.log("change", event);
  f.cart.set('is_gift', $('input#order_is_gift').prop('checked'));
  f.cart.save();
});

$('textarea#order_gift_text').change(function(event) {
  console.log("change", event);
  f.cart.set('gift_text', $('textarea#order_gift_text').val());
  f.cart.save();
});

Further info: I think the issue is basically the one addressed here: Blur event stops click event from working?

In a best case, I would block until the save() returns, which might solve the problem.

Community
  • 1
  • 1
tilthouse
  • 425
  • 2
  • 10
  • 1
    Please show the code, which doesn't work, otherwise nobody can tell you. – Olaf Dietsche Jan 29 '13 at 23:26
  • It would help a lot if you could post the relevant script and HTML. Otherwise we can only guess as to what may or may not be correctly or incorrectly be implemented. – Nope Jan 29 '13 at 23:27
  • Obviously the `change()` event will be triggered first because the text has been changed in the textarea... Did you specify the `click` handler or not ? Check the browser network area to see if two requests are posted or not – Sushanth -- Jan 29 '13 at 23:28
  • For debugging purposes, I have a click handler. – tilthouse Jan 29 '13 at 23:34
  • Keeping `f.cart` up to date with form settings and values as they are changed may be an unnecessary complexity. You can probably update `f.cart` just before the form (or its data) is submitted (and on other qualifying events as necessary). – Beetroot-Beetroot Jan 29 '13 at 23:58
  • Which library are you using to make the cart? – pete Jan 30 '13 at 12:15
  • Is this in a rails project? – Btuman Jun 21 '13 at 14:31
  • see this plz http://stackoverflow.com/questions/11338592/jquery-textarea-change-event – Muath Jun 21 '13 at 15:08

2 Answers2

1

Use this-

$('#content').mousedown(function(event) {
  console.log("content clicked");
});

Instead of this-

$('#content').click(function(event) {
  console.log("content clicked");
});
Dakota Kronberger
  • 119
  • 2
0

I'm not sure I'm completely clear on your issue.

The desired behaviour is that if the user types in the text area, then mouses over the submit button and clicks, the ajax call is made

So you only want the ajax to fire when you click the button? Not as soon as you change the field data? If that's the case, the code in your change handler should be in your click handler and you don't need to bind change at all.

As for the click itself not happening, do you mean the form doesn't submit? or that you aren't hitting the line below?

console.log("content clicked");

If it's the latter, are you sure 'content' is the id of your button? If it's that the form isn't submitting, make sure your click handler isn't returning false

Nick Cardoso
  • 20,807
  • 14
  • 73
  • 124