The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Ajax reply - all versions

View previous topic View next topic Go down

Ajax reply - all versions

Post by Ch@lo Valdez on October 6th 2016, 11:52 pm

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:
Code:

console.log('//-Written by Chalo ------ Open Source 2014-2016 -----//');
console.log('//--------- http://www.opensourcephpbb3.com ----------//');
console.log('//------------------- Version: 1.2 -------------------//');
var ajax_reply = {
    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',
        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: 5, //min letters in the textarea before reply
    init: function () {
        ajax_reply.isTheme = /\/t\d+/g.test(window.location.pathname);
        ajax_reply.phpbb2 = document.getElementsByClassName('bodylinewidth').length;
        ajax_reply.phpbb3 = document.getElementById('phpbb');
        ajax_reply.invision = document.getElementById('ipbwrapper');
        ajax_reply.punbb = document.getElementById('pun-intro');
        ajax_reply.form_reply = ajax_reply.isTheme && document.forms.post;
        ajax_reply.button_reply = ajax_reply.isTheme && document.forms.post.post;
        ajax_reply.button_value_reply = ajax_reply.isTheme && document.forms.post.post.value;
        ajax_reply.textarea = ajax_reply.isTheme && document.forms.post.message;
        ajax_reply.action_reply = ajax_reply.isTheme && document.forms.post.action;
        ajax_reply.send_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)';
        !g.length && (a.classList.add('notice_reply'), a.setAttribute('style', e), d.insertBefore(a, b));
        a.style.display = 'block';
        a.innerHTML = 'undefined' == typeof c ? ajax_reply.lang.notice_original : c;
        a.style.background = 'undefined' == typeof f ? ajax_reply.lang.color_a : f;
        setTimeout(function () {
            a.style.display == 'block' && (a.style.display = 'none')
        }, 5000)
    },
    send_post: function () {
        var c, h, a, l, o, d, b;
        h = ajax_reply.action_reply;
        ajax_reply.form_reply && (ajax_reply.button_reply.onclick = function () {
            l = $(ajax_reply.textarea).sceditor('instance');
            l.updateOriginal();
            if (l.val().length > ajax_reply.length_reply) {
                ajax_reply.button_reply.value = ajax_reply.lang.button_send_reply;
                $.post(h, $(ajax_reply.form_reply).serialize() + '&post=1&prevent_post=1', function (e) {
                    a = e.indexOf(ajax_reply.lang.success_reply);
                    b = e.indexOf(ajax_reply.lang.flood);
                    c = $('a[href*="viewtopic"]', e).length && $('a[href*="viewtopic"]', e)[0].href;
                    d = c && c.match(/(\w+)$/g)[0];
                    o = d && (d - 1);
                    b > 0 ? (ajax_reply.notice_div(ajax_reply.lang.flood, ajax_reply.lang.color_b), ajax_reply.button_reply.value = ajax_reply.button_value_reply) : e.indexOf('A new') > 0 ? $.post(document.location.pathname, $('[name="post"]', e).serialize(), function (c) {
                        a < 0 ? ajax_reply.notice_div(ajax_reply.lang.error_reply) : (ajax_reply.new_post(c, d, l, o), ajax_reply.button_reply.value = ajax_reply.button_value_reply)
                    }) : a < 0 ? ajax_reply.notice_div(ajax_reply.lang.error_reply) : (ajax_reply.new_post(c, d, l, o), ajax_reply.button_reply.value = ajax_reply.button_value_reply, ajax_reply.notice_div(ajax_reply.lang.wait_notice, ajax_reply.lang.color_c))
                })
            } else {
                ajax_reply.notice_div(ajax_reply.lang.words_reply, ajax_reply.lang.color_d);
            }
            return false
        })
    },
    new_post: function (c, a, l, o) {
        var d, f, g, h, b, m, n, s;
        $.get(c, function (e) {
            b = $('.post--' + a, e)[0];
            d = b.innerHTML;
            f = b.className;
            g = 'p' + a;
            n = ajax_reply.phpbb2 ? 'tr' : 'div';
            h = '<' + n + ' id="' + g + '" class="' + f + ' new_ajax_post" style="display:none">' + d + '</' + n + '>';
            m = document.getElementsByClassName('post--' + o);
            m.length ? (m[0].insertAdjacentHTML('afterend', h), $('.new_ajax_post').fadeIn(1e3)) : ajax_reply.post_pag(h);
        }).success(function () {
            l.val('');
            ajax_reply.notice_div(ajax_reply.lang.success_reply, ajax_reply.lang.color_e)
        })
    },
    post_pag: function (h) {
        var e = ajax_reply.punbb ? document.getElementsByClassName('topic')[0] : ajax_reply.phpbb2 ? document.getElementsByClassName('catBottom')[0].parentNode.previousElementSibling : ajax_reply.phpbb3 ? document.getElementsByName('bottomtitle')[0].previousElementSibling : ajax_reply.invision && document.getElementsByClassName('topic-footer')[0].previousElementSibling;
        ajax_reply.punbb ? e.insertAdjacentHTML('beforeend', h) : e.insertAdjacentHTML('afterend', h);
        $('.new_ajax_post').fadeIn(1e3);
    }
};
$(function () {
    (document.getElementById('logout') && $.sceditor) && ajax_reply.init()
});


