What is an approach to communicate between content parts on client side?

Topics: Core, Customizing Orchard, General, Writing modules, Writing themes
Feb 25, 2013 at 1:31 PM
Does anybody know how some content parts can notify another about any events? Another question is how to make it on client side, without Ajax/server side Event Bus. I've try to use HTML5 LocalStorage mechanism using JQuery on content part script, but it's not working. Is any standard approach to make it? I suppose that an any client pub-sub mechanism exist on client side. But i can't found this. Can someone help me with this problem, please?
Feb 25, 2013 at 2:32 PM
This may be a dumb question on my part, by why not use javascript events for this, if you only need to do it on the client side?

use .trigger() / .on()

If you provide a more specific description of what you want to do maybe we can give a better suggestion.
Coordinator
Feb 25, 2013 at 5:49 PM
Yup, jQuery has a decent custom event system.
Feb 26, 2013 at 2:10 AM
Edited Feb 26, 2013 at 2:10 AM
Thanks, i've got it. But i've try to use JQuery for binding events on localStorage and events not fired. Is any restrictions in modules that disables html 5 features? Sorry for the stupid questions...
Feb 26, 2013 at 3:14 AM
Can you be more specific, maybe post a sample of the code you tried that's not working?
Feb 26, 2013 at 4:58 AM
Yes, this is the first content part code:
@{
    Script.Require("jQuery");
    Script.Require("Publish");
}


<div id="buttondiv">
    <button id ="create" >Create</button>
    
</div>
Script for that part:

publish.js
(function ($) {      
    $(document).ready(function () {
        $(window).bind('storage', function (e) {
            alert('change');
        });

        localStorage.setItem('someItem', 'someValue');
        
        $("#create").click(function () {
            localStorage.setItem("test", "data");
        });
    });

})(jQuery);
ResourceManifest.cs:
public void BuildManifests(ResourceManifestBuilder builder)
{
    var manifest = builder.Add();
            manifest.DefineScript("jQuery").SetUrl("jquery-1.6.4.min.js", "jquery-1.6.4.js").SetVersion("1.6.4");
            manifest.DefineScript("Publish").SetUrl("Publish.js").SetDependencies("jQuery");
}
Second content part is simple:
@{
    Script.Require("jQuery");    
}

<h2>Simple text info</h2>
Script for second content part:
(function ($) {
    $(document).ready(function () {
        $(window).bind('storage', function (e) {
            alert('storage changed');
        });
    });

})(jQuery);
When i run this, i wait that when i click 'Create' button alert should be happens at least but nothing happens at all...
Coordinator
Feb 26, 2013 at 6:43 AM
Use your browser's debugger to set a breakpoint and see what 's failing. This doesn't look like it has much to do with Orchard.
Feb 26, 2013 at 11:07 AM
Feb 26, 2013 at 12:34 PM
According to @infofromca's link, you can't detect the event firings from the same tab that fired them. If that's a problem maybe you could get around it by writing a small wrapper around local storage, and manually fire the event via jquery's .trigger() method. You just have to make sure all the code that interfaces with local storage, at least the code involving events you want to be able to hook into, are using your wrapper rather than using local storage directly.
Feb 26, 2013 at 12:36 PM
Edited Feb 26, 2013 at 12:36 PM
@eugene5010, there should not be any reason that html5 features would be disabled on your Orchard pages. I'm assuming your theme uses an html5 doctype (which is the case for orchard's default theme).
Feb 26, 2013 at 3:25 PM
Edited Feb 26, 2013 at 3:40 PM
Thanks all of you! I see that it's not Orchard property because simple html/javascript page also not working. How @Bertrand says, it's some kind of browser problem. Sorry for spending your time!

Yes, it was browser problem. No one of Opera 12.13, Google Chrome 25, Firefox 17 doesn't supports this html 5 feature! It works only in FireFox 19. Very strange behavior(