js amazui 两种modal

一种使用form，button类型为submit，提交后自动刷新

form

<div class="am-modal am-modal-confirm" id="choose_ppa_form" style="top:-10%;">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id=''>Choose PPA<br>
        <font size="2" color="BF2126">Please select the PPA data to be 
　　　　　sent to the customer</font>
        </div>
        <form method='post' id='add_para_form' class='am-form' style="margin-bottom: 0px;">
            <div class="am-modal-bd">
                <table class="am-table am-table-radius am-table-striped am-table-hover">
                    <tr>
                        <td width="30%">PPA IDs<font color='red'>*</font></td>
                        <td width="70%" style='overflow:visible'>
                        <select id="release_ppa_ids" name="release_ppa_ids" data-am-selected=
　　　　　　　　　　　　　　　"{btnWidth: '100%',maxHeight: 200}" >
                            <option value=''></option>
                            <?php 
                            foreach($export_ppas as $ppa){
                                if ($ppa['export_flag']){
                                    echo "<option selected value='$ppa[ppa_id]'>$ppa[ppa_id]</option>";
                                }else{
                                    echo "<option value='$ppa[ppa_id]'>$ppa[ppa_id]</option>";
                                }
                            }
                            ?>
                        </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="am-modal-footer">
                <button class="am-btn-danger" type="submit" style="width: 50%;
　　　　　　　　　　color:#5c5c5c;border-width: 0px;background-color:white;height:44px">OK</button>
                <button class="am-modal-btn" data-am-modal-cancel style="width: 50%;color:#5c5c5c;
　　　　　border-width: 0px;border-left-width: 1px;border-left-color:#dedede;background-color:white">
　　　　　　　　　　Cancel</button>
            </div>
        </form>
    </div>
</div>

js

    function edit_parameter(obj){
        $('#choose_ppa_form').modal({
            relatedTarget: this,
            onCancel:function(e) {
                location.reload();
            }
        })
        
    }

 

 

 

一种使用modal自定义的方法，confirm时，可以使用ajax post

form

<div class="am-modal am-modal-confirm" id="choose_ppa_form" style="top:-10%;">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id=''>Choose PPA<br>
        <font size="2" color="BF2126">Please select the PPA data to be 
　　　　　sent to the customer</font>
        </div>
        <div class="am-modal-bd">
            <table class="am-table am-table-radius am-table-striped am-table-hover">
                <tr>
                    <td width="30%">PPA IDs<font color='red'>*</font></td>
                    <td width="70%" style='overflow:visible'>
                    <select id="release_ppa_ids" name="release_ppa_ids" data-am-selected=
　　　　　　　　　　　　"{btnWidth: '100%',maxHeight: 200}" >
                        <option value=''></option>
                        <?php 
                        foreach($export_ppas as $ppa){
                            if ($ppa['export_flag']){
                                echo "<option selected value='$ppa[ppa_id]'>$ppa[ppa_id]</option>";
                            }else{
                                echo "<option value='$ppa[ppa_id]'>$ppa[ppa_id]</option>";
                            }
                        }
                        ?>
                    </select>
                    </td>
                </tr>
            </table>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-confirm style="width: 50%;
　　　　　　　　color:#5c5c5c;">OK</span>
            <span class="am-modal-btn" data-am-modal-cancel style="width: 50%;
　　　　　　　　color:#5c5c5c;">Cancel</span>
        </div>
    </div>
</div>

js

function edit_parameter(obj){
    $('#choose_ppa_form').modal({
        relatedTarget: this,
        onConfirm: function(e){
            $.ajaxSettings.async=false   //sync
            var arr={'release_ppa_ids':$('#release_ppa_ids').val(),'eid':'{$eid}','edid':'{$edid}'};
            $.post("{:U('Admin/Engagement/update_release_flag')}",arr, function(data){
                if(data){
                    console.log('success to update flag!')
                    location.reload();
                }else{
                    alert('Fail to choose ppa data!')
                    return false;
                }
            });
        },
        onCancel:function(e) {
            return false;
        }
    })
}

 
   
posted @ 2024-01-30 17:26  声声慢43  阅读(35)  评论(0)  编辑  收藏  举报