MyBB: I like the way you… AJAX?

For lack of a better buzzword to go in the title.

This weekend saw me once again battling with the fierce client side scripting language commonly known as Javascript. The good forces of my self however once again prevailed and I’m happy to introduce to you two new things which will appear in MyBB 1.2 despite our best attempts at telling you they wouldn’t make the cut for this release.

This functionality is very easy to implement in other pages too, thanks to the design of the classes in which they operate from. How simple? Try one line of javascript is required to add this functionality to a page. (and maybe altering some of the markup a tad)

I’ve created two small videos which show this new functionality in MyBB. If you cannot see the videos then you need to download the XviD codecs.

Auto Completion

Auto suggest, auto complete. Both words which essentially describe the same thing. It’s been long requested that MyBB support the auto complete functionality for username fields when sending private messages (and other places) and after several hours of work on Saturday and ploughing through piles of Javascript problems (especially cross browser problems), it is finally in.

Video: mybb_auto_complete.avi (2.7 MB)

Inline “Quick” Editing

Some see the point whilst others do not. Inline editing is basically what it says it is - it allows you to edit data “inline” without loading another page for that specific functionality. (so to speak)

The better part of today (Sunday) was spent tackling this monster too - getting it all implemented and working.

Right now, MyBB 1.2 only supports this on the thread listing pages for thread subjects. It’ll be extended to post subjects on the show thread page and eventually will also cover editing actual messages. (the class will need to be reworked a little for that functionality)

The basics of it are that you click and hold down on the link on the thread listing and the link suddenly changes into a text box from where you can edit the title of the thread and then press either enter, escape or click outside of the text box to save your changes.

We decided for a bit of a different approach to other boards who don’t seem to show the user that an action is being carried out by the XML HTTP Request library - that is, the title is being saved. It is hard to see from the example video (due to it running off a local networked machine) but a “spinning” image (OS X users will be familiar with this) appears whilst the thread title is updated behind the scenes. Once complete - it will go away.

Video: mybb_quick_edit.avi (895 KB)

The best thing about this javascript is that it is tiny compared to the same functionality found in other bulletin boards. Less overhead means quicker page load times! For example, the auto complete functionality:

  • Invision Board: 15 KB
  • vBulletin: 9 KB
  • MyBB: 6.2 KB

We’ve also had several other interesting commits come in to MyBB since my last update here but we’re keeping a bit of it under wraps for a bit longer and maybe I’ll leave it to some of the other developers to explain what they’ve been up to recently.

For now until then, take it easy - more updates will be in soon!

Comments

  1. 1.

    Marc (March 26th, 2006, 11:21 pm)

    Great Work.
    Very, Very Nice.
    The Inline editing really sucked my eyeballs into it.

    MyBB is THE best.
    No… that’s an understatement.

    Great Work!

  2. 2.

    Belloman (March 27th, 2006, 5:03 am)

    Wow, sounds great! This makes me want MyBB 1.2 even more :) Smaller is better :D

  3. 3.

    tikitiki (March 27th, 2006, 5:07 am)

    My Baby is growing up so fast :’(
    :P
    You should impliment http://mods.mybboard.com/view.php?did=264 into MyBB 1.2 :P

  4. 4.

    Musicalmidget (March 27th, 2006, 8:04 am)

    I’ve got to get my local server up again to play with those nifty features. :P

  5. 5.

    xiaozhu (March 27th, 2006, 11:55 pm)

    I hope theres more new features in 1.2 =)

  6. 6.

    Peter Akkies (March 28th, 2006, 6:44 am)

    Tikitiki… that has already been implemented in the dev version, as well :)

  7. 7.

    Tikitiki (March 28th, 2006, 11:38 am)

    o.0 And I assume there is no IE bug in it like mine? :P
    (gosh darnit - I wish I was on the dev team :P)

  8. 8.

    Chris Boulton (March 28th, 2006, 1:35 pm)

    What is the IE bug in yours?

    So far it seems like an AJAX based feature a day. Hmm, none today though - assignment work.

  9. 9.

    tikitiki (March 29th, 2006, 8:43 am)

    In IE, when you “quick edit” it, the textbox shows up in the avatar section. I’m not sure why its not working correcting though

  10. 10.

    Chris Boulton (March 29th, 2006, 4:15 pm)

    Well - mine doesn’t experience any of those problems because of the way I designed it ;)

  11. 11.

    Dennis (March 29th, 2006, 7:22 pm)

    I need to get my dev SVN copy updated. It’s still in pre-AJAX ages :( Been a bit busy and sick lately.

  12. 12.

    tikitiki (March 30th, 2006, 8:11 am)

    Dennis do you need a hug? :P

  13. 13.

    tikitiki (March 30th, 2006, 8:17 am)

    Oh and Chris, “rawr” - Keep away the Tiki Lord is dangerous

  14. 14.

    John Anderton (April 6th, 2006, 4:05 pm)

    I already had seen that inline editing about 8 months back when dt made a gm script for it. Nice to see its in MyBB now :)
    Some sites even have the same posting method as the one this blog has. When we use the quick post on a MyBB based forum, it has to reload the page to post it. But this blog doesnt (cause it uses AJAX right?) I have seen a forum do the same. Might be worthwhile considering i think ;)

  15. 15.

    SurfiOnline » MyBB: Lets play guess the feature (April 16th, 2006, 2:14 am)

    […] Just after my earlier “MyBB: I like the way you… AJAX?” post, I managed to complete the inline messaging functionality for MyBB which allows you (similar to other systems) edit messages in line on the thread display page. No video this time, but I promise that it is cool and has a fancy “loading image” when the content is loading. You initialise it using the popup menu functionality which I wrote about earlier. That isn’t what I wanted to really post about. […]

  16. 16.

    meneketehe (June 27th, 2006, 5:33 pm)

    quick edit with ajax already on mods list. why not have quick reply?

Post a Comment

Note: * indicates required fields.