Multiple events for one jQuery function

Question

I'm changing the center point on a google map by either two dropdown fields, or a search textbox and button. For each of these events I need to geocode the input and recenter the map. I tried to put all three events into one function so I can reuse the code, but I can't get it to work. When I click on the dropdown, it tries to geocode. Any idea how I can split this up?

Code:

jQuery('#input_13, #input_6_34, #map_change_button').bind('change click',
    function() {
        var geocoder = new GClientGeocoder();
        var address;
        if ( !jQuery("#map_search").val() ) {
            address = jQuery("#input_13 option:selected").text() + ", " +
                      jQuery("#input_6_34 option:selected").text();

        }
        else { 
            address = jQuery("#map_search").val();
        }
        if ( geocoder ) {
            geocoder.getLatLng(
                address,
                function(point) {
                    if ( !point ) {
                        alert(address + " not found");
                    } else {
                        map.setCenter(point);
                        marker.setPoint(point);
                        marker.show();
                        map.setZoom(13);

                        //jQuery("input#wp_geo_latitude").val(point.lat());   
                        //jQuery("input#wp_geo_longitude").val(point.lng());    
                    }    
                }    
            );    
        }
        return false;
    });

"When I click on the dropdown, it tries to geocode" - isn't that exactly what you wanted? — configurator
– configurator, Commented Jul 7, 2011 at 1:46

Ian Jasper · Accepted Answer · 2011-07-07 01:38:02Z

1

put class in every dropdownlist

say for example on your html

<select id="input_13" class="myDropDownClass"/>
    <option name="box1" value="Value1">Display Text1</option>
    <option name="box2" value="Value2">Display Text2</option>
    <option name="box3" value="Value3">Display Text3</option>
</select>
<select id="input_6_34" class="myDropDownClass">
    <option name="box1" value="Value1">Display Text1</option>
    <option name="box2" value="Value2">Display Text2</option>
    <option name="box3" value="Value3">Display Text3</option>
</select>
<input id="map_change_button" type="submit"/>

then on your jquery do this

// Create a function
function ChangeMap() {

        var geocoder = new GClientGeocoder();

        var address;

        if ( !jQuery("#map_search").val() ) {

            address = jQuery("#input_13 option:selected").text() + ", " + jQuery("#input_6_34 option:selected").text();

        }

        else { 

            address = jQuery("#map_search").val();

        }

        if ( geocoder ) {

            geocoder.getLatLng(

                address,

                function(point) {

                    if ( !point ) {

                        alert(address + " not found");

                    } else {

                        map.setCenter(point);

                        marker.setPoint(point);

                        marker.show();

                        map.setZoom(13);

                        //jQuery("input#wp_geo_latitude").val(point.lat());

                        //jQuery("input#wp_geo_longitude").val(point.lng());

                    }

                }

            );

        }



        return false;
    }

// call the function ChangeMap() on the change event of the dropdown
$('.myDropDownClass').change(function{
    ChangeMap();
});

// call the function ChangeMap() on the click event of the submit button
$('#map_change_button').click(function{
    ChangeMap();
});

answered Jul 7, 2011 at 1:38

Ian Jasper

3,0787 gold badges39 silver badges60 bronze badges

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

3 Comments

Casey Over a year ago

Oh thank you. I'm emberassed to say I haven't created a function in jQuery and referenced it somewhere else yet. This makes sense.

Ian Jasper Over a year ago

That's ok. You don't need to worry about it, you just need to learn from it :) so next time you already know :)

Casey Over a year ago

Yeah good point! Gotta keep moving on... I'll definitely use this in the future.

Saad Imran. · Accepted Answer · 2011-07-07 01:31:35Z

1

Why don't you put the body in a separate function and then call that function when those events are raised separately? Or maybe I misunderstood what you were asking.

answered Jul 7, 2011 at 1:31

Saad Imran.

4,5402 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Multiple events for one jQuery function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related