jqueryajaxcakephp-2.1helper

Built in this->js->submit cakephp runs twice

Fellow programmers.

I only found this reference to my problem, which did not help.

I am having trubble with cake phps built in $this->Js->submit

What I want to do:

Site on which my logic starts contains a table with my data. On this site I also have several elements that contain forms and are opened by a modal window (jquery ui dialog)

  1. Insert an object to database. (working)
  2. The form by which I insert is in a modal dialog window. (working)
  3. The submit button is an image. (working)
  4. Before the form is submitted, validation is fired (working)
  5. After the form is submitted, close the modal and put new object on the first line of a table (working).

So what is my problem?

Everything fires twice.

** CODE **

Since All my other code seems to be working I'm gonna paste only the $this->Js->submit part of my code, so you guys can focus on what seems to be the problem.

If any other code is required, please write to me and I will be happy to paste some more in the edit section.

echo $this->Js->submit(' ', array (
        'label' => 'Send',
        'onsubmit'=>"event.returnValue = false; return false;",
        'div'   => array('class' => 'send_button'), //style submit to be an image
        'url'   => array('controller' => 'records', 'action' => 'append_new_record'),
        'type' => 'json',
        'success' => '
            if (data.success == true) {
                $("#element_add").dialog("close");
                var newLine = data.recordLine;
                $("#content").find("table tbody").find("tr:first").before(newLine);
            }
            else { 
                $("#element_add").html(data.form);
            }
            ',
        'buffer' => false, //true did not help (refreshes the whole web site)
        'before' => '
            if (!checkAdd()) { //validation (custom js function)
                return false;
            }
        '
    ));

What I tried

  1. Adding a return false line at the end of 'success' block of code.
  2. Adding an event.preventDefault() at the start of 'before' block of code.

EDIT1 HERE IS THE GENERATED HTML CODE

    </script><div class="send_button"><input  id="submit-1182269389" type="submit" value=" "/></div><script type="text/javascript">

$("#submit-1182269389").bind("click", function (event) {$.ajax({beforeSend:function (XMLHttpRequest) {
                if (!checkAdd()) {
                    return false;
                }
            }, data:$("#submit-1182269389").closest("form").serialize(), dataType:"json", label:"Send", onsubmit:"event.returnValue = false; return false;", success:function (data, textStatus) {
                if (data.success == true) {
                    $("#element_add").dialog("close");
                    var newLine = data.recordLine;
                    $("#okno").find("table tbody").find("tr:first").before(newLine);
                }
                else {
                    $("#element_add").html(data.form);
                }
                }, type:"post", url:"\/my_app\/records\/append_new_record"});
return false;});

</script></form>

EDIT2 1. TRY THAT DID NOT WORK

<script type="text/javascript">
    $('#addForm').submit(function(event) {
        event.preventDefault();
    });
</script>

So this blocks the whole ajax thing (the data are appended to the table after refreshing the page and still twice)

Solution

  • I solved this by a great workaround, so if anybody provides information why this is behaving this way I will be glad.

    My solution: