Jquery help

Arc Acorn

unread,

Feb 15, 2013, 4:17:40 AM2/15/13

to tiddl...@googlegroups.com

I don't seem to be able to understand how to use Jquery in Tw at all... Dose anybody know any good references?

As a simple test I have tried to simply make a div hide when clicked.

I have tried inline like this (With the inline JavaScript plugin installed):

(function($) {

$(document).ready(function(){

$("#note").click(function(){

$(this).hide();

});

})(jQuery);

</script>

<html>

</html>

I have tried putting:

(function($) {

$(document).ready(function(){

$("#note").click(function(){

$(this).hide();

});

})(jQuery);

In a tiddler and tagging it as systemConfig...

I have tired putting it in a markup post/pre tiddlers, I have tired every variation of everything I can think of or find and I can't get it to work.

Jeremy Ruston

unread,

Feb 15, 2013, 7:35:38 AM2/15/13

to TiddlyWiki

Hi Arc

As you're probably beginning to learn, TiddlyWiki isn't really like a conventional web page because of the way that everything is generated dynamically.

There are other subtleties, too - for instance, it's not a good idea to use IDs to identify DOM elements because a tiddler can be rendered multiple times simultaneously (for instance, if a tiddler is displayed in its own right and also displayed as a transclusion within another tiddler).

I'd recommend exploring how macros are implemented in TW. They give you a clean way to write code that generates DOM content, with a well defined interface. The built-in slider macro is similar to your example.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

Eric Shulman

unread,

Feb 15, 2013, 12:21:15 PM2/15/13

to TiddlyWiki

> I don't seem to be able to understand how to use Jquery in Tw at all...

> As a simple test I have tried to simply make a div hide when clicked.
> I have tried inline like this (With the inline JavaScript plugin installed):
> <script>
> (function($) {
> $(document).ready(function(){
> $("#note").click(function(){
> $(this).hide();
> });});
> })(jQuery);
> </script>
> <html>
> <div id="note">I am note</div>
> </html>

To set up a click event handler (as you want to do), the typical
jQuery technique is to is to use the $(document).ready(...) function
(as you have done). This is to ensure that the code is not invoked
until the target element (i.e. "#note") has already been rendered.

However, unlike a conventional web page that is rendered by the
browser as soon as it is fully loaded, the content in a tiddler is
only rendered when that tiddler is actually displayed on the page,
which occurs after the document has finished loading and the ready()
processing has already been triggered. As a result, your code for
adding a click handler to "#note" is never actually being run.

I suspect that you may have considered this and, in an attempt to work
around this 'load timing' issue, you very sensibly tried putting your
code into MarkupPreHead (or MarkupPostHead) so it could be invoked at
the end of document loading when the "ready" processing is triggered.

However... this is still a problem: even after the document has been
loaded (i.e., when ready() is triggered), the target element, "#note",
does not exist yet, because the tiddler containing it is has not been
displayed... and, of course, you cannot assign a .click(...) handler
to an element until actually exists in the document!

So... is there a way out? Yes. There is... and it's surprisingly
simple:
--------------------

Tobias Beer

unread,

Feb 15, 2013, 1:17:24 PM2/15/13

to tiddl...@googlegroups.com

Hi Arc,

First of all, I assume you have InlineJavascriptPlugin from TiddlyTools installed, otherwise your script markup won't do anything at all.

Secondly, I strongly advise to never use Id's and always use class names.

In TW, you don't use document.ready because TiddlyWiki is already loaded. Instead, you just perform the action or function that you need.

For example, this should work in a tiddler...

{{foo button{Toggle foo...}}}

{{{

foo

}}}

(function($) {

$(".foo", place)

.click(function(){

var $foo = $(this).next().next();

$foo.css("display") == 'none' ? $foo.slideDown() : $foo.slideUp();

})

.css({

color:'red',

cursor:'pointer'

});

})(jQuery);

</script>

You can also invoke JavaScript / jQuery by adding it to some element handler, e.g.:

<html>

<span

class="button"

onclick="

var $= jQuery;

$(this).css('color','red');

">

Click to make me red...

</span>

</html>

Cheers, Tobias.

Arc Acorn

unread,

Feb 15, 2013, 3:19:18 PM2/15/13

to tiddl...@googlegroups.com

Thanks a ton Eric and all I had started to suspect something like that was afoot but didn't have any idea how I should be going about getting things to actually work to continue playing around.

The why not to use id's in TW is also a good point, which brings me to an off topic question:

I needed to style a few tabs very specifically and when I was adding a new param I could only get it to keep id's, since any Class I set using a param was reverted back to: "tab tabSelected/tabUnselected".

I assume there has to be a way to reword the "config.macros.tabs.switchTab" Function to allow a costume class to stick but I could never figure it out so I decided to use id's since it was the only thing I could get working, which I didn't really like leaving it that way.

What I changed:

config.macros.tabs.handler = function(place,macroName,params)

{

var cookie = params[0];

var numTabs = (params.length-1)/4;

var wrapper = createTiddlyElement(null,"div",null,"tabsetWrapper " + cookie);

var tabset = createTiddlyElement(wrapper,"div",null,"tabset");

tabset.setAttribute("cookie",cookie);

var validTab = false;

var t;

for(t=0; t<numTabs; t++) {

var label = params[t*4+1];

var prompt = params[t*4+2];

var content = params[t*4+3];

var cssid = params[t*4+4]

var tab = createTiddlyButton(tabset,label,prompt,this.onClickTab,"tab tabUnselected");

createTiddlyElement(tab,"span",null,null," ",{style:"font-size:0pt;line-height:0px"});

tab.setAttribute("tab",label);

tab.setAttribute("id",cssid);

tab.setAttribute("content",content);

tab.title = prompt;

if(config.options[cookie] == label)

validTab = true;

}

Tobias Beer

unread,

Feb 15, 2013, 8:43:41 PM2/15/13

to tiddl...@googlegroups.com

Before you set out to any more coding... what exactly are you trying to achieve? I almost believe you can achieve this w/o any new or modified tab macro.

For example, you can wrap your tabs using...

{{mytab{<<tabs ...>>}}}

...and then address that in your StyleSheet via...

.myTab .tabSelected

... etc.

However, that won't do the trick when you are trying to give each tab a different style. But then it would perhaps be simpler to write a different macro only to style the tabs, e.g.

<<tabs ...>><<styleTabs classTab1 classTab2 ...>>

...which applies the classes to the tabs rendered right before using a jQuery selector to get the tabs and then loops that...

tabs = $(place).last();

$('.tab',tabs).each(function(p){

$(this).addClass(params[p]);

});

Tobias.

Arc Acorn

unread,

Feb 15, 2013, 9:30:58 PM2/15/13

to tiddl...@googlegroups.com

"Before you set out to any more coding... what exactly are you trying to achieve? I almost believe you can achieve this w/o any new or modified tab macro."

A number of screwy things I probably shouldn't be doing. XD|XP

I "desire" I say that because well it works just fine just adding id's to tabs, to give tabs unique styling such as icons.

Now you may be thinking that's already doable just use the plugin: http://www.tiddlytools.com/#SetIconPlugin

The issue I ran into is I want to do it with all the system tabs. (As shown above) :D ... And when I use his plugin which is a ingenious method of dealing with the issue, it has many a glitch when dealing with the system tabs.

Define glitch is... To what I can figure out when editing anything that causes things to "refresh"/Scan and apply the icons set if a tab such as All tiddlers is open it'll cause the seticon macro to not find the link it was suppose to since there are a bunch of other links now with the same names...etc.

It also seemed to me like it could cause unneeded work from being done by the browser compared to just being able to give classes/ids to each tab and styling them. (I like doing this enough that the number of iconed tabs far out ways the number of normal tabs, so having to add and extra "" at the end of each tab macro for a blank id for normal tabs doesn't bother me at all.)

The glitch and the other there is also the fact icons are not the only thing I actually wanted to do... There's a couple of places where I have unique CSS transform Property on different tabs in the same tabset... ^^;

Reply all

Reply to author

Forward