Ajax表单进度重定向

时间:2015-01-21 22:07:25

标签: javascript jquery ajax

我有一个表单,我一直试图让进度条工作。这个表单在joomla中,我设法获得一个Ajax进度条,以显示何时上传文件。然而,表单的通常习惯是,当它被提交时,它将转到表单所关联的项目页面,并将在该页面上给出确认,表明它已被保存。

然而,使用这个新的Ajax进度条,条形图达到100%并且查看firebug它显示POST和GET都成功但问题是浏览器停留在表单页面上而没有原始重定向到相同的GET网址?

部分代码如下:

    JHTML::_('behavior.mootools');
    JHTML::_('behavior.formvalidation');

    $document =& JFactory::getDocument();

    $document->addScript('components/com_component/assets/validate.js');
    $document->addScript('jquery-1.7.js');
    $document->addScript('jquery.form.js');
    $document->addScript('custom.js');

    <form action="index.php" method="post" name="nameForm" id="idForm" enctype="multipart/form-data" class="form-validate">
<input type="file" name="item_file" id="item_file"/></td>

然后在custom.js

$(document).ready(function()
{

    $('#item_file').change(function(){
        $('#submit').removeAttr('disabled');
    });

    $('#submit').change(function(){
        $('#progress').removeClass('hide');
    });


    var options = {

    beforeSend: function()
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },

    uploadProgress: function(event, position, total, percentComplete)
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },

    success: function()
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },

    complete: function(response)
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },

    complete: function()
    {

    },

    error: function()
    {


    }

};

     $("#idForm").ajaxForm(options);
});

我可以添加到custom.js中,以便在上传进度条完成时仍然会发生默认操作或重定向。

感谢。

2 个答案:

答案 0 :(得分:0)

更改您成功调用Ajax以转到目标页面:

  success: function()
    {
        $("#bar").width('100%');
        $("#percent").html('100%');
        //Go to new page
        window.location.href= 'index.php';

    },

答案 1 :(得分:0)

我有同样的问题,我已经解决了。

100%有效;)

添加

  

行动=&#34;的javascript:无效(0)&#34;

到您的表单并使用

  

window.location.href

在你的ajax成功中发挥作用。