Cara Menambahkan Edit dikomentar dengan jQuery Dialogify part 1

Modal windows adalah popover yang paling umum digunakan untuk meminta input dari pengguna. Add Edit Komentar dengan jendela dialog modal akan meminimalkan upaya desain. Ada berbagai cara untuk menampilkan popover sebagai jendela pop-up, kotak dialog atau overlay. Dalam tutorial ini, saya telah menunjukkan kotak dialog untuk menampilkan form tambah / edit komentar.

Dalam contoh ini, saya telah menggunakan Dialogify library berbasis jQuery untuk menampilkan jendela modal. jQuery Dialogify adalah plugin yang mudah, ringan dan dapat disesuaikan. Plugin Dialogify memungkinkan pengguna untuk memasukkan segala jenis HTML ke dalam kotak Dialog. Ini juga mendukung pengguna untuk bermain-main dengan event call back.

Dalam sistem komentar PHP AJAX ini, jendela modal digunakan untuk menampilkan form HTML untuk menambahkan komentar edit. Fungsi jQuery AJAX digunakan untuk mengimplementasikan sistem komentar berbasis AJAX di PHP.

Ada berbagai cara untuk menampilkan kotak dialog dengan menggunakan plugin Dialogify ini. Saya telah membuat file terpisah dengan komentar tambahkan dan edit form HTML. Saat menginisialisasi plugin Dialogify, nama file ini ditentukan untuk memuat form HTML ke dalam jendela dialog. Saya telah mempelajari cara melakukan add edit dengan kotak dialog menggunakan jendela jQuery modal.

Tampilan HTML List AddÂ dengan Opsi edit Komentar

Ini adalah halaman utama yang memuat file library dependen dan menginisialisasi fungsi library untuk membuat output yang diharapkan. Saat memuat halaman ini, data komentar dinamis diambil dari database dan ditampilkan dalam daftar dengan opsi untuk menambahkan komentar baru. Juga, setiap baris komentar akan memiliki opsi edit. Event klik tambah dan edit kontrol akan memicu plugin Dialogify.

<?php
require_once ('db.php');
?>
<!doctype html>
<head>
<script type="text/javascript" src="vendor/jquery/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="vendor/dialogify/dialog-polyfill.js"></script>
<script type="text/javascript" src="vendor/dialogify/dialogify.js"></script>

<script type="text/javascript"
    src="vendor/dialogify/dialogify.min.js?v2"></script>

<script type="text/javascript" src="editRecords.js"></script>

<link rel="stylesheet" type="text/css" media="all"
    href="vendor/dialogify/dialogify.css">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>

    <h2>Add Edit Comments using jQuery Dialogify</h2>

    <div id="container">
            <?php
            $selectQuery = "SELECT * FROM tbl_comments";
            $result = $conn->query($selectQuery);
            if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    ?>
                    <div class="comment-row">

            <div id="editFrame">

                <div id="name_val<?php echo $row['id']; ?>">
                                        <?php echo $row['name']; ?>
                                    </div>
                <div id="website_val<?php echo $row['id']; ?>">
                                        <?php echo $row['website']; ?>
                                    </div>

                <div id="content_val<?php echo $row['id']; ?>"
                    class="comment-message">
                                        <?php echo $row['content']; ?>
                                    </div>
                <input type='button' class="btn-edit"
                    id="<?php echo $row['id']; ?>" value="Edit"
                    onclick="edit_row('<?php echo $row['id']; ?>');" />

            </div>
        </div>

                    <?php
                }
            }
            ?>
            <input id="insert_button" type="button" class="btn-submit"
            value="Create a comment" />
    </div>
</body>
</html>

<?php

require_once ('db.php');

<!doctype html>

<head>

src="vendor/dialogify/dialogify.min.js?v2"></script>

href="vendor/dialogify/dialogify.css">

</head>

<body>

<h2>Add Edit Comments using jQuery Dialogify</h2>

<?php

$selectQuery = "SELECT * FROM tbl_comments";

$result = $conn->query($selectQuery);

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

<?php echo $row['name']; ?>

</div>

<?php echo $row['website']; ?>

</div>

<div id="content_val<?php echo $row['id']; ?>"

class="comment-message">

<?php echo $row['content']; ?>

</div>

<input type='button' class="btn-edit"

id="<?php echo $row['id']; ?>" value="Edit"

onclick="edit_row('<?php echo $row['id']; ?>');" />

</div>

<?php

}

<input id="insert_button" type="button" class="btn-submit"

value="Create a comment" />

</div>

</body>

</html>

jQuery Script to Call berfungsi untuk Menambahkan Edit Komentar

Semua kode JavaScript jQuery ada di file editRecords.js. Dalam file ini, ini berisi event handlers dan juga termasuk handlers aksi edit. Dalam kode ini, Dialogify jQuery diinisialisasi dan memuat form tambahkan komentar edit terkait pada event klik sisipan atau edit kontrol.

Proses inisialisasi membutuhkan HTML atau sumber untuk dimuat dalam bentuk dialog atau modal. Selain itu, diperlukan serangkaian opsi seperti judul, spesifikasi tombol jika ada. Dalam contoh ini, saya telah menetapkan pengaturan untuk dua tombol Oke dan Batal. Dengan mengklik Oke, tindakan Tambahkan Edit komentar akan dilakukan melalui AJAX.

Setelah melakukan tindakan menambah atau mengedit yang berhasil, data komentar yang baru-baru ini diperbarui akan dimuat ke UI. Panggilan balik sukses AJAX adalah titik yang tepat di mana kode ditulis untuk mendapatkan respons AJAX dan memperbarui komentar UI dengan data respons.

