Ajax reply - all versions

First topic message reminder :

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);



ок. I thought that could be done to work and editing.

or try this one
https://help.forumotion.com/t148708-reply-preview-delete-quote-create-new-post-edit-without-change-the-page-ajax

This is superb!

Three things though:

1. Is there any way of reducing the minum number of characters needed? Some people just type Y or N or LOL and it won't work now. I tried altering "length_reply: 5, //min letters in the textarea before reply" to 1 but it had no effect.

2. Is there a way for ajax to work so there's no page refresh needed at all?

3. Is there a way of getting to work on the mobile version?

1. this is the line for that :
length_reply: 1, //min letters in the textarea before reply
2. what you mean?
3. No, sorry

troyeccles wrote:This is superb!

Three things though:

2. Is there a way for ajax to work so there's no page refresh needed at all?

A /2 The page Don't refresh on it. It just makes a post and the post slips into your posted comments if you mean if you stay on the page and some one else makes a post after your well then No this will not work as your need live feed from the servers and we can't get that data (Sadly)

Ch@lo, I did try setting it to 1. No effect.

Ape, thanks for the update.

please try with this :

Code:



console.log('//-Written by Chalo ------ Open Source 2014-2016 -----//');
console.log('//--------- http://www.opensourcephpbb3.com ----------//');
console.log('//------------------- Version: 1.5.2 -------------------//');
var os = {
    lang: {
        success_reply: 'Your message has been entered successfully', // <--- change this text exactly like is display in your language board
        flood: 'Flood control is active on this forum, please wait 10 second(s) before replying or posting',
        newpost: 'A new message has been posted',
        error_reply: 'Try again',
        words_reply: 'You need 5 letters at least',
        button_send_reply: 'Send data...',
        notice_original: 'No predefined text',
        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%)'
    },
    length_reply: 1, //min letters in the textarea before reply
    time: 3500,
    init: function() {
        os.isTheme = /\/t\d+/g.test(window.location.pathname);
        os.phpbb2 = document.getElementsByClassName('bodylinewidth').length;
        os.phpbb3 = document.getElementById('phpbb');
        os.invision = document.getElementById('ipbwrapper');
        os.punbb = document.getElementById('pun-intro');
        os.form_reply = document.forms.post;
        os.button_reply = os.form_reply.post;
        os.button_value_reply = os.form_reply.post.value;
        os.textarea = os.form_reply.message;
        os.action_reply = os.form_reply.action;
        os.isTheme && os.post();
    },
    notice_div: function(c, f) {
        var a, b, d, e, g;
        g = document.getElementsByClassName('notice_reply');
        b = document.getElementsByClassName('sceditor-group')[0];
        d = b.parentNode;
        a = !g.length ? document.createElement('DIV') : g[0];
        e = 'height:20px;line-height: 1.5;border-radius: 3px; text-shadow: 0 1px rgba(255, 255, 255, 0.46);text-align:center';
        !g.length && (a.classList.add('notice_reply'), a.setAttribute('style', e), d.insertBefore(a, b));
        a.style.display = 'block';
        a.innerHTML = 'undefined' == typeof c ? os.lang.notice_original : c;
        a.style.background = 'undefined' == typeof f ? os.lang.color_a : f;
        setTimeout(function() {
            a.style.display == 'block' && (a.style.display = 'none')
        }, os.time)
    },
    post: function() {
        var c, h, a, d, b, v, i, x, y, z;
        h = os.action_reply;
        os.form_reply && (os.button_reply.onclick = function() {
            return os.sceditor = $(os.textarea).sceditor('instance'), os.sceditor.updateOriginal(), z = document.getElementsByClassName('new_ajax_post'), z.length && z[0].classList.remove('new_ajax_post'), os.sceditor.val().length >= os.length_reply ? (os.button_reply.value = os.lang.button_send_reply, os.XML(os.serialize(os.form_reply) + '&post=1&prevent_post=1', h, function(e) {
                for (x = e.responseXML, y = x.getElementById(os.phpbb2 ? 'page-body' : 'main'), a = y.innerHTML.indexOf(os.lang.success_reply), b = y.innerHTML.indexOf(os.lang.flood), v = x.getElementsByTagName('a'), i = 0; i < v.length; i++) /\/viewtopic/g.test(v[i].href) && (c = v[i].href, d = v[i].href.match(/(\d+)$/g)[0]);
                b > 0 ? (os.notice_div(os.lang.flood, os.lang.color_b), os.button_reply.value = os.button_value_reply) : y.innerHTML.indexOf(os.lang.newpost) > 0 ? os.XML(os.serialize(x.forms.posts), '/post', function() {
                    0 > a ? os.notice_div(os.lang.error_reply) : (os.get_post(c, d), os.button_reply.value = os.button_value_reply)
                }) : 0 > a ? os.notice_div(os.lang.error_reply) : (os.get_post(c, d), os.button_reply.value = os.button_value_reply, os.notice_div(os.lang.wait_notice, os.lang.color_c))
            })) : os.notice_div(os.lang.words_reply, os.lang.color_d), !1

        });
    },
    get_post: function(c, a) {
        var b, d;
        os.XML('', c, function(e) {
            d = e.responseXML;
            b = d.getElementsByClassName('post--' + a)[0];
            b.style.display = 'none';
            b.className += ' new_ajax_post';
            os.set_post(b);
            os.sceditor.val('');
            os.notice_div(os.lang.success_reply, os.lang.color_e);
        })
    },
    set_post: function(h) {
        var e = os.punbb ? document.getElementsByClassName('topic')[0] : os.phpbb2 ? document.getElementsByClassName('catBottom')[0].parentNode.previousElementSibling : os.phpbb3 ? document.getElementsByName('bottomtitle')[0].previousElementSibling : os.invision && document.getElementsByClassName('topic-footer')[0].previousElementSibling;
        os.punbb ? e.appendChild(h) : e.parentNode.insertBefore(h, e.nextSibling);
        os.fadeIn(h, 500);
    },
    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');
        'undefined' != typeof a ? c.send(a) : c.send();
        c.onreadystatechange = function() {
            this.readyState == 4 && this.status == 200 && (f(this));
        };
    },
    serialize: function(b) {
        var a, i, j, s = [];
        if ('object' == typeof b && 'FORM' == b.nodeName) {
            var len = b.elements.length;
            for (i = 0; len > 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, '+');
    },
    fadeIn: function(a, b) {
        var e, d;
        if (!a) return;
        a.style.opacity = 0, a.style.filter = 'alpha(opacity=0)', a.style.display = '', a.style.visibility = 'visible',
            b ? (e = 0, d = setInterval(function() {
            e += 50 / b, e >= 1 && (clearInterval(d), e = 1), a.style.opacity = e, a.style.filter = 'alpha(opacity=' + e * 100 + ')'
        }, 50)) : (a.style.opacity = 1, a.style.filter = 'alpha(opacity=1)')
    }
};
$(function() {
    (document.getElementById('logout') && /\/t\d+/g.test(window.location.pathname) && $.sceditor) && os.init()
});


