CODEWITHSUNDEEP
prototypejs
stephenmurdoch
stephenmurdoch

Reputation: 34613

Simple Prototype.js code to select multiple elements with the same classname

I have one link with an id of "link", and I use the javascript below to open that link up in a modalbox:

#In my template I have: 
<a href="some/path" id="link">link</a>


#Then in my application.js file I have:
document.observe('dom:loaded', function() {
    $('link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500});            
    });
})

Since id's must be unique, this javascript only works for one element per page so I use it to observe my login-link and it has served me well. Until now.

I want to use the same javascript to observe multiple links which have classnames instead of id's as below:

<a href="link/to/some/stuff" class="link">link 1</a>
<a href="link/to/some/other/stuff" class="link">link 2</a>

When I do this, I can't get any of the links to open in a modalbox. If I change the class to an id for each link, then I can get the first link in the list to open in a modalbox.

I've tried to use the '$$' notation to build an array of links in my javascript (shown below) but if I do that, then none of the links open correctly

    #document.observe method removed for display purposes
    $$('link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500} );
    });

My javascript skills obviously suck.
Does anyone know how to fix the problem?

Upvotes: 2

Views: 4879

Answers (4)

Cem Baykam
Cem Baykam

Reputation: 537

I was trying to solve the same issue and used mabwi's code with some small changes.

Here is the solution for me: 

$$('.link').each(function(el) { el.on('click', function(event) {
    event.stop();
    Modalbox.show(this.href,{title: 'some title', width: 500} );
})})

This worked for me hope It will work for you too.

Upvotes: 2

clockworkgeek
clockworkgeek

Reputation: 37700

Instead of trying to assign observers to each link in turn you can use the browser's abilities to help yourself. First you need to identify a common parent element of all the links...

<div id="links">
    ...
    <a href="link/to/some/stuff" class="link">link 1</a>
    <a href="link/to/some/other/stuff" class="link">link 2</a>
    ...
</div>

Then take advantage of event delegation.

$('links').on('click', 'a.link', function(event) {
    event.stop();
    Modalbox.show(this.href,{title: 'some title', width: 500});            
});

This benefits the browser by asking for less work to be done, and it adapts to new links being added and removed (or even their class name being changed) without having to explicitly assign and unassign event handlers. You might not know if the links will be changing but it could be a requirement in future, planning ahead is a good coding strategy and it's less code too!

Upvotes: 1

MattBelanger
MattBelanger

Reputation: 5350

Your code only needs two changes

 $$('.link').each(function() { observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500} );
    }}));

Note the '.link', to indicate it's a class name, and then the each function to apply it to each result. Brackets may need tweaking, I'm holding a baby at the moment

Upvotes: 5

mhakes
mhakes

Reputation: 21

[This solution uses prototyejs version 1.7] This seems to work for me, and an id to each link, then... You can either wrap your links in specfic divs

<div id="content">
<a href="link/to/some/stuff" class="link">link 1</a>
<a href="link/to/some/other/stuff" class="link">link 2</a>
</div>

If you do wrap your links in a div this code triggers the modalBox

document.observe('dom:loaded', function() {
    var elements = $('content').select('a');
    elements.each(function(e){
        $(e.id).on("click", function(event){
            event.stop();
            Modalbox.show(this.href,{title: 'some title', width: 500} );
        });
    });
});

If you want all the links on a page you can change the code to grab every link with the class="link"

document.observe('dom:loaded', function() {
    var elements = $$('a.link');
    elements.each(function(e){
        $(e.id).on("click", function(event){
            event.stop();
            Modalbox.show(this.href,{title: 'some title', width: 500} );
        });
    });
});

Upvotes: 2

Related Questions