[Classic] Rendering text/html to a tiddler

[Hiru Yoru]

Hi,

I have a few questions that I searched the group for, but I couldn't find clear answers to:

When writing a plugin...

-- How do you render html code into a tiddler efficiently?

I tried using wikify(), but even when it succeeded in rendering html tags, it enclosed them in an unnecessary span. I'm not looking to only render an empty element. I'm looking for how to render something with the content that goes within it.

For example:

someFunctionToRenderHTML("<span class="classname"><h1>Header</h1><br />Some text goes here.<br /></span>");

-- How do you render part of an html tag in one place and then part in another?

What if I wanted to render part of a span before some code and then the closing tag to the span afterwards. For example:

<span class="someclass"> // render this individually

// code goes here

</span> // render this closing tag individually

Is there a way to do this?

I looked at existing plugins and just wasn't able to decode things. Any help that you could provide would be greatly appreciated!

Kind regards,
Hiru

[whatever]

Hi!

Since all your three segments above are supposed to end up as a single item, you can just concatenate, like you did in your someFunctionToRenderHTML example. And you can use wikify, but you need to also state the second parameter, namely where to wikify. You also need to escape and double quotes. Note the difference between classname and someText below. classname is part of the string and its tags are escaped (here you can also use singular quotes (') instead of escape double quotes (\")). someText is a variable that you're inserting into the string, hence not only the double quotes but the pluses on either side.

var someText = "Some text goes here.";
var out = "<span class=\"classname\"><h1>Header</h1><br />"+someText+"<br /></span>";
wikify(out,place);

So basically, no need to wikify each element separately.
Also note the "place" parameter. This is the location of where you stuff will be rendered, namely at the location where your plugin call is located in the tiddler, taking into account any CSS that makes it otherwise. If you've used the createTiddlyElement function to create a specific div, span or whatever, you can also render into that element.

var mydiv = createTiddlyElement(place, "div", "myID");
var out = "<span class="classname"><h1>Header</h1><br />Some text goes here.<br /></span>";
wikify(out,mydiv);

The above code works within a plugin, but if you're using script tags, you need to specify the place separately. Which we'll deal with separately, if necessary.:)

w


[Hiru Yoru]

Hi, w,

Thank you very much for your reply. It was very helpful! I was able to use the methods you mentioned with much success.

May I ask, how could I create a <div> element and specify onclick behavior for it? Is that possible?

Thank you again,
Hiru


[whatever]

Hi!

I haven't tried that specific combination yet, I usually use buttons for onclick events. However, I think this should work:

var mydiv = createTiddlyElement(place, "div", "myID");


mydiv.onclick = function(your,params) {your function};

w