UPDATE 10.22.2016 = This new version was made without $.post and $.get, and add fade in fx with out jQuery

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: 5, //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()
});


Last edited by Ch@lo Valdez on October 25th 2016, 5:04 pm; edited 9 times in total

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by SSYT on October 9th 2016, 10:20 am

Very nice ideea and very usefull code Smile

SSYT
Forumember

Male Posts : 41
Reputation : 2
Language : RO-10, EN-3, FR-1
Location : Romania

http://help.forumgratuit.ro/forum

Back to top Go down

Re: Ajax reply - all versions

Post by Legionheart on October 9th 2016, 10:39 am

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

Legionheart
Forum Reviewer
Forum Reviewer

Male Posts : 439
Reputation : 67
Language : English
Location : San Venganza

http://forumrate.forumotion.com/

Back to top Go down

Re: Ajax reply - all versions

Post by YoshiGM on October 10th 2016, 2:24 am

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

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 11th 2016, 4:03 pm

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

Smile

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Ace 1 on October 20th 2016, 7:44 pm

Works great @Ch@lo Valdez.

Goes pretty well with my SyncEditor Wink

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 20th 2016, 9:29 pm

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

Goes pretty well with my SyncEditor Wink

in which forum? Confused

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Ace 1 on October 21st 2016, 1:07 pm

@Ch@lo Valdez wrote:in which forum? Confused

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

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 21st 2016, 1:41 pm

yes please!!

Smile

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Ace 1 on October 21st 2016, 5:49 pm


Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 21st 2016, 7:19 pm

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

The Initial post was edited

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Ace 1 on October 21st 2016, 7:43 pm

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.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 21st 2016, 7:55 pm

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

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Milouze14 on October 22nd 2016, 5:56 pm

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 ++

Milouze14
Forumember

Male Posts : 39
Reputation : 2
Language : French
Location : Vendée

http://www.milouze14.com/

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 22nd 2016, 6:24 pm

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


Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Milouze14 on October 22nd 2016, 6:46 pm

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

a ++

Milouze14
Forumember

Male Posts : 39
Reputation : 2
Language : French
Location : Vendée

http://www.milouze14.com/

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 22nd 2016, 6:52 pm

works or not works in your french test forum?
scratch

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Milouze14 on October 22nd 2016, 6:54 pm

It works my friend, thank you very much

a++

Milouze14
Forumember

Male Posts : 39
Reputation : 2
Language : French
Location : Vendée

http://www.milouze14.com/

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 23rd 2016, 6:38 am

the code was updated today

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

Smile

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Milouze14 on October 25th 2016, 4:41 pm

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
Forumember

Male Posts : 39
Reputation : 2
Language : French
Location : Vendée

http://www.milouze14.com/

Back to top Go down

Re: Ajax reply - all versions

Post by APE on October 25th 2016, 4:58 pm

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 Wink





APE
Manager
Manager

Male Posts : 8648
Reputation : 760
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 25th 2016, 5:06 pm

@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 Smile

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 25th 2016, 5:08 pm

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

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by APE on October 25th 2016, 5:15 pm

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





APE
Manager
Manager

Male Posts : 8648
Reputation : 760
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Ajax reply - all versions

Post by Ch@lo Valdez on October 25th 2016, 5:23 pm

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

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Ajax reply - all versions

Post by APE on October 25th 2016, 5:46 pm

Thank you Smile





APE
Manager
Manager

Male Posts : 8648
Reputation : 760
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum