Skip to main content

Preview PDF di Modal Bootstrap dengan Ajax

//preview pdf in line
function preview_surat_keputusan(no)
{
$('#form')[0].reset();
$('.form-group').removeClass('has-error');
$('.help-block').empty();

$.ajax({
url : "<?php echo site_url('surat_keputusan/ajax_preview/')?>/" + no,
type: "GET",
dataType: "JSON",
    success: function(data)
    {
    //paramater yang akan ditampilkan di modal
        $('[name="no"]').val(data.no);
        $('[name="ns"]').val(data.ns);
        $('[name="thts"]').val(data.thts);
        $('[name="pdf"]').val("http://localhost/dosdm/document/sm/pdf/"+data.thts+"-SK-"+data.ns+".pdf");
        var link_base =  "http://localhost/dosdm/document/sm/pdf/"+data.thts+"-SK-"+data.ns+".pdf" ;
            $('#pdf_view').attr('src', link_base);
                   

            //bereksperimen
        $('#modal_form_1').modal('show');
        $('.modal-title').text('preview_surat_keputusan');
    //-----   
    },
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}

function reload_table()
{
table.ajax.reload(null,false);
}


//==========================//



Modal:





<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form_1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"></h3>
</div>

<div class="form-group">
<label class="control-label col-md-3">Nama File</label>
<div class="col-md-9">
<input name="pdf" class="form-control" type="text">
<span class="help-block"></span>
</div>
<div style="text-align: center;">
    <iframe  class="form-control" src="" id="pdf_view" style="width:100%; height:500px;" frameborder="0"></iframe>
</div>       
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

===


ajax di control"

====
public function ajax_preview($no)
{
$data = $this->sk->get_by_id($no);
echo json_encode($data);
}

Comments

Popular posts from this blog

Menggenerate nomor id

<?php //config $database = "dopo"; $tabel = "po"; $kolom_generate ="id"; $kolom_referensi = "id"; /* Database connection start */ $servername = "localhost"; $username = "root"; $password = ""; $dbname = $database; $mysqli = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $q1 = "select * from $tabel order by $kolom_referensi DESC"; /* Database connection end */ echo '<table>'; // connect to the database // number of results to show per page $per_page = 10000; // figure out the total pages in the database if ($result = $mysqli->query($q1)) { if ($result->num_rows != 0) { $total_results = $result->num_rows; // ceil() returns the next highest integer value by rounding up value if necessary $total_pages = ceil($total_results / $per_page); // check if the 'page' variab...

CRUD dengan vue.js

pada tutorial kali ini kita akan belajar cara menampilkan data mengunakan  Vue JS  di framework  Codeigniter,  di dutorial sebelumnya kita sudah mempelajari cara Crud mengunakan Vue JS dan Codeigniter, kalian bisa lihat tutorialnya disini  CRUD CODEIGNITER DAN VUE JS  . kali ini kita akan mencoba menampilkan data yang ada pada database dengan framwork codeigniter dan vue js, untuk koneksi database di codeigniter adalah : <?php defined('BASEPATH') OR exit('No direct script access allowed'); $active_group = 'default'; $query_builder = TRUE; $db['default'] = array(     'dsn'    => '',     'hostname' => 'localhost',     'username' => 'root',     'password' => 'root',     'database' => 'civue',     'dbdriver' => 'mysqli',     'dbprefix' => '',     'pconnect' => FALSE,     ...