在jquery模式窗体对话框中获取ajax响应

Question

I can't get the ajax response when submitting a modal dialog form. It works perfectly when the form is not modal.

The form:

<div id="form2" style="display: none">
    <form id="objectInsert" action="element/create" method="POST" enctype="multipart/form-data">  
        <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" name="name" id="name"/>
        </div>

        <div class="form-group">
            <label for="description">Description</label>
            <textarea class="form-control" name="description"></textarea> 
        </div>
    </form>

Here i get the ajax success part in the console!

$("#objectInsert").submit(function(e) {
    e.preventDefault();
    resetErrors();
    var form = this;
    var url = $(this).attr('action');
    var data = new FormData($(this)[0]);
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'json',
        cahe:false,
        processData: false,
        contentType: false,
        success: function(resp) {
            console.log(resp);//Working
        },
        error: function() {
            console.log('there was a problem checking the fields');
        }
    });
});

Here i get the ajax error part in the console! can someone tell me where i'm doing wrong?

    $("#add_element").click(function(){
        $("#form2").dialog({
            modal:true,
            width:400,
            buttons:{
                Send:function(e){
                    e.preventDefault();
                    var form = $("#objectInsert");
                    var url = form.attr('action');
                    var data = new FormData(form[0]);
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        dataType: 'json',
                        cahe:false,
                        processData: false,
                        contentType: false,
                        success: function(resp) {
                            console.log(resp);//not working
                        },
                        error: function(xhr, status, error) {
                            console.log('there was a problem checking  the fields');
                            console.log(xhr);
                            console.log(error);
                        }
                    });
                    return false;

                },
                Cancel:function(){
                    $(this).dialog("close");
                }
            }
        });
    });

The controller

public function create() {
    try{
        $this->form = new Form();
        $this->form->post('name');
        $this->form->val('isEmpty', 'name');
        $this->form->post('description');
        $this->form->val('isEmpty', 'description');

        $this->form->fetch();
        $this->form->submit();

        $data = $this->form->get_postData();

        $this->model->insert($data);

        echo json_encode('success');
    } catch (Exception $ex) {
        $errors = $this->form->get_error();
        $_SESSION["errors"] = $errors;
        //This is for ajax requests:
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  
                strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) 
                == 'xmlhttprequest') {
            echo json_encode($_SESSION['errors']);
            exit;
        }

        foreach ($_SESSION["errors"] as $errors){
            echo $errors;
            echo '<br/>';
        }exit;
    }
}

Answer 1

see this code you have not closed the function block

success: function(resp) {
         console.log(resp);//not working
       },//This is not closed for success function
error: function() {
         console.log('there was a problem checking the fields');
       }