Hiển thị hộp thoại

snackbar alert

* Gọi hàm JS trong angular từ của sổ popup
******************

1. Không dùng Angular

b1. Tạo button click
<button type='button' class="btn btn-success" id="bt_popup" p_w="500px" p_h="200px" p_t="XIN CHAO" p_l="https://nhatthanh.net" data-toggle="modal" data-target="#Obj_popup" ><i class="fas fa-plus-circle"></i></button>

b2. Html chèn thêm:

<div class="modal fade" id="Obj_popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" style="max-width:95%;height: 90%;" >
    <div class="modal-content scrollablewrapper"   >
      <div class="modal-header">
        <strong style="text-transform:uppercase" class="text-primary title_pp">tieu de</strong>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="Obj_myModalLabel" >close</h4>
      </div>
      <div class="modal-body">
       <iframe width="100%" id="Obj_popup_frame" frameborder="0" allowtransparency="true" name="theframe" ></iframe>
      </div>
    </div>
</div>
</div>

b3. Javascrip chèn thêm:

b3.1 Xử lý đơn giản
<script>
function LoadData()
{
    $(".bt_refesh").trigger( "click" );
}
function Close_Popup()
{
    $(".close").trigger( "click" );
}
$("#bt_popup").click(function(){
    var url_go=$(this).attr('p_l');
    var w=$(this).attr('p_w');
    var h=$(this).attr('p_h');
    var t=$(this).attr('p_t');
    OepenUrlPopup(url_go,w,h,t);
});
function OepenUrlPopup(url_go,width,height,title)
{
   style="width:100%;height:"+height+";";
    $(".title_pp").html(title);
    var style_modal_dialog="max-width:"+width+";height: 90%;";
    $(".modal-dialog").attr("style",style_modal_dialog);
    $("#Obj_popup_frame").attr("style",style);
    $("#Obj_popup_frame").attr("src",url_go);
}
</script>

* Từ cửa số cha muốn xử lý lệnh dùng như sau
<script>
window.parent.lệnh; ví dụ: window.parent.location="http://google.com";          window.parent.hàm_viết_bên_trang_con() ;
window.parent.location.reload();   //nạp lại web
</script>
Chèn đầu:
<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

<script src="/vendor/jquery/jquery-1.12.4.js" type="text/javascript"></script>
<script src="/vendor/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="/vendor/jquery/loader.js" type="text/javascript"></script>

Chèn cuối:
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/vendor/datatables/jquery.dataTables.js"></script>
<script src="/vendor/datatables/dataTables.bootstrap4.js"></script>

2. Có dùng Angular
Thêm thẻ a
<a href="#" class="bt_popup" ng-click="OpenPopupW('https://nhatthanh.net?config_sys=nomaster&popup=1','95%','700px','SỬA')" data-toggle="modal" data-target="#Obj_popup_pIIF">TEN</a>

chèn vào hàm : app.controller('customersCtrl', function($scope, $http) {

$scope.OpenPopupW= function(url,w,h,title) {
        // alert(url);
            IIF_f_OepenUrlPopup(url,w,h,title);
         };
* Một số hàm đã định nghĩa sẵn ở masterpage

IIF_f_Close_Popup() - đóng cửa sổ
IIF_f_Close_Popup_R - đóng cửa sổ có nạp lại web

Click Xem thêm

* Từ của sổ POPUP muốn gọi 1 hàm nằm trong Angular
    Nếu gọi hàm nào đó mà nằm trong app của Angular thì sẽ không gọi được (lỗi) vì hàm đó của Angular

Cách 1: gọi bằng trigger
<input id="btXuLy" type="button" value="OK" />
B1:
<script>
$("#btXuLy").click(function(){
    window.parent.alert_pIIF('thông báo','Lưu thành công !'); // hàm thông báo bên dưới
    window.parent.$('#btNapDonHang').trigger("click"); // với btObj là tên Id của HTML, có thể dùng class
    window.parent.IIF_f_Close_Popup() ; // hàm đóng popup, xóa nếu không cần dùng
});
</script>

B2: Từ trang cha
Thêm một nút lệnh:
<a id="btNapDonHang" href="#" ng-click="loadDonHang()"><i class="fas fa-sync-alt"></i></a>
   * HTML phải nằm trong <div ng-app="myApp"   ng-controller="myCtrl"> ...

Cách 2: gọi bằng hàm ở trang cha bằng nút lệnh ở trang popup

B1: Từ của sổ Popup
<input id="btXuLy" type="button" value="OK" />

<script>
$("#btXuLy").click(function(){
    window.parent.alert_pIIF('thông báo','Lưu thành công !'); // hàm thông báo bên dưới
    window.parent.HamXuLy() ;
    window.parent.IIF_f_Close_Popup();
});
</script>

B2: Từ trang cha
Thêm một nút lệnh:
<a id="btNapDonHang" href="#" ng-click="loadDonHang()"><i class="fas fa-sync-alt"></i></a>
   * Nằm trong <div ng-app="myApp"   ng-controller="myCtrl">
Thêm hàm HamXuLy trong Script phía ngoài var app = angular.module("myApp", []);
<script type="text/javascript">

function HamXuLy()
{
   $('#btNapDonHang').trigger("click");
}
    //Phía trên var app
    var app = angular.module("myApp", []);
    // .....

</script>

Mục liên quan:

0935999617