Members List Ajax Help

[Shorty]

This was originally in a pm between me and Peter, but he suggested, I post here, so others can benefit as well. 

Dec 2, 2012 13:20:39 GMT -8 Shorty said:

So you remember how I asked if you could make your styles code work on the shout box and you said didn't want to because of the whole ajax thing and would have check everything that is posted. Well I need to do something similar to the members list. I need to edit the registered date, but the way i have it doesn't always work because when you change the sorting and such it doesn't affect it. I take it's because it uses Ajax and its not actually loading the page again. Is there any way you can help me get it to work please? It would be much appreciated!

Dec 2, 2012 14:30:47 GMT -8 Peter said:

Yeah, little bit of a pain that is.  Originally when working out a solution, I wrote a method to hijack the request so that I could modify the response, and then forward on the XMLHttpRequest object with the modified responseText.  This proved to be awkward when passing on the data to the "success" callbacks.

What I finally decided on was to bind a global "success" event to the table.  The thing to note with this, is that it's a global event, not local to the request being made.

In the end I wrote a helper method for Yootil to bind the event but also allowing an AJAX URL match.

yootil.ajax.bind("success", $("table.list"), function(){
what.show_in_members_list();
}, "/members/list");


Here is the code I wrote for Yootil...


/**
* Namespace: yootil.ajax
*    Useful methods for AJAX
*/

yootil.ajax = (function(){

   return {
   
       /**
       * Method: bind
       *     When we call .set() on a key, we can't specify a callback for when it's done.  So this method allows
       *     us to do just that.  This isn't ideal though, but works for now until we get a callback added in by
       *     ProBoards officially.
       *
       * Parameters:
       *     event - *string* The ajax event to bind (i.e "complete"), without "ajax" prefix.
       *     e - *object* The element to bind the event too.
       *     f - *function* This is the callback function that will get called.
       *     url - *string* / *boolean* The AJAX URL ProBoards calls to match against. If bool, match all.
       *     context - *object* The context ("this") of the callback function.
       *
       * Returns:
       *     *object* yootil
       *
       * Examples:
       *     yootil.ajax.bind("complete", $("form:first"), function(){ alert("AJAX completed"); });
       *
       *     yootil.ajax.bind("complete", $("form:first"), function(){ alert("AJAX completed"); }, "/plugin/key/set/");
       */
       
       bind: function(event, e, f, url, context){
           var elem = $(e);
           
           event = "ajax" + event.substr(0, 1).toUpperCase() + event.substr(1);
           
           if(elem.length == 1){
               context = (context)? context : e;                    
           
               if(event && f && e.length){
                   elem[event](function(event, XMLHttpRequest, options){
                       if(url === true || new RegExp(url, "i").test(options.url)){
                           $.proxy(f, context, event, XMLHttpRequest, options, e)();
                       }
                   });
               }
           }
           
           return yootil;
       }
   
   };
   
})();

Hope that gives you an idea.

[Shorty]

So, Peter, you are saying I should use this in my code?


yootil.ajax.bind("success", $("table.list"), function(){
what.show_in_members_list();
}, "/members/list");


Also, what is the "what.show_in_members_list(); ? Is that the code I want to run on that page?

[Peter]

If you feel that your code would benefit from using Yootil, then sure.

The method you are referring to is not specific to making it work, it just updates the table...


show_in_members_list: function(no_th){
    var what = this;
    var table = $("div.content.cap-bottom table.list");
   
    if(table.find("th.pd_money").length == 0){
        $("<th class=\"pd_money\" style=\"width: 12%\">Money</th>").insertAfter(table.find("tr.head th.posts"));
    }
   
    table.find("tr.member[id=*member]").each(function(){
       
        if(this.id.match(/^member\-(\d+)/i)){
            var user_id = RegExp.$1;
           
            var user_data = yootil.key.value("pixeldepth_money", user_id, true);
            var user_money = 0;
           
            if(user_data && user_data.m && user_data.m.toString().length){
                user_money = parseInt(user_data.m);
            }
           
            var td = what.bind_edit_dialog("<td class=\"pd_money_" + user_id + "\">" + what.settings.money_symbol + "<span class=\"pd_money_value_" + user_id + "\">" + yootil.number_format(user_money) + "</span></td>", user_id);
           
            td.insertAfter($(this).find("td.posts"));
        }
    });
}

[Shorty]

Thanks Peter, I got it to work, but I noticed any issue. Sometimes like when just resorting a column, it doesn't work. I also noticed that it does the same thing with your money plugin. Like if you resort it a few times, it stops working. But comes back if you click on another column. But if you resort that column a few times, it stops working again. Same thing if you keep trying with the other columns. I hope I explained that well enough.

[VS Admin]

Just thought I would point out that we do now support callbacks by default, full details are in the Plugin Keys Guide

[Peter]

Dec 2, 2012 16:25:03 GMT -8 Shorty said:

Thanks Peter, I got it to work, but I noticed any issue. Sometimes like when just resorting a column, it doesn't work. I also noticed that it does the same thing with your money plugin. Like if you resort it a few times, it stops working. But comes back if you click on another column. But if you resort that column a few times, it stops working again. Same thing if you keep trying with the other columns. I hope I explained that well enough.

What is it you are displaying in the member list?

There was a bug with the member list, it would not update the key data for the users pulled back via the AJAX request.

[Shorty]

I'm not using a key. I'm replacing the registered date.

[Peter]

When I next work on Yootil, I'll check it out, could be something has changed since writing that method.

[Shorty]

Alright. I just wanted to let you know. Again thanks for all the help. I really do appreaciate it!!!

[Peter]

Spent a bit of time on Yootil tonight and thought I would check it out.

For me, it's working as I expect, and I tested it here on ProBoards Support on the members page.  Run this via your developer console (i.e Firebug), and then filter the member list.  You should see the new column added, and everytime you filter, it gets updated with the user id for that row.


$.getScript("http://yootil.pixeldepth.net/yootil.src.js", function(){
    yootil.ajax.bind("success", $("table.list"), function(){
        var table = $("div.content.cap-bottom table.list");
       
        if(table.find("th.custom").length == 0){
            $("<th class=\"custom\" style=\"width: 12%\">Custom Col</th>").insertAfter(table.find("tr.head th.posts"));
        }
       
        table.find("tr.member[id=*member]").each(function(){
            if(this.id.match(/^member\-(\d+)/i)){
                var user_id = RegExp.$1;
                var td = $("<td class=\"custom_col_" + user_id + "\">User: " + user_id + "</td>");
               
                td.insertAfter($(this).find("td.posts"));
            }
        });
    }, "/members/list");
});

[Shorty]

It works, yes. But what I was pointing out that if you try to sort the rows by the same column like 3 times it stops working. Like run in, then click the same column head a few times. Like username, after a few clicks this is what I get(in Chrome).

Attachments:

[Peter]

Ah, I get ya now. Yeah, that's not a bug with Yootil. Yootil lets you bind an event for the AJAX so you can update the table. What you need to do is monitor the table as well, if there is no AJAX being fired, then the user is ordering content that has already been pulled from the server.

I will need to support this in my Money plugin, so if you haven't solved it yourself by the time I come to look at it, I'll post my code.

[Shorty]

Alright, I didn't think it was a problem with Yootil, I wanted to let you know for your money code. And thanks!

[Peter]

I had a thought about this the other day. We could use mutation events to monitor the DOM for changes, and a fall back for other browsers who don't support mutation events.

Also there is the Mutation Observer for DOM 4 which is pretty cool.

[Shorty]

I have no idea what that is to be honest.