That's worked! Well done.

Ummm... What do you do guys to make this code working? I chose "no" in "unathourize unofficial (...)" and created a javascript with this new code in the AP (also was trying with older version - it ended up nowhere), it still doesn't work Also on the completly new forum. Should I add javascript import to index/viewtopic_body? Please, help!

Okay I found that. Displaying this code should be "in topics" only.

@DSorcerer please type your url forum

is important change this line if your language board is not english

Thanks!   It's working now.

Hi Chalo!

First of all congratulations for the script, it's fantastic!

My problem is that when I post or edit, this message appears and it does not update.

Although the page is stopped, when we enter the post the quick response appears.




Can you help me? I really liked the script.

Thx,

Nigrin

My Forum: Portuguese Language

hi please send me pm with your forum url, and let me see how works, have you any test account ?

Hi Ch@lo!

Please check your pm, thx!

Ch@lo Valdez ???

Is it possible for you to make it work on ModernBB, @Ch@lo Valdez?

Ritsu wrote:Is it possible for you to make it work on ModernBB, @Ch@lo Valdez?

yes, now works for moderbb

Thanks.

good

Is it work on AwesomeBB, bro?

I believe AwesomeBB still isn't ready to use daily yet

This code is not made for AwesomeBB as AwesomeBB is still in beta mode right now and lots of bugs are still getting worked on.