MyBB Community Forums

As I've stated a few time on this forum, I'm currently rewriting my MyStatus plugin. Part of this rewrite is that I'm moving to using Prototype JS rather than jQuery. Problem is, I'm not used to prototype at all and have hit a hurdle. Here's what I'm trying to do:

Each status listing has a delete link with a specific ID (mystatus-delete_{ID}). When this link is clicked, I wish to make an AJAX call to another file to ensure the delete is successful, then remove the row from the list. This should be fairly simple, right? Wrong. I can't seem to get Event.observe to play happily with my code at all. Here's what I'm currently trying:

$$("a[id^='mystatus_delete_']").observe('click', function(e) {
    Event.stop(e);
});

In my eyes, that should work and according to JSLint, my code is correct. It does not work though.

I'd be extremely appreciative if somebody could point me in the right direction here

What about looking at how MyBB does it?

I would have tried this first:

$$("a[id^='mystatus_delete_']").invoke('observe', 'click', function(e)
{
    Event.stop(e);
});

(2012-01-11, 07:12 PM)Pirata Nervo Wrote: [ -> ]What about looking at how MyBB does it?

I had a glance, but didn't find anything glaringly obvious in said glance

(2012-01-11, 07:22 PM)Tomm M Wrote: [ -> ]I would have tried this first:

$$("a[id^='mystatus_delete_']").invoke('observe', 'click', function(e)
{
    Event.stop(e);
});

Cheers Tomm, I didn't know about .invoke(). I'll have to look into the differences between observe an invoke now.

It's not that you were doing anything wrong as such. Invoke and observe are two different things.

Originally you had an array from your selector, and you were observing that actually array rather than the objects in it. Invoke will apply the method to each object in the array - in our case, observe. You could have done $$(selector).each(function(e){observe element}), but invoke does the same thing in a better way.

I'd tried that, but it didn't work either. Ah well, that part's working now. Now I just need to work out why the rest of my code doesn't quite work as expected haha.

Okay, new noob question coming up: invoke doesn't seem to work on elements added after the DOM has finished loading (eg: added after an AJAX call). How would one get round this?

Observe it when it is created.

var div = new Element('div', { id: 'status_content_1', 'class': 'content' }).observe('click', function(e)
{
     alert('Hello World');
});

Or something similar.

Ah. Might not work too well with my code haha. I'm using Ajax.Updater to add the output from my script straight into the container element.