jQuery/XML: synchronizing data and representations using DOM-Mutation-Events

Question

I'm creating a web application which uses jQuery to modify and HTML to represent the data. There can be several representations in the document related to a single data node. The user can dynamically create them. For example, data will be represented and can be modified in tables. Additionally the user has the opinion to extend a "quick-overview-panel" to access specific data quickly.

If one user-control triggers an event => data must be modified => other user-controls related to the same data need to be refreshed.

<html>
<head>
    <title>synchronize</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
     $(function() {

        //handling data

        $.ajax({url: "./data/config.xml", cache: false, async: false, success: init});
        var data;
        function init(d) {
           data = d;
           $(".bottle", data).bind("DOMAttrModified", notifyRep);

        }
        function notifyRep(e) {
           if(e.relatedNode.nodeName == "content")
              $(this).trigger("changeContent");
        }

        //handling representation-sync

        $(".bottle", data).bind("changeContent", function() {
           $("#bottleRep1").val($(this).attr("content"));
        });

        $(".bottle", data).bind("changeContent", function() {
           $("#bottleRep2").val($(this).attr("content"));
        });

        //handling modification

        $("#bottleRep1").bind("change", function() {
           $(".bottle", data).attr("content", $(this).val());
        });

        $("#bottleRep2").bind("change", function() {
           $(".bottle", data).attr("content", $(this).val());
        });

     });
    </script>
</head>
<body>
    <div id="app">
        <span>bottle-content:<input id="bottleRep1" type="text" value="test" /></span>
        <span>bottle-content:<input id="bottleRep2" type="text" /></span>
    </div>
</body>

The actual problem is that each user-control handles its own modification. The change-content handler needs to know the data-modifier, so it can skip the representation-update. Is there an existing general solution for this kind of problem? If not, can you make suggestions for a good solution?

score 0 · Answer 1 · answered Sep 05 '11 at 06:53

you can try to create a custom function that will handle the perform some action when trigger for refresh
$('body').bind('foo', function(e, param1, param2) {
alert(param1 + ': ' + param2);
});

then you can call the above created function on chnage of dta so the function get trigger and perform refresh
like this
$('body').trigger('foo', [ 'bar', 'bam' ]); // alerts 'bar: bam'

jQuery/XML: synchronizing data and representations using DOM-Mutation-Events

1 Answers1