I am trying to run a 3rd party jQuery library http://embed.ly reactively when a link changes. I am using the new Tracker.autorun to tell it to re-run the jquery in the Template .rendered function when the Session variable 'droppedLink' changes. (I did with a database reactive variable too but same issue).
I tried to follow Best way to prevent a template helper to be rerun when it is unnecessary?
I was not sure if I need to try this approach? Meteor 0.8 Blaze how to update rendered changes for Jquery plugins it seemed more complex as washoping the simpler autorun should suffice.
On the initial render all is OK (see # 1 below)
When U replace a link (see # 2 & 3), the variable updates reactively, The autorun function runs, but the result on the Embedly rendred link is incorrect. It seems to have inserted multiple nested links on the page (see screenshots below)
1) Here's the .rendered function
Template.resourceItem.rendered = function() {
var self = this;
Tracker.autorun(function () {
var updatedLink = Session.get('droppedLink');
console.log("updated url:" + updatedLink + " for " + self.data._id);
var closestDivWidth = self.$('.embedlylink a').closest('div').width();
self.$('.embedlylink a').embedly({
key: '7c2cb80d45fb4a17babe2cf3bbf29d3e',
query: {maxwidth: closestDivWidth}
});
});
}
2) here's the initial result, with the link rendered correctly (1st pass):
2) When I replace with link #2 I get:
Note the rendered link is correct, however the actual embedded text and image is incorrect.
3)When I replace with 3rd link here's the image and the HTML rendered:
Note the rendered link is correct, however the actual embedded text and image is incorrect.
Here's #3's rendered HTML: (not see how embedley just keeps nesting new links). If I refresh the page all works fine (like #1 above).
Example of console.log: no JS errors, only debug stuff from me. Sorry not very pretty but I can see that the autorun stuff is working and the URL is getting updated in the DB correctly, just the embedly does not seem to be rendering it correctly:
```
this id in subs:e97cc28966ca211852c070fc router.js:111
title:0 router.js:113
this id in subs:e97cc28966ca211852c070fc router.js:111
title:1 router.js:113
this id in subs:e97cc28966ca211852c070fc router.js:111
title:1 router.js:113
Can Edit, editors: userID:2iNQmTMs9AkLzQxgCin Editors array:false permissions.js:11
can edit:true permissions.js:13
activeModal:false modal.js:6
updated url:undefined for 00e3ce4f9255b8c3a2453e49 resource_item.js:323
updated url:undefined for e97cc28966ca211852c070fc resource_item.js:323
about to update: 00e3ce4f9255b8c3a2453e49 field:resourceURIvalue:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html globals.js?022c5f844233f60827f7b12e193ea12506c0cf10:18
about to update: e97cc28966ca211852c070fc field:updatedvalue:1413802243911 globals.js?022c5f844233f60827f7b12e193ea12506c0cf10:18
this id in subs:e97cc28966ca211852c070fc router.js?42427feeaf93d51058b2ffbcf1e269df5b9917cc:111
title:1 router.js?42427feeaf93d51058b2ffbcf1e269df5b9917cc:113
updated url:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html for 00e3ce4f9255b8c3a2453e49 resource_item.js?66299ce9ff3edc4ea4e1ebc1ba549cc0eec7a2cd:323
updated url:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html for e97cc28966ca211852c070fc resource_item.js?66299ce9ff3edc4ea4e1ebc1ba549cc0eec7a2cd:323
Can Edit, editors: userID:2iNQmTMs9AkLzQxgCin Editors array:false permissions.js?bc95cfb655413c86e2325bd3f24145b2d6be9e94:11
can edit:true permissions.js?bc95cfb655413c86e2325bd3f24145b2d6be9e94:13
activeModal:false
```
Update & Possible workaround:
OK, I think I have worked out what's going on and I think it's because both Embedly and Meteor are manipulating the DOM.
The repetition occurs, as when I updated the URL for the second time, which is after EMbedly has removed the
<a class"something"> and replaced it with it's <embed> code. So the next time it's embedded extract that Embedly's links that are getting converted the second time.
This is because Meteor works without page refreshes and it seems it was not expecting Embedly to have changed the DOM too.
So I think to compensate for this I need to remove the Embed and re-insert the <a class="something">, like it was an initial pass, before calling Embedly. DO you have any hints on how to do this please? Ie I need to remove Embedley's <div class="embed"> and insert <a href=somelink></a>
This should allow Embedly to work as per initial pass through.
ps. I have no idea if manipulating the DOM this way is a bad bad thing ????