$(document).ready(function () {
	var options = {
		    ajaxPrefix: ''
		};

    $('#insert_button').click(function () {
    
    		new Dialogify('add-form.php', options)
                .title('Create New Comment')
                .buttons([
                    {
                        text: 'Cancel',
                        click: function (e) {
                            console.log('cancel click');
                            this.close();
                        }
                    },
                    {
                        text: 'Okay',
                        type: Dialogify.BUTTON_PRIMARY,
                        click: function (e) {
                            var name = document.getElementById("username").value;
                            var website = document.getElementById("website").value;
                            var content = document.getElementById("new_content").value;
                            $.ajax
                                    ({
                                        type: 'post',
                                        url: 'comment-add.php',
                                        data: {
                                            insert_row: 'insert_row',
                                            name: name,
                                            website: website,
                                            content: content
                                        },
                                        success: function (response) {
                                            if (response != "")
                                            {
                                                var id = response;
                                                var row = "<div id='name_val" + id + "'>" + name + "</div><div id='website_val" + id + "'>" + website + "</div><div id='content_val" + id + "'>" + content + "</div><input type='button' class='edit_button' id='edit_button" + id + "' value='Edit' onclick='edit_row(" + id + ");'/>";
                                                $('#container').append(row);
                                                document.getElementById("username").value = "";
                                                document.getElementById("website").value = "";
                                                document.getElementById("new_content").value = "";
                                            }

                                            location.reload();
                                        }
                                    });
                            this.close();
                        }
                    }
                ]).show();
    });
});

function edit_row(id)
{
            var name = $.trim(document.getElementById("name_val" + id).innerHTML);
            var website = $.trim(document.getElementById("website_val" + id).innerHTML);
            var content = $.trim(document.getElementById("content_val" + id).innerHTML);
			localStorage.setItem('name',name);
			localStorage.setItem('website',website);
			localStorage.setItem('content',content);
			
		var options = {
		    ajaxPrefix: '',
			 
		};

    new Dialogify('edit-form.php', options)
            .title('Edit Comment')
            .buttons([
                {
                    text: 'Cancel',
                    click: function (e) {
                        console.log('cancel click');
                        this.close();
                    }
                },
                {
                    text: 'Okay',
                    type: Dialogify.BUTTON_PRIMARY,
                    click: function (e) {
					  					   
                        var name = $('#username').val();
                        var website = $('#website').val();
                        var content = $('#edit_content').val();
                        $.ajax
                                ({
                                    type: 'post',
                                    url: 'comment-edit.php',
                                    data: {
                                        edit_row: 'edit_row',
                                        id: id,
                                        name: name,
                                        website: website,
                                        content: content
                                    },
                                    success: function (response) {
                                        if (response == "success")
                                        {
                                            document.getElementById("name_val" + id).innerHTML = name;
                                            document.getElementById("website_val" + id).innerHTML = website;
                                            document.getElementById("content_val" + id).innerHTML = content;
                                        }
                                    }
                                });
                        this.close();

                    }
                }
            ]).show();
			
    $('#username').val(name);
    $('#website').val(website);
    $('#edit_content').val(content);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

$(document).ready(function () {

var options = {

ajaxPrefix: ''

};

$('#insert_button').click(function () {

new Dialogify('add-form.php', options)

.title('Create New Comment')

.buttons([

{

text: 'Cancel',

click: function (e) {

console.log('cancel click');

this.close();

}

{

text: 'Okay',

type: Dialogify.BUTTON_PRIMARY,

click: function (e) {

var name = document.getElementById("username").value;

var website = document.getElementById("website").value;

var content = document.getElementById("new_content").value;

$.ajax

({

type: 'post',

url: 'comment-add.php',

data: {

insert_row: 'insert_row',

name: name,

website: website,

content: content

success: function (response) {

if (response != "")

{

var id = response;

var row = "<div id='name_val" + id + "'>" + name + "</div><div id='website_val" + id + "'>" + website + "</div><div id='content_val" + id + "'>" + content + "</div><input type='button' class='edit_button' id='edit_button" + id + "' value='Edit' onclick='edit_row(" + id + ");'/>";

$('#container').append(row);

document.getElementById("username").value = "";

document.getElementById("website").value = "";

document.getElementById("new_content").value = "";

}

location.reload();

}

});

this.close();

}

]).show();

});

function edit_row(id)

{

var name = $.trim(document.getElementById("name_val" + id).innerHTML);

var website = $.trim(document.getElementById("website_val" + id).innerHTML);

var content = $.trim(document.getElementById("content_val" + id).innerHTML);

localStorage.setItem('name',name);

localStorage.setItem('website',website);

localStorage.setItem('content',content);

var options = {

ajaxPrefix: '',

};

new Dialogify('edit-form.php', options)

.title('Edit Comment')

.buttons([

{

text: 'Cancel',

click: function (e) {

console.log('cancel click');

this.close();

}

{

text: 'Okay',

type: Dialogify.BUTTON_PRIMARY,

click: function (e) {

var name = $('#username').val();

var website = $('#website').val();

var content = $('#edit_content').val();

$.ajax

({

type: 'post',

url: 'comment-edit.php',

data: {

edit_row: 'edit_row',

id: id,

name: name,

website: website,

content: content

success: function (response) {

if (response == "success")

{

document.getElementById("name_val" + id).innerHTML = name;

document.getElementById("website_val" + id).innerHTML = website;

document.getElementById("content_val" + id).innerHTML = content;

}

});

this.close();

}

]).show();

$('#username').val(name);

$('#website').val(website);

$('#edit_content').val(content);

}

Output dari script di atas

Cara Menambahkan Edit dikomentar dengan jQuery Dialogify part 1

Facebook DUMET School

Konsultasi Gratis

Categories