Template Not Found Error

[zendog74]

Hi all. I am using Pure.js in a project and it has worked well for a year or so now. However, we are doing some new work and now I am seeing this error happen:

The node "td.title div@title" was not found in the template: <tr id="aui_3_4_0_1_4187"> <td class="type" style="">_s912988_0:</td> <td class="category">_s912988_1:</td> <td class="title" id="aui_3_4_0_1_4186"><a href="https://vmicedev05.sef.hq.nasa.gov/group/ice-portal-users/calendar?p_p_id=c…_p_cacheability=cacheLevelPage&amp;p_p_col_id=column-2&amp;p_p_col_count=3" class="eventDetailsLink" data-hasqtip="35" oldtitle="wentestc2" aria-describedby="qtip-35" _a117479_id="_s912988_3:" _a117479_title="_s912988_4:">_s912988_2:</a></td> <td class="startDate">Jul 5, 2014 1:00 PM</td> <td class="endDate">Jul 5, 2014 2:00 PM</td> </tr>

Does anyone have any idea why this error would happen? The above error only happens after something is updated and the portlet is redrawn using an Ajax request. Otherwise, it works fine.

I am using Pure.js 2.8.2. I considered upgrading to 2.8.3, but it does not look like much changed in that release.

Thanks.

[Mic (BeeBole)]

The selector td.title div@title looks for a div inside td.title and change it's title attribute.

And it looks there is only an A tag, not a DIV in td.title

[zendog74]

Right, but the div is there when the page loads and is there when the portlet reloads via ajax request, except when an item is updated and the portlet is reloaded via ajax request.

Long story short, it works in every situation except for this one. The JS code is not doing anything at all to manipulate the template. In fact, the same code to reload the portlet is used in all instances, so it is all using the exact same code. It appears that Pure.js is deleting the div inside the template or something like that in this one case.

[Mic (BeeBole)]

What happens probably is another directive that remove the div. On a parent node.

Either you need to review the logic, that remove the div.
Or you can just change the order of the directives.
Putting the one giving the error at the top, or higher.

[zendog74]

I checked the code and the template "'td.title div@title':'currevent.subject'" is only referenced once in the JavaScript code, so I don't believe that the code is somehow removing the div.

Also, the issue only occurs when there is only one row in the results table where the directive is being applied. However, the JSON returned to populate the template is the same in both cases. It is an array:

{"events": [ {...}]}

So, that should not matter correct?

Here is a snippet of the code being used to build the directive:

