Dynamic content?

Mike Sutton

unread,

Aug 17, 2015, 7:28:56 AM8/17/15

to TiddlyWiki

What I'm looking to be able to do is for the user to enter some text in a text box in a tiddler, press a button and have a piece of JavaScript run using the contents of the text box as input. Having the output of the JavaScript function injected into the page somehow is a bonus, but if not then a simple alert box or console.log would suffice.

I've been looking into macros, but have yet to find any that use this sort of dynamic input/output.

This is pretty simple to accomplish in vanilla web development, but I'm trying to write it the Tiddly way, any pointers?

Thanks,

Mike

PMario

unread,

Aug 17, 2015, 9:52:10 AM8/17/15

to TiddlyWiki

Hi Mike,

Can you tell us, what the "javscript" function does with the text input?

have fun!
mario

Mark S.

unread,

Aug 17, 2015, 10:47:23 AM8/17/15

to TiddlyWiki

You don't say in your post if you mean TW5 or TWC. There were ways to use JS in TWC. In TW5, you have to write a plugin or widget. This is supposed to make TW5 safer, though I'm sure hackers could write plugins. For the rest of us, it just makes TW a little less versatile.

Good luck!
Mark

Mike Sutton

unread,

Aug 17, 2015, 12:38:22 PM8/17/15

to TiddlyWiki

There's a couple of places where this kind of thing would be handy in my current wiki; one is to build and send a simple AJAX request to a machine on the network using an IP specified in the text box i.e: "http://{{IP}}/api?foo=bar", and the other is to calculate a simple checksum of an RS-232 data packet based on some dynamic parameters.

I'm sure there's probably other places it would come in handy too though.

Thanks,

Mike

Mike Sutton

unread,

Aug 17, 2015, 12:44:18 PM8/17/15

to TiddlyWiki

TW5 version 5.1.7.

Are there any good references on developing plugins or widgets in TW5 that you know of?

Thanks,

Mike

Mark S.

unread,

Aug 17, 2015, 1:24:42 PM8/17/15

to TiddlyWiki

This is the main one that I know of:

http://cjhunt.github.io/

The most useful part is part 3 of "A Simple Widget".

My approach has been to find an existing widget that seems most similar to the widget that I want. Then copy it, change the various name-space aspects, and alter the code to do what I want. sometimes it works.

HTH,
Mark

Mat

unread,

Aug 17, 2015, 1:26:23 PM8/17/15

to TiddlyWiki

On Monday, August 17, 2015 at 6:44:18 PM UTC+2, Mike Sutton wrote:

TW5 version 5.1.7.

(Why don't you update? There was a glitch between 5.1.7 and 5.1.8prerelease I think, but I believe it should be problem free from 5.1.7 to current 5.1.9)

<:-)

BJ

unread,

Aug 18, 2015, 2:04:43 AM8/18/15

to TiddlyWiki

Hi Mike, you can enter text with a button like this:

<$button set="$:/myvar" setTo={{$:/temp/var}}>press to enter</$button> 
<$edit-text tiddler="$:/temp/var" tag="input" type="text"/>

 ---


<$text text={{$:/myvar}}>

The text widget is very easy to understand - if you look at the source, you could probably start by adding some javascript to the render function.

Cheers

BJ

Jed Carty

unread,

Aug 18, 2015, 2:45:11 AM8/18/15

to TiddlyWiki

Some of the things here may be helpful to you.

Mike Sutton

unread,

Aug 18, 2015, 12:17:07 PM8/18/15

to TiddlyWiki

Thanks, between that snippet and a the link from Mark S. I've managed to bodge something together here:

https://gist.github.com/anonymous/0fe8827db322790def01

IP: <$edit-text tiddler="$:/temp/host" tag="input" type="text" />
Port: <$edit-text tiddler="$:/temp/port" tag="input" type="text" />

<$ajaxButton message="ed-ajax" class="ed-ajaxButton" param="http://{{$:/temp/host}}:{{$:/temp/port}}/state" set="$:/ed/ajaxResult">Get state</$ajaxButton>

<html><pre>{{$:/ed/ajaxResult}}</pre></html>

And a little custom style to add a little "JS" badge to the buttons:

.ed-ajaxButton:after {
    content: "JS";
    background-color: #fc0;
    padding: 4px;
    border: 1px solid #930;
    margin-left: 8px;
}

It's a little clunky but seems to get the job done.

Thanks all,

Mike

Reply all

Reply to author

Forward