ajaxSubmit 的回调函数不触发

发布于 2024-11-09 17:44:08 字数 2080 浏览 0 评论 0原文

来自 使用 jQuery 和 CodeIgniter 上传文件(但没有页面刷新)

@cbrandolino 建议我使用 jQuery 表单插件来解决我的问题。它工作得很好,除了一个问题,回调函数没有像我预期的那样触发。

这是我修改后的代码
++ Javascript ++

$('#send_button').live('click', function(){
    var options = {
        url: 'formHandle/add',
        success: function(){
            alert('something');
        }
        //I tried both function() or function(data) 
        //or a function created outside $(document).ready()
        //None of them works
    };
    $('#new_entry_form').ajaxSubmit(options);
})

++ Controller ++

function add(){
    $array = array(
        'title' => $this->input->post('title'),
        'description' => $this->input->post('description'),
        'content' => $this->input->post('content'),
        'start' => $this->input->post('start'),
        'due' => $this->input->post('due'),
        'price' => $this->input->post('price'),
        'promotion_price' => $this->input->post('promotion_price'),
        'website' => $this->input->post('website'),
        'author' => $this->input->post('author'),
    );

    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['overwrite'] = false;
    $config['remove_spaces'] = true;
    $config['encrypt_name'] = true;

    $this->load->library('upload', $config);
    if($this->upload->do_upload('picture')){
        $array['picture'] = $this->upload->file_name;
        $this->load->model('entry_model');
        $this->entry_model->insertEntry($array);
        echo 'true'; 
        //I tried $this->load->view, echo or return
        //none of them works
    }else{
        echo 'false';
    }
}

文件上传正常,文件已上传到特定文件夹。
数据插入工作正常,数据已按预期插入到数据库中。
我遇到的唯一问题是回调函数。

您知道如何解决这个问题吗?我需要显示数据插入的结果。

更新:
添加 return false 对我没有任何帮助。仍然不工作

from File upload with jQuery and CodeIgniter (But no page refresh)

@cbrandolino suggest me to use jQuery form plugin to solve my problem. It was working well except for one issue, the callbackfunction isn't fire as I expected.

Here's my modified code
++ Javascript ++

$('#send_button').live('click', function(){
    var options = {
        url: 'formHandle/add',
        success: function(){
            alert('something');
        }
        //I tried both function() or function(data) 
        //or a function created outside $(document).ready()
        //None of them works
    };
    $('#new_entry_form').ajaxSubmit(options);
})

++ Controller ++

function add(){
    $array = array(
        'title' => $this->input->post('title'),
        'description' => $this->input->post('description'),
        'content' => $this->input->post('content'),
        'start' => $this->input->post('start'),
        'due' => $this->input->post('due'),
        'price' => $this->input->post('price'),
        'promotion_price' => $this->input->post('promotion_price'),
        'website' => $this->input->post('website'),
        'author' => $this->input->post('author'),
    );

    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['overwrite'] = false;
    $config['remove_spaces'] = true;
    $config['encrypt_name'] = true;

    $this->load->library('upload', $config);
    if($this->upload->do_upload('picture')){
        $array['picture'] = $this->upload->file_name;
        $this->load->model('entry_model');
        $this->entry_model->insertEntry($array);
        echo 'true'; 
        //I tried $this->load->view, echo or return
        //none of them works
    }else{
        echo 'false';
    }
}

The file upload was working, the file was uploaded to the specific folder.
The data insertion was working, the data was inserted to the database as expected.
The only problem I have is the callback function.

Do you have any idea how to fix this? I need to show the result of data insertion.

Update:
Adding return false help me nothing. Still not working

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

对岸观火 2024-11-16 17:44:08

在选项中写回调函数,明确写在这里< /强>

$(document).ready(function() { 
var options = { 
    target:        '#output2',   

    success:       showResponse  // post-submit callback 
 }; 

// bind to the form's submit event 
$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
}); 
}); 

function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}

write callback function in option, clearly written here

$(document).ready(function() { 
var options = { 
    target:        '#output2',   

    success:       showResponse  // post-submit callback 
 }; 

// bind to the form's submit event 
$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
}); 
}); 

function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}
云巢 2024-11-16 17:44:08

您的表单有 onsubmit="return false;" ??

Your form has onsubmit="return false;" ??

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文