Javascript API writing

Question

<div id ="filter">
    <select id= "s1"/>
    <select id= "s2"/>
    <select id= "s3"/>
    <select id= "s4"/>
    <select id= "s5"/>
    <select id= "s6"/>
</div>

So basically I create filters with select elements of different ids in each of many but the data population and change events are similar. So I wanted to create an API something like this:

new Filter({ele1:$("#s1"), ele2:$("#s2"), ele3:$("#s3"), ele4:$("#s4")})

This filter should handle the population and its change events.

function Filter(map)
{
   this.ele1 = map.ele1.id;
   this.ele2 = map.ele2.id;
   //similarly for all the other elements.

   this.e1e1.change(function(){
       //these elements uses selectors of other elements So how can I access the ele2, ele3 and so on...
   });
}

The problem here is the change events should be able to access the other variables ele2,ele3 of the filter object.

Why not query only the <div> containing the <select>-s, and then find all the selects inside, not bothering with their IDs? It seems to me that you could get away with only static js. — vinczemarton
– vinczemarton, Commented May 21, 2013 at 6:11
Yeah once again one has to write change events for the every select element. Can we do something in Filter(map). How do other api's like highcharts take of these things. — dumper
– dumper, Commented May 21, 2013 at 6:25
I fail to understand why you call the Filter function an API. Can you clarify your question on what you want? — vinczemarton
– vinczemarton, Commented May 21, 2013 at 6:30

vinczemarton · Accepted Answer · 2013-05-21 07:04:38Z

1

I'm not really sure what your question is, but usually this much juggling with ID-s is contraproductive, especially when you use a library with a very strong selector engine.

function addChangeEvents(selector) {
    //all your elements are in the selector, why bother with mapping them to an other array like object?

    selector.change(function () {
        var $this = $(this); //this is the element the change event is fired on

        selector.each(function () { //selector is the "list" of all elements
            //you can access all the elements of the selector
            console.log(this); //here this is the element you are iterating over.

            console.log(this.id);

            console.log($this); //you can access the $this variable defied in the outer function
        });
    });
}

And you can call it like:

addChangeEvents($('#filter select'));

The variable selector will contain all the elements you need. Also it will be available even after the addChangeEvents code executed (in the callback of the change event).

Does this answer your question?

EDIT:

Or perhaps you were mapping because there are more than one list of selects:

<div id="filter">
    <select id="s1"/>
    <select id="s2"/>
    <select id="s3"/>
</div>
<div id="other_filter">
    <select id="s4"/>
    <select id="s5"/>
    <select id="s6"/>
</div>
etc...

In this case you can call the addChangeEvents function more than once:

addChangeEvents($('#filter select'));
addChangeEvents($('#filter2 select'));

You can even iterate through all the filters if you add a class like:

<div id="filter" class="filter">
    <select id="s1"/>
    <select id="s2"/>
    <select id="s3"/>
</div>
<div id="filter2" class="filter">
    <select id="s4"/>
    <select id="s5"/>
    <select id="s6"/>
</div>
<div id="filter3" class="filter">
    <select id="s7"/>
    <select id="s8"/>
    <select id="s9"/>
</div>

And than select the elements with the given class:

$('.filter').each(function () {
    addChangeEvents($(this).find('select'));
});

edited May 21, 2013 at 7:04

answered May 21, 2013 at 6:27

vinczemarton

8,2267 gold badges59 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dumper Over a year ago

The change events of a select element will change the available options of the next select options. I think in a page there are many select elements iterating over all them is n't good idea.

vinczemarton Over a year ago

I'm not iterating over all <select> elements. $('#filter select') iterates over the <select> elements inside the <div id="filter">. You can change that selector to $('#s1, #s2, #s3'), but it seems to me that the hard-coded ID-s is the thing you would need to avoid. I have presented you with a solution which selects the elements by their environment instead of their ID-s.

Collectives™ on Stack Overflow

Javascript API writing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related