Question

我有一个包含多个文件输入（图像）的配置文件编辑表单，我想刷新表单并在成功回调时将最新更新的数据（图像）提取/显示回相同的表单，而无需整页刷新。

$("#mylisting_form").ajaxForm({
        dataType: "json",
        beforeSend: function() {
            var btn = $('#btn_mylisting');
            btn.button('loading')
    },
    uploadProgress: function(event, position, total, percentComplete) {
        console.log(percentComplete); // Show the completed percent 
    },
    success: function(response) {

        if(response.success == 'success'){
            $('#form').reset();
            $('#successful').html('<b>Edited saved!</b>').show();

        }else{
            $('[id$="_error"]').html('');
            $.each(response.error, function(key, value){
                if(value){
                    $('#' + key + '_error').html(value);
                }
            });
        }
        $('#btn_mylisting').button('reset');
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log(errorThrown );
    }

}); 

//form
<div id="form">
                <form class="form-horizontal" role="form" method="post" id="mylisting_form" enctype="multipart/form-data" action="inc/callback/request_update_item.php">

                    <input type="hidden" name="user_id" value="<?php echo $data->user_id ?>">
                    <input type="hidden" name="list_id" value="<?php echo $list_id ?>">

                    //uploaded image will show here
                    <div id="show_images"><? php fetch image goes here ?></div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="photo">Photo</label>
                        <div class="col-sm-7"><input type="file" name="files[]" class="multi" accept="gif|jpg" maxlength="3" /><p class="help-block">Up to 3 photos max.</p></div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="publish"></label>
                        <div class="col-sm-7"><input type="checkbox" name="publish" <?php echo $checked ?>> Publish</div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="email">Name</label>
                        <div class="col-sm-7"><input type="text" class="form-control" id="name" name="name" value="<?php echo $list->name ?>"><span class="error" id="name_error"></span></div>
                    </div>

                    <hr />
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-7"><button class="btn btn-success" id="btn_mylisting" type="submit" data-loading-text="Loading...">Save</button></div>
                    </div>
                </form>
</div>

Ajax请求（request_update_item.php）只有回调成功或错误状态，它不会将后期数据恢复到响应中，我觉得很简单，这就是为什么我要问的是可能只刷新整个{{ 1}}或div仅用于特定项目以显示从数据库中获取的更新信息。

感谢您的建议！

Answer 1

您可以先设置html，然后显示：

$('#successful').html('<b>Edited saved!</b>').show();

Answer 2

您是否可以使用像Mustache或Handlebars这样的模板javascript框架，以便动态重建您的表单？

你的形象到底是什么？

Answer 3

我不确定你在寻找什么，但是......

$('#form').reset();

成功回调后重新加载表单

3 个答案: