none
Javascript Custom Events

    Question

  • Are there any javascript experts out there that know how to create cross-browser custom events in javascript?

    I have a Silverlight app, which launches another instance of the Silverlight app in a new browser window.  I have not problem send data across the Html DOM from the original app to the new one, but I can't figure out how to send data the other way, from the instantiated browser window to the main one.

    If js supported custom events this would be rather easy.

    Hope someone can help, thanks.

    Tuesday, August 12, 2008 8:08 AM

Answers

All replies

  • http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2008/07/28/quick-silverlight-tip-silverlight-events-in-javascript-and-javascript-events-in-silverlight.aspx

     

     check this

    Tuesday, August 12, 2008 8:54 AM
  • hi jordan,

                  check these links out...

    http://pietschsoft.com/post/2008/06/Silverlight-and-JavaScript-Interop-Basics.aspx

    http://msdn.microsoft.com/en-us/library/cc221359(VS.95).aspx

    http://blogs.microsoft.co.il/blogs/tamir/archive/2008/07/01/quick-silverlight-tip-how-to-access-html-dom-from-silverlight-and-silverlight-managed-objects-from-html.aspx

    http://timheuer.com/blog/archive/2008/03/09/calling-javascript-functions-from-silverlight-2.aspx

    http://blog.paranoidferret.com/index.php/2007/08/15/silverlight-and-javascript-interaction/


     

    Tuesday, August 12, 2008 9:10 AM
  • Thanks Shaji, but this isn't really custom events, or exactly what I'm trying to do.  I don't have any web controls on my browser pages, both are 100% full of the Silverlight app.

    Maybe it's possible to have a hidden button on the popup window which the Silverlight app on that page calls into to trigger, the event of which being captured by the silverlight app on the main browser.  But this is quite a hack, and I'm not sure how I could pass through arguments.


    Tuesday, August 12, 2008 9:14 AM
  •  Thanks also rajesh,

    I've seen all these articles as well.  What they all talk about is fairly trivial, calling javascript from Silverlight and vice versa.

    What I'm trying to do is a little more complicated:

    1) Silverlight launches a new browser containing a 100% filled silverlight app, subscribing to standard browser events (Close, load, etc)

    2) User presses a button on the launched silverlight app which passes the event + data to the original silverlight app.

    I'm assuming the only way the two silverlight apps can communicate between the two browser windows is via the Html DOM.  By using this it is easy to fire data from the original silverlight app to the child silverlight app, but not the other way.

    A hack I can imagine would be:

    1) Include a hidden html button on the aspx page that will house the child silverlight app, and have the parent silverlight app subscribe to the click event of this button.

    2) when the child silverlight app wants to send data to the parent app, it triggers the button's click event, the parent app captures this then invokes a javascript method on the child browser that returns an object as set by the child app.

     

    Tuesday, August 12, 2008 9:35 AM
  • The hidden field is a good way. Or use Ajax / Silverlight Downloader.

    Hidden field:
    Assuming you have a hidden input with an id="parHidden", you can pass data from the child to the parent like so:
    var p = parent.opener.document.getElementById("parHidden");
    p.value = "child data being passed to parent";

    Your parent page can then have a timer checking the value of the Hidden Input field.

    Ajax / Downloader:
    Ajax or the Downloader on the child page to make a call to an .aspx page on an event that retrieves/updates data to a database and returns the data back to your parent page.

    And if its actual "data" you want to pass, it could be an Array, JSON object or some other variable string.

    Tuesday, August 12, 2008 10:26 AM
  • The hidden field is a good way. Or use Ajax / Silverlight Downloader.

    Hidden field:
    Assuming you have a hidden input with an id="parHidden", you can pass data from the child to the parent like so:
    var p = parent.opener.document.getElementById("parHidden");
    p.value = "child data being passed to parent";

    Your parent page can then have a timer checking the value of the Hidden Input field.

     

    Thanks for the suggestions.   I was already working away on the hidden field solution.  I have created a demo app to show it working, would appreciate any comments & suggestions.

    One bug I've noticed is that I cannot seem to declare the hidden button before the silverlight object on the aspx page, if I do the silverlight control does not display.  Since the button is being "discovered" by silverlight straight after the child window is created, sometimes the page does not get enough time to complete loading before the call is made, and the object cannot be found.

    The solution can be downloaded from here

    Tuesday, August 12, 2008 10:50 AM
  • I dont have VS2008 at work yet, so I can load your app.

    your button does not have an ID, your javascript is looking for the "id" attribute not the name. You need to give the <button "ID=hiddenButton"> not name="hiddenButton":

    it should read:
    <button id="hiddenButton" visible="false" style="width:0;height:0"/>

    that should fix the issue.

    Also, why 2 windows? its silverlight, just have a "child" canvas that is hidden and when you need to display it, hide the "parent" and vice versa, and give a true Rich User Experience. That way all your variables are local. Just a suggestion.

     

     

     

    Tuesday, August 12, 2008 2:45 PM
  • Also, why 2 windows? its silverlight, just have a "child" canvas that is hidden and when you need to display it, hide the "parent" and vice versa, and give a true Rich User Experience. That way all your variables are local. Just a suggestion.

     

    The name tag works, though I will try the Id to see if it's any better.  thanks.

    the silverlight app has many "floating" canvas objects, that can be dragged around the page, however there is a requirement to allow any of these to be popped out into a small self contained browser - with communications between the two apps still intact.

     

    Tuesday, August 12, 2008 3:15 PM

  • <button id="hiddenButton" visible="false" style="width:0;height:0"/>

    Using Id still produces the same error as using name.  I'm sure I'll work something out.

    However my problem now is with passing more that single primitive values.  Any ideas on how to store more complex data in Javascript object?  I guess I could always store what I want in isolated storage which the parent app could then pick up.

    var element = HtmlPage.Document.GetElementById("hiddenButton");

    element.SetProperty("value", "boom");

    element.Invoke("click", null);

    Wednesday, August 13, 2008 4:28 AM
  • You can use JSON for better data storage in javascript. I have a tutorial you can download for free.
    http://www.gjhdigital.com/gjhdigital/sl/JSONSilverlight/

     

    Wednesday, August 13, 2008 10:34 AM