zoukankan      html  css  js  c++  java
  • 添加供应商按确定添加的按钮的时候 不刷新页面 用ajax异步请求给页面的option赋值————

    <div class="form-group">
                                <label class="col-lg-2 control-label">供应商</label>
                                <div class="col-lg-9">
                                    <div class="input-group input-large">
                                        <select id="supplierId" name="warehouseRecord.supplierId"
                                            class="form-control"> #for(item:supplierList)
                                            <option value="#(item.id)">#(item.name)</option> #end
                                        </select> <span class="input-group-btn">
                                            <button id="btnAddSupplier" type="button" class="btn default"
                                                #if(!flag) disabled="disabled" #end  href="#res" data-toggle="modal">新增供应商</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                                    
    
    
    <!-- 添加供应商弹出框 -->
    <div class="modal fade draggable-modal" id="res" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    
                    <h4 class="modal-title" style="text-align: center;">新增供应商</h4>
                </div>
    
                <div class="modal-body">
                    <div class="row">
                        <label class="col-md-3 control-label ">供应商名称<span
                            class="required" aria-required="true"> * </span>
                        </label>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-medium" id="name"
                                name="storeSupplier.name" placeholder="请输入" required />
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label class="col-md-3 control-label ">供应商地址</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-medium" id="address"
                                name="storeSupplier.address" placeholder="请输入" />
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label class="col-md-3 control-label "> 联系人<span
                            class="required" aria-required="true"> * </span>
                        </label>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-medium"
                                id="principal" name="storeSupplier.principal" placeholder="请输入" required />
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label class="col-md-3 control-label ">联系电话</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-medium" id="phone"
                                name="storeSupplier.phone" placeholder="请输入" />
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label class="col-md-3 control-label ">备注</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-medium"  id="remark"
                                name="storeSupplier.remark" placeholder="请输入" />
                        </div>
                    </div>
                </div>
                
                <div class="modal-body"></div>
                <form></form>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" id="ons" class="btn btn-outline btn-danger">取消</button>
                    <button type="submit" onclick="addSuppli();" class="btn green">确认</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    
    </div>
    #end
    
    #define js()
    <script src="#(context)/assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>
    <script src="#(context)/assets/admin/barcode/jquery-barcode.min.js" type="text/javascript"></script>
    <script>
    
    //添加供应商确定按钮 的点击事件
    function addSuppli() {
        var name = $('#name').val();
        var principal = $('#principal').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var remark = $('#remark').val();
        
        if(name == "" || principal == ""){
    
            bootbox.alert({
                message : "供应商名称或联系人不能为空!",
                buttons : {
                    ok : {
                        label : '确定',
                        className : 'btn-success'
                    }
                }
            });
            return;
            
        }else{
            
            $.ajax({    
                url : "#(context)/goods/storage/addStoreSupplier",
                type : 'POST',
                data : {
                    "name" : name,
                    "address" : address,
                    "principal" : principal,
                    "phone" : phone,
                    "remark" : remark
                },
                success : function(data) {
                    debugger;
                    $("#ons").click();    
                    $("#supplierId option").remove();
                    $.each(data.data.storeSupplist, function(i, obj){
                        $("#supplierId").append("<option value='"+ obj.id+"'>"+ obj.name +"</option>")
                    });
                }
                
            });
        }
    }
    //不刷新页面 点击添加供应商的时候 就要把之前填写过的内容清空
    $("#btnAddSupplier").click(function(){
        $("#remark").val("");    
        $("#name").val("");
        $("#principal").val("");
        $("#address").val("");
        $("#phone").val("");
    });
  • 相关阅读:
    Asp.Net图片上传
    JQuery实现CheckBox全选全不选
    DES加密解密公用方法(详细注释)
    sysobjects
    window.onload和$(document).ready()区别
    Ajaxpro2 实现三级联动
    idea Mac版过期处理方法.适用于JetBrains全家桶
    rabbitmq报错Failed to start RabbitMQ broker
    pip install image 失败,加上国内源
    关于系统程序员的一些感悟
  • 原文地址:https://www.cnblogs.com/wuaili/p/8567243.html
Copyright © 2011-2022 走看看