bootstrap的模态ajaxform提交变量和图像

时间:2014-02-03 06:55:45

标签: jquery twitter-bootstrap ajaxform

所以,...目前我正在创建一个带有一些输入文本和图像上传字段的表单,我正在使用ajaxForm来处理该过程,并使用bootstrap 3作为模态(这个页面我称之为表单页面)。在此页面中,我还将显示数据库中的所有数据列表。

场景是,当用户点击按钮时,它将触发引导模式打开(完美地工作)表单在其中。当用户单击提交按钮时,表单将把所有字段值发送到处理页面,这是完美的。

所有值都完美地发送到进程页面,它很好地返回表单页面中的成功消息,但它不会显示新插入的查询。我需要手动刷新页面以显示新添加的查询。我不知道我的代码或ajax有什么问题。

对于您的信息,我使用ajaxForm插件来处理表单(http://malsup.com/jquery/form/),Bootstrap和Jquery

这是我目前的代码:

<div id="add_sku" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">*Some text here*</div>
<div class="modal-body">
<form id="addProduct" class="addnew" name="addProduct" method="post" enctype="multipart/form-data" data-ajax="true" action="add_product.php">
.... *the rest of the form field which is input text and image upload*
</div>
</div>
<div class="modal-footer" id="form">
<input name="submit" type="submit" class="btn btn-success" id="addpid" value="submit" />
<input name="Reset" type="reset" class="btn btn-default" value="Cancel" data-dismiss="modal" data-target="div#add_sku" />
</div></form>
</div></div></div>
</div>

和我的js:

<script type="text/javascript">
  $(document).ready(function(e) {
    $('form#addProduct').submit(function(){
       var options={
    success:function(r){
    $('div#confirm').css('display','').html(r).delay(2500).slideUp('slow');
    $('div#add_sku').modal('hide');
    },
    clearForm:true,
    resetForm:true,
    type:'post',    
    }
     $(this).ajaxSubmit(options);
        return false;
      });
    e.preventDefault();
});
</script>

3 个答案:

答案 0 :(得分:0)

如果你使用的是jquery,那么this might help you.

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

答案 1 :(得分:0)

试试这个:

 <script type="text/javascript">
    $('#addProduct').submit(function(){        
        $.post($(this).attr('action'), $(this).serialize(), function(res){
            $('#confirm').css('display','').html(res).delay(2500).slideUp('slow')                    
        }).fail(function() {
            alert( "error" );
        });

        return false; // preventing default
    });
  </script>

请记住设置表单操作:“add_product.php”

答案 2 :(得分:0)

最后经过一系列尝试和错误后,我明白了

我的脚本的更新版本&amp;它对我有用

$(function(e) {
    $('form#addProduct').submit(function(){
        $(this).ajaxSubmit({
            url:'add_product.php',
            type:'post',
            clearForm:'true',
            resetForm:'true',
            cache:'false',
            success:function(msg){                         
                $('div#confirm').slideDown("fast").html(msg).delay(2000).slideUp('slow');
                $('div#add_sku').modal('hide');
                $('div#showcase').load('show_product.php');
            },
            complete:function(){            
                $('form#addProduct').resetForm();
                $('form#addProduct').clearForm();
            },
            error:function(err){
                $('div#message').css('display','').html(err);
                $('form#addProduct').resetForm();
                $('form#addProduct').clearForm();
            },
        });
    return false;
});