jquery - popup no reload

Arief Siswanto

2019-11-16 08:41:20

Reply Share

$(document).ready(function(){ 
        function loadData(){
            var tbody = $("table tbody");
            tbody.html("");
            $.ajax({
                method: "POST",
                url: "http://localhost/peminjamanbuku/api/buku.php"
            }).done(function( models ) {
                parsers = JSON.parse(models);
                
                for(index in parsers){
                    var data = parsers[index];
                    tbody.append('<tr>'+
                    '<td>'+data.kode_buku+'</td>'+
                    '<td>'+data.judul_buku+'</td>'+
                    '<td>'+data.pengarang+'</td>'+
                    '<td>'+
                    '<a href="#" code="'+data.id_buku+'" class="update"><i class="glyphicon glyphicon-eye-open"></i></a> '+
                    '<a href="#" code="'+data.id_buku+'" class="delete"><i class="glyphicon glyphicon-trash"></i></a>'+
                    '</td>'+
                    '</tr>');
                }
            });
        }
        
        loadData();
        
        $(document).on('click', '.update', function(){
            var modal = $("#myModal");
            var id = $(this).attr("code");
            var content = modal.find(".modal-body");
            
            $('.modal-update').show();
            $('#myModal').modal('show'); 
            content.html('<img src="./assets/img/loading.gif" />');
            
            
            $.ajax({
                method: "GET",
                url: "http://localhost/peminjamanbuku/api/buku.php?action=update&id="+id,
                async: true
            }).done(function( models ) {
                data = JSON.parse(models);
                $.ajax({
                    method: "POST",
                    data: data,
                    url: "http://localhost/peminjamanbuku/update.php",
                }).done(function( html ) {
                    content.html(html);
                });
            });
        });
        $('#myModal').on('hidden.bs.modal', function () {
            $(".modal-footer").each(function(){
                $(this).hide();
            });
        });
        
        $("#saveRecord").click(function(){
            var modal = $("#myModal");
            var content = modal.find(".modal-body");
            var form = modal.find(".modal-body form");
            var id = form.attr("id");
            
            $.ajax({
                method: "POST",
                url: "http://localhost/peminjamanbuku/api/buku.php?action=saveUpdate&id="+id,
                data: form.serialize()
            }).done(function( response ) {
                if(response == true){
                    $(".modal-update").hide();
                    content.html("data berhasil tersimpan!");
                    loadData();
                }
            });
        });
    });