Manipulating the DOM and saving HTML back to the tiddler. (Adding macro support)

32 views

Skip to first unread message

funkyeah

unread,

Apr 5, 2012, 2:22:27 PM4/5/12

to tiddl...@googlegroups.com

I have a tiddler which uses the nested <html> capabilities: (currently I also have a section label right above it as well)

!HTML

<html>

<div>something</div>

</html>

This gets rendered into the view template, and I proceed to manipulate the DOM representation of the HTML section of the tiddler with some inlinejavascript.

Now I want to take the HTML resulting from the manipulation and save it back into the tiddler. Basically I just grab the relevant manipulated HTML and replace the HTML section of the tiddly with the update section function lifted from http://www.tiddlytools.com/#EditSectionPlugin (which also happens to be where the section label comes into play: var tiddlerTextHtmlOnly = store.getTiddlerText(title+'##HTML'); )

This seems like it will work all fine and dandy until I use a macro in the HTML portion of the tiddler at which point the DOM representation and tiddler HTML content wouldn't match up and thus can't be saved.

Questions:

Is there a better way to do this?

Is there an existing method to specifically grab the HTML content of a tiddler, make it into a jQuery object, and manipulate with jQuery? (If I could do this I could directly manipulate the pre-rendered HTML content of a tiddler and then just refreshDisplay to get the updated rendering of that manipulation)

funkyeah

unread,

Apr 5, 2012, 3:26:05 PM4/5/12

to tiddl...@googlegroups.com

Whoops, submitted too soon.

My thoughts on the matter are that you could pass the html string of the tiddler to Jquery to get a jQuery object:

var tiddlerTextHtmlOnly = store.getTiddlerText(title+'##HTML');

var tiddlerHtmlJqueryObj = jQuery(tiddlerTextHtmlOnly);

... in my example I've attached a click event to a rendered tiddler DOM element

jQuery('#contentWrapper').delegate(".addButton", "click", function(){

addRow(jQuery(this));

});

In the addRow function I'd get the parent id of the addButton

function addRow(thisButton){

buttonParentID = thisButton.parent().attr('id');

};

I'd find the respective id in the jQuery object derived derived from the tiddler's pre-rendered HTML section. (and this is where it breaks down for me using this method)

?? maybe something like: ??

jQuery("buttonparentID",tiddlerHtmlJqueryObj).clone().insertAfter(jQuery(buttonParentID));

then:

1. replace the section with this output

2. use refreshTiddler to re-render

3. add events to the new elements if neccessary

Reply all

Reply to author

Forward

0 new messages