Javascript – Silverlight 3 onload event binding multiple instances

javascriptonloadsilverlightsilverlight-3.0

I have two silverlight instances embedded in a page like follows (content simplfied to relevant details only):-

<object id="SL1" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
   <param name="source" value="/clientBin/Common.xap"></param>
   <param name="minRuntimeVersion" value="3.0.40624.0"></param>
   <param name="windowless" value="True"></param>
   <param name="onload" value="silverlight_onload"></param>
   <param name="initParams" value="some configuration here"></param>
 </object>

<object id="SL2" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
   <param name="source" value="/clientBin/Common.xap"></param>
   <param name="minRuntimeVersion" value="3.0.40624.0"></param>
   <param name="windowless" value="True"></param>
   <param name="onload" value="silverlight_onload"></param>
   <param name="initParams" value="a different configuration here"></param>
 </object>

As you can see both objects point at the same xap but will have different content in the initParams.

Note, however, that the onload param points to the same function name. This particular part of this question is invariant.

Elsewhere in javascript at the global level I have:-

function silverlight_onload(sender, eventargs)
{
  //Magic pixie dust here
}

The goal is to take the sender and determine which of the object elements is the source of the event. The straight-forward (but for the sake of this question unacceptable) answer would be to use two different functions. I'm look for something that does not require a new function be added to the global namespace per SL object.

Bonus, kudos goes to anyone who can tell me why SL couldn't get a little more assistance from the host browser and handle the onload parameter more like other element events like onlick. For example ask the browser to eval("function() {" + onload + "}" and attach the return function to the onload event.

Best Answer

Is your goal to get the initparams in the javascript and then do something with it? If so you can do:

sender.getHost().InitParams

the getHost() returns the actual plugin object see msdn page for more details. I don't know of a way to get the object's ID unless you set it as an initparam.

Related Solutions

Javascript – Getting the ID of the element that fired an event

In jQuery event.target always refers to the element that triggered the event, where event is the parameter passed to the function. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Note also that this will also work, but that it is not a jQuery object, so if you wish to use a jQuery function on it then you must refer to it as $(this), e.g.:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

Javascript – Event binding on dynamically created elements

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

... can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind document may not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something here
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Best Answer

Related Solutions

Javascript – Getting the ID of the element that fired an event

Javascript – Event binding on dynamically created elements

Related Topic