Ajax reply - all versions

Hi, i wrote my own code to reply without refresh the page, this code works in all version, one code for all forums.
Before, you need "allow external forms" in security tab, on your administration panel.

if your language isn't english you need change this line:

Code: Your message has been entered successfully

from here:

Demo:

10.11.2016 09:00:18 the code has been updated. New system notification.

Old version:

UPDATE 09:32:53 06.01.2018 = for all version

Code:



//----- Written by Chalo ------ Open Source 2014-2018 -----//
//----------http://www.opensourcephpbb3.com --------------//
//------------------- Version: 2.02 ----------------------//
var os = {
    lang: {
        success_reply: 'Your message has been entered successfully',
        flood: 'Flood control is active on this forum, please wait 10 second(s) before replying or posting',
        error_reply: 'Try again',
        words_reply: 'You need 5 letters at least',
        button_send_reply: 'Send data...',
        notice_original: 'No predefined text',
        placeholder: 'Write something...',
        wait_notice: 'Please be patient, sending data to the server',
        color_a: 'linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%)',
        color_b: 'linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%)',
        color_c: 'linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%)',
        color_d: 'linear-gradient(to bottom, #ff3019 0%,#cf0404 100%)',
        color_e: 'linear-gradient(to bottom, #d2ff52 0%,#91e842 100%)'
    },
    control: {
      // change this text exactly like is display in your language board;
        success_reply: 'Your message has been entered successfully',
        flood: 'Flood control is active on this forum, please wait 10 second(s) before replying or posting',
    },
    length_reply: 5,
    init: function () {
        os.isTheme = /\/t\d+/g.test(window.location.pathname);
        os.phpbb2 = document.getElementsByClassName('bodylinewidth').length;
        os.modernbb = document.getElementsByClassName('modernbb').length,
        os.form_reply = os.isTheme && document.forms.post;
        os.button_reply = os.isTheme && document.forms.post.post;
        os.button_value_reply = os.isTheme && document.forms.post.post.value;
        os.textarea = os.isTheme && document.forms.post.message;
        os.action_reply = os.isTheme && document.forms.post.action;
        os.intance = os.isTheme && $(os.textarea).sceditor('instance');
        os.isTheme && (os.form_reply.getElementsByTagName('textarea')[1].placeholder = os.lang.placeholder);
        os.isTheme && os.send_post()
    },
    notice_div: function (e, t) {
        var o, n, s, l, i;
        i = document.getElementsByClassName('notice_reply');
        n = document.getElementsByClassName('sceditor-group')[0];
        s = n.parentNode, o = i.length ? i[0] : document.createElement('DIV');
        l = 'height:20px;line-height: 1.5;border-radius: 3px; text-shadow: 0 1px rgba(255, 255, 255, 0.46)';
        !i.length && (o.classList.add('notice_reply'), o.style.cssText = l, s.insertBefore(o, n));
        o.style.display = 'block';
        o.innerHTML = 'undefined' == typeof e ? os.lang.notice_original : e;
        o.style.background = 'undefined' == typeof t ? os.lang.color_a : t;
        setTimeout(function () {
            'block' == o.style.display && (o.style.display = 'none')
        }, 1000)
    },
    vT: function (h) {
        var i, g = h.getElementsByTagName('a');
        for (i in g) {
            /\/viewtopic/g.test(g[i].href) && (os.view_url = g[i].href)
        }
    },
    sZ: function (b) {
        var a, i, j, l, s = [];
        if ('object' == typeof b && 'FORM' == b.nodeName) {
            l = b.elements.length;
            for (i = 0; l > i; i++)
                if (a = b.elements[i], a.name && !a.disabled && 'file' != a.type && 'reset' != a.type && 'submit' != a.type && 'button' != a.type)
                    if ('select-multiple' == a.type)
                        for (j = b.elements[i].options.length - 1; j >= 0; j--) a.options[j].selected && (s[s.length] = encodeURIComponent(a.name) + '=' + encodeURIComponent(a.options[j].value));
                    else('checkbox' != a.type && 'radio' != a.type || a.checked) && (s[s.length] = encodeURIComponent(a.name) + '=' + encodeURIComponent(a.value))
        }
        return s.join('&').replace(/%20/g, '+');
    },
    sC: function (o, e, t, s) {
        e = e || 500, s = s || window;
        var a = o.clientHeight < 150 ? o.clientHeight * 2 : o.clientHeight < 300 ? o.clientHeight : o.clientHeight > 400 && '',
            n = s.scrollTop - a || window.pageYOffset - a;
        if ('number' == typeof o) var r = parseInt(o);
        else var r = os.gT(o, n);
        var l = Date.now(),
            i = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (o) {
                window.setTimeout(o, 15)
            },
            a = function () {
                var c = Date.now() - l;
                s !== window ? s.scrollTop = os.pS(n, r, c, e) : window.scroll(0, os.pS(n, r, c, e)), c > e ? 'function' == typeof t && t(o) : i(a)
            };
        a()
    },
    eC: function (t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
    },
    pS: function (o, e, s, r) {
        return o + (e - o) * os.eC(s / r)
    },
    gT: function (o, e) {
        return 'HTML' === o.nodeName ? -e : o.getBoundingClientRect().top + e
    },
    XML: function (a, b, f) {
        var c;
        c = window.XMLHttpRequest ? new XMLHttpRequest : window.ActiveXObject && (new ActiveXObject('Microsoft.XMLHTTP'));
        'undefined' != typeof a ? c.open('POST', b) : c.open('GET', b, true);
        c.responseType = 'document';
        c.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        c.send('undefined' != typeof a ? a : '');
        c.onreadystatechange = function () {
            this.readyState == 4 && this.status == 200 && (f(this));
        };
    },
    last: function (a) {
        return a[a.length - 1]
    },
    cover: function (c) {
        var a = document.getElementsByClassName('sceditor-resize-cover')[0];
        a.style.display = c != false ? 'block' : 'none';
        a.innerHTML = c != false ? c : '';
        if (c != false) {
            a.style.color = '#fff';
            a.style.fontSize = '20px';
            a.style.lineHeight = '12';
            a.style.textAlign = 'center'
        }
    },
    send_post: function () {
        var e, t, o, n, s, l, i;
        n = os.intance;
        os.form_reply && (os.button_reply.onclick = function () {
            n.updateOriginal();
            if (n.val().length > os.length_reply) {
                os.cover('Cargando...');
                os.button_reply.value = os.lang.button_send_reply;
                os.XML(os.sZ(os.form_reply) + '&notify=on&&post=1&prevent_post=1', os.action_reply, function (x) {
                    t = x.responseXML;
                    os.vT(t);
                    o = t.body.innerHTML.indexOf(os.control.success_reply);
                    i = t.body.innerHTML.indexOf(os.control.flood);
                    e = os.view_url;
                    l = e && e.match(/(\w+)$/g)[0];
                    s = l && l - 1;
                    if (i > 0) {
                        os.notice_div(os.lang.flood, os.lang.color_b);
                        os.button_reply.value = os.button_value_reply;
                    } else if (0 > o) {
                        os.notice_div(os.lang.error_reply)
                    } else {
                        os.new_post(e, l, n, s);
                        os.button_reply.value = os.button_value_reply;
                        os.notice_div(os.lang.wait_notice, os.lang.color_c)
                    }
                })
            } else {
                os.notice_div(os.lang.words_reply, os.lang.color_d)
            }
            return false
        })
    },
    new_post: function (e, t, o, n) {
        var s, l, i, a, r, p, w, c;
        os.XML('', e, function (x) {
            e = x.responseXML;
            r = e.getElementsByClassName('post--' + t)[0];
            s = r.innerHTML;
            l = r.className;
            w = os.phpbb2 ? r.nextElementSibling.outerHTML : '';
            i = 'p' + t;
            c = os.phpbb2 ? 'tr' : 'div';
            a = '<' + c + ' id="' + i + '" class="' + l + ' new_ajax_post">' + s + '</' + c + '>' + (os.phpbb2 ? w : '');
            p = !os.phpbb2 ? os.last(document.getElementsByClassName('post')) : document.getElementsByClassName('catBottom')[0].parentNode.previousElementSibling;
            os.cover(false);
            p.insertAdjacentHTML('afterend', a);
            o.val('');
            os.notice_div(os.lang.success_reply, os.lang.color_e);
            os.sC(document.getElementById(i), 500)
        })
    }
};
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('logout') && $.sceditor && os.init()
}, false);



Very nice ideea and very usefull code

Nicely done Ch@lo Valdez! Neat idea, continue the good work.

Great job @Ch@lo Valdez
You're awesome!

thanks everybody, the code has been updated today, please help me testing

Works great @Ch@lo Valdez.

Goes pretty well with my SyncEditor

Ace 1 wrote:Works great @Ch@lo Valdez.

Goes pretty well with my SyncEditor

in which forum?

Ch@lo Valdez wrote:in which forum?

On mine. Would you like a link so you can see?

yes please!!

I have written a new version with minimal use of Jquery.

The Initial post was edited

Yeah, the code is bulkier but it works just as well, if not faster.

Honestly, I don't know if I could've come up with something along these lines. Good effing job.

thanks man, yes it's a lot of work, I hope it useful for all fm users

Hello Ch@lo Valdez,
thank you for this tip.
I tested on my two forums phpbb2,phpbb3, punbb end Invision your trick and I get stuck on the send while characters are required.My templates are blank on all versions



You have a solution for the French version please.
a ++

please check in your panal administration in security tab allow all external forms


and you need change this line:
Your message has been entered successfully

for

Sorry but I had yet tested before,
I have not changed anything and everything works my friend,
thank you again for your work.

a ++

works or not works in your french test forum?

It works my friend, thank you very much

a++

the code was updated today

- bug are fixed
- fade in fx without jquery is add

hello Ch@lo Valdez,

after UPDATE 22/10/2016 I have a problem with the phpbb2 version before updating the page,
here is a picture:




all the updated page is positioned correctly

a++

Nice work it would be even better if you could make it post like that without having to you the Quick reply box and do this on the main reply system aswell.

but i know this is hard to do and i thing you do a good job in making this code work and its working really well.

well done

Milouze14 wrote:hello Ch@lo Valdez,

after UPDATE 22/10/2016 I have a problem with the phpbb2 version before updating the page,
here is a picture:




all the updated page is positioned correctly

a++

@Milouze14 thanks for report this bug, is fixed now

@APE i have a new code with all functions ajax, without reload, delete, reply, quore, preview, and works in the main editor too

I added your new code today and its only working for me in Q/ reply

yes this here it's only for QR, i write right now a new one, with all functions in ajax

Thank you

Everything works fine, but I noticed a problem.

As a pressed button change of opinion and send it the opinion is sent, but the page is refreshed.

smurfavr wrote:Everything works fine, but I noticed a problem.

As a pressed button change of opinion and send it the opinion is sent, but the page is refreshed.

what you mean?

Look at the picture to find out what the problem is.

i don't see any problem, my code only works in quick reply for replys not for previews or edit options