var directive = {'tr':{'currevent<-events':{

...

'td.title a@title':'currevent.subject',

'td.title div@title':'currevent.subject',

...

}

};

jQuery("tbody", tableSel).render(jsonObj, directive);

Again, this all works properly when there is more than one event in the response JSON.

[zendog74]

Well, after further research and testing, turns out that you were right about the HTML element being removed. Turns out that the tool tip plugin we are using (QTip2) was removing the div when it constructed the tool tip. I was able to tell it to not do that and now things are working as expected again.

Thanks a bunch for the help in troubleshooting this!

[Mic (BeeBole)]

Another option you may consider is to compile your template (when the div is there) and get a JS function out of it.

Leave the plugin remove the div if it's the normal behavior.

Then run the transformation from the compiled template when you need it.

[denis.d...@gmail.com]

Hello all,
I'm a first time user of Pure library. I find it a nice idea and useful.
However I noticed something strange with my code, working the first time and all other times ending in pure error: The node was not found in the template
I've this html template:

            <div id="node-content" class="node">
                <div>Name: <span class="pureName"></span></div>
                <div>Is meta: <span class="pureIsMeta"></span></div>
                <div>URI: <span class="pureUri"></span></div>
                <div>
                    <h3>Properties of <span class="pureName"></span></h3>
                    <ul><li class="pureProperty"><span class="purePropertyText"></span></li></ul>
                </div>
                <div>
                    <ul><li class="pureReferredFrom"><span class="pureReferredFromText"></span></li></ul>
                </div>
                <div>
                    <h3>Instances of <span class="pureName"></span></h3>
                    <ul><li class="pureInstances"><span class="pureInstanceText"></span></li></ul>
                </div>
            </div>
           
...Along with this javascript directive:

            var jsonNodeFormatting = {
           
                '.pureName': 'name',

                '.pureIsMeta': function( node ) {
                    return node.isMeta ? "true" : "false";
                },
               
                '.pureUri': function( node ) {
                    return (typeof node.uri !== "undefined") ? node.uri : "";
                },
               
                '.pureProperty': {
                    'prop<-properties': {
                        '.purePropertyText': function(a) {
                            return a.item.relationName + " " + a.item.consequentName;
                        }
                    },
                    sort: function (a, b) {
                      var cmp = function (x, y)
                      {
                        var relationNameA = x.relationName.toLowerCase();
                        var consequentLabelA = x.consequentName.toLowerCase();
                        var relationNameB = y.relationName.toLowerCase();
                        var consequentLabelB = y.consequentName.toLowerCase();
                        return
                            (relationNameA == "is instance of" && relationNameB != "is instance of") ? -1 :
                            (relationNameA < relationNameB) ? -1 :
                            (relationNameA > relationNameB) ? 1 :
                            (consequentLabelA < consequentLabelB) ? -1 :
                            (consequentLabelA > consequentLabelB) ? 1 : 0;
                      };
                      return cmp(a, b);
                    }
                },
               
                '.pureReferredFrom': {
                    'prop<-referredFrom': {
                        '.pureReferredFromText': function(a) {
                            return a.item.antecedentName + " " + a.item.relationName + " " + a.item.consequentName;
                        }
                    },
                    filter:function(a){
                        return a.item.relationName != "is instance of";
                    },
                    sort: function (a, b) { // same kind of sort as the usual Array sort
                      var cmp = function (x, y)
                      {
                        var relationNameA = x.relationName.toLowerCase();
                        var antecedentNameA = x.antecedentName.toLowerCase();
                        var relationNameB = y.relationName.toLowerCase();
                        var antecedentNameB = y.antecedentName.toLowerCase();
                        return
                            (relationNameA < relationNameB) ? -1 :
                            (relationNameA > relationNameB) ? 1 :
                            (antecedentNameA < antecedentNameB) ? -1 :
                            (antecedentNameA > antecedentNameB) ? 1 : 0;
                      };
                      return cmp(a, b);
                    }
                },
               
                '.pureInstances': {
                    'prop<-referredFrom': {
                        '.pureInstanceText': function(a) {
                            return a.item.antecedentName;
                        }
                    },
                    filter:function(a){
                        return a.item.relationName == "is instance of";
                    },
                    sort: function (a, b) { // same kind of sort as the usual Array sort
                      var cmp = function (x, y)
                      {
                        var antecedentNameA = x.antecedentName.toLowerCase();
                        var antecedentNameB = y.antecedentName.toLowerCase();
                        return antecedentNameA < antecedentNameB ? -1 : antecedentNameA > antecedentNameB ? 1 : 0;
                      };
                      return cmp(a, b);
                    }
                }
            };
           
And the instruction, triggered each time some new json data is loaded:

    $p('.node').render(json, jsonNodeFormatting);
   
This is working well at the very first call. Every following calls end with the
     pure error: The node was not found in the template

As I suspected that something was emptying elements from the DOM.
The template is wrapped in a jquery-ui dialog, but I doubt that something in it is responsible of these disappearing from DOM.
I finally had to empty the "node-content" div and reconstruct it immediately before calling $p('.node').render(json, jsonNodeFormatting), and that works:

                    $("#node-content").empty();
                    $("#node-content").html(
                        '<div>Name: <span class="pureName"></span></div>' +
                        '<div>Is meta: <span class="pureIsMeta"></span></div>' +
                        '<div>URI: <span class="pureUri"></span></div>' +
                        '<div>' +
                        '    <h3>Properties of <span class="pureName"></span></h3>' +
                        '    <ul><li class="pureProperty"><span class="purePropertyText"></span></li></ul>' +
                        '</div>' +
                        '<div>' +
                        '    <ul><li class="pureReferredFrom"><span class="pureReferredFromText"></span></li></ul>' +
                        '</div>' +
                        '<div>' +
                        '    <h3>Instances of <span class="pureName"></span></h3>' +
                        '    <ul><li class="pureInstances"><span class="pureInstanceText"></span></li></ul>' +
                        '</div>');
                    $("#node-content").show();
                    $p('.node').render(json, jsonNodeFormatting);
                   
I hope this could help...

Saisissez le code ici...

[Mic (BeeBole)]

Hello Denis,

If you plan to reuse a template.

You must compile it (HTML + directives, giving a JS function).

And then use that function instead of the directive during render.

Look at the example under "compile" at http://beebole.com/pure/ 

And then in render, use the compiled function instead of the directive.

Each time you get new data, you run the compiled function.

The original HTML can change so much when you render it, that it can't be used anymore as the template.

And when you try to render it again, things may be missing, and giving you the "not found" errors.

Cheers,