Enter key on add form causes page to refresh w/o adding row.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use add/delete toolbar.
2. Click 'add'
3. Enter some data in the form and hit the enter key

What is the expected output? What do you see instead?
I would expect that the 'ok' button click would be triggered. Or at a minimum I 
would expect that the enter key to be ignored.
Instead, the form disappears and the page appears to refresh. 

What version of the product are you using? On what operating system?
jquery.datatables.editable: 1.2.1
jquery: 1.6.1
jquery-ui: 1.8.13

Please provide any additional information below.
Base jquery-ui dialog doesn't seem to have this issue (can even verify that 
looking at the jquery-ui demo page).

I haven't been able yet to pinpoint what is happening when hitting enter.
It doesn't appear to be hitting any of the functions inside this plugin (like 
_fnOnCancelRowAdding).

Original issue reported on code.google.com by kenneth....@gmail.com on 2 Jun 2011 at 2:49

[GoogleCodeExporter]

I found a 'workaround' in the mean time (Just need to adjust the #formAddNewRow 
and #btnAddNewRowOk to be whatever might have been passed in for 
sAddNewRowFormId and sAddNewRowOkButtonId)

    $('#formAddNewRow').live('keyup', function(e){
      if (e.keyCode == 13) {
        $('#btnAddNewRowOk').click()
      }
    });

The question still stands, without doing what I did above.. hitting enter will 
just reload the entire page. 
Why? 
What is happening?
Does anyone else see this behaviour?

Original comment by kenneth....@gmail.com on 2 Jun 2011 at 3:18

[GoogleCodeExporter]

Looks like it is because the form doesn't have any buttons on it and the 
default action is ="#".
So when enter is hit, it submits the form to # (page reload).

Trying to capture the enter key was hit and miss.. 

A more reliable way is this instead.
Unbind .submit for that form, and rebind a new submit that triggers the click() 
on the button.

    $("#formAddNewRow").unbind('submit');
    $("#formAddNewRow").submit(function(){
          //simulate click on create button
          $("#btnAddNewRowOk").click();
          return false;
        });

Original comment by kenneth....@gmail.com on 2 Jun 2011 at 3:57

[GoogleCodeExporter]

I have reproduced this probelm - I will take a look at this.

Regards,
Jovan

Original comment by joc...@gmail.com on 2 Jun 2011 at 4:41

• Changed state: Accepted

[GoogleCodeExporter]

FYI. The reason that it isn't happening on the jquery-ui demos is that they 
have a form already in their page defined as <form>. So obviously there is no 
action= attribute, which means that enter just does nothing.

For whatever reason, when you dynamically create the form, the action attribute 
is added to the form and set to ="#". 

Original comment by kenneth....@gmail.com on 2 Jun 2011 at 6:02

[GoogleCodeExporter]

In the latest version I have placed your code but it does not submit form on 
enter it just ignores ENTER key.

For now this is a temporary fix - at least it does not closes the form. I will 
see why this is happening and how can I submit it on ENTER.

Original comment by joc...@gmail.com on 2 Jun 2011 at 6:21

[GoogleCodeExporter]

Sounds good to me.
Thanks for jumping on the issue. 

Oh, and it wasn't you dynamically adding the action="#"..
I forgot that we are responsible for adding the form to the page.. and we had 
placed that attribute on there..   Still same result.. just wanted to call out 
that I wasn't pointing the figure at you for putting the attribute on there..

-k

-k

Original comment by kenneth....@gmail.com on 2 Jun 2011 at 6:28

[GoogleCodeExporter]

I'm cosing this issue.
Ignoring ENTER key/submission will be standard feature in this version of 
plugin.

Original comment by joc...@gmail.com on 3 Jun 2011 at 5:56

• Changed state: Fixed