Bagaimana cara x.vote dan x.mark lebih smooth saat di klik tanpa muat ulang halaman?

[yuliakbard]

Seperti yang kita tahu, x.vote dan x.mark ini menggunakan form html. jadi setiap kita click element x.vote atau x.mark pada halaman, akan selalu mereload ulang dan baru muncul data/ hasil dari penggunaan x.vote dan x.mark.

Pertanyaan nya, apa ada sampel penggunaan ajax javascript kang? biar lebih smooth lagi dalam post data nya 🙏

[taufik-nurrohman]

Silakan perbarui ekstensi Mark dan Vote. Saya sudah menambahkan atribut id pada semua formulir untuk memudahkan dalam menyeleksi form yang sama di respons AJAX. Lalu terapkan kode ini. Kode ini akan secara otomatis menerapkan fitur AJAX ke semua formulir dengan nilai atribut name sebagai mark dan vote:

(function (forms) {
    if (!forms.length) {
        return;
    }
    function onSubmit(e) {
        const formData = new FormData(this);
        const previousFormElements = this.elements;
        const previousID = this.id;
        const previousName = this.name;
        // Make sure to carry the value of the submit button as well
        formData.append(previousName + '[value]', previousFormElements[previousName + '[value]'].value);
        fetch(this.action, {
            body: formData,
            method: 'POST'
        }).then(response => response.text()).then(text => {
            const parser = new DOMParser;
            const document = parser.parseFromString(text, 'text/html');
            const currentForm = document.getElementById(previousID);
            if (currentForm) {
                const currentFormElements = currentForm.elements;
                previousFormElements[previousName + '[token]'].value = currentFormElements[previousName + '[token]'].value;
                previousFormElements[previousName + '[value]'].innerHTML = currentFormElements[previousName + '[value]'].innerHTML;
                previousFormElements[previousName + '[value]'].setAttribute('aria-pressed', currentFormElements[previousName + '[value]'].getAttribute('aria-pressed'));
                previousFormElements[previousName + '[value]'].title = currentFormElements[previousName + '[value]'].title;
                previousFormElements[previousName + '[value]'].value = currentFormElements[previousName + '[value]'].value;
            }
        }).catch(console.error);
        e.preventDefault();
    }
    forms.forEach(form => {
        if ('vote' === form.name || 'mark' === form.name) {
            form.addEventListener('submit', onSubmit);
        }
    });
})(Array.from(document.forms));

test-2024-03-26_12.09.32.mp4

[yuliakbard]

Makasih kang

[yuliakbard]

setelah digunakan, ane perhatikan alertnya notifikasi sudah voted up gk ngikut ya kang

[taufik-nurrohman]

Mau dibikin ikut apa?

Cuma untuk naruh alert-nya di tema harus ada identifier khusus.