Auto close-all?

340 views
Skip to first unread message

Viscouse

unread,
Jan 3, 2008, 3:55:06 PM1/3/08
to TiddlyWiki
Hi there. Does anyone know if there is a way to auto-close all? I
would like to click on "Home" (a tiddler on the left sidebar), and
have it bring up that tiddler after closing all other tiddlers. I
know there is a "close all" feature, I just want it to activate
together with bringing up a tiddler.

FYI, I am having a lot of fun with this wiki, and am learning all
sorts of new things. Thanks!

Eric Shulman

unread,
Jan 3, 2008, 4:08:14 PM1/3/08
to TiddlyWiki
Using HTML to embed a simple onclick handler:
---------
<html><a href="javascript:;" class="TiddlyLinkExisting"
onclick="story.closeAllTiddlers();story.displayTiddler(null,'TiddlerTitle');return
false;">home</a></html>
---------

Note: although you can use the onclick="..." handler of the link to
invoke simple bits of javascript, you can't use <script>...</script>
inside an <html>...</html> within tiddler content... the browser just
'eats' the code without running it :-(

Fortunately, TiddlyTools has a solution that DOES let you embed script
code directly in tiddler content, but still NOT inside <html>...</
html>, by using
http://www.TiddlyTools.com/#InlineJavascriptPlugin

For example, the above HTML code could have be written as:
<script label="home">
story.closeAllTiddlers();
story.displayTiddler(null,'TiddlerTitle');
return false;
</script>

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

Viscouse

unread,
Jan 4, 2008, 4:15:50 PM1/4/08
to TiddlyWiki
Thanks Eric! Helpful tips!

Unfortunately, I tried it and upon clicking the new link, nothing
happens. Have you gotten it to work?
Any other suggestions? I would really like to stick with the html
code instead of using another plugin.

-Namir

Eric Shulman

unread,
Jan 4, 2008, 4:39:35 PM1/4/08
to TiddlyWiki
> Unfortunately, I tried it and upon clicking the new link, nothing
> happens. Have you gotten it to work?

This definitely works for me:

<html><a href="javascript:;" class="TiddlyLinkExisting"
onclick="story.closeAllTiddlers();story.displayTiddler(null,'TiddlerTitle');return
false;">home</a></html>

(note: watch out for GoogleGroups adding extra newlines where they
don't belong.... specifically: onclick="..." is supposed to be just
ONE line...)

Also, I assume you changed 'TiddlerTitle' to the name of a tiddler
that actually exists in your document...

HTH,

Viscouse

unread,
Jan 5, 2008, 12:49:57 AM1/5/08
to TiddlyWiki
Got it working. Thanks so much!
-Namir

magev958

unread,
Oct 23, 2013, 11:29:30 AM10/23/13
to tiddl...@googlegroups.com, TiddlyWiki
How do I get this to work in a form, on a Save-button?

<input class="button_text" type="submit" name="submit" value="Save" />

Tobias Beer

unread,
Oct 30, 2013, 3:03:49 PM10/30/13
to tiddl...@googlegroups.com, TiddlyWiki
On Wednesday, 23 October 2013 17:29:30 UTC+2, magev958 wrote:
How do I get this to work in a form, on a Save-button?

<input class="button_text" type="submit" name="submit" value="Save" />

 Probably something like this...

<form onsubmit="story.closeAllTiddlers();story.displayTiddler(null,'TiddlerTitle');return 
false;">

...

<input class="button_text" type="submit" name="submit" value="Save" />

</form>

But then you would have to ask yourself, why use a form submit handler anyways? After all, do you intend to leave TiddlyWiki? I think not.

Tobias.

magev958

unread,
Nov 2, 2013, 6:54:35 AM11/2/13
to tiddl...@googlegroups.com, TiddlyWiki
Hi Tobias, I didn't try setting a onsumit on the form before. It works, kind of. It closes the open form-tiddler and opens the specified tiddler. Sadly it does not save the form-value to a new tiddler :(
 
I just want to: (1) save (creating the new tiddler with the new content), close the form and open the newly created tiddler
or, if that dosen't work (2) clear the form so it empty
 
I have created the form to be so easy as to work with 55+ old ladies ;)

Tobias Beer

unread,
Nov 3, 2013, 3:58:21 PM11/3/13
to tiddl...@googlegroups.com, TiddlyWiki
What you need to do is to run the store.saveTiddler() method with the desired parameters before opening the new tiddler...


I am sure you will find plenty code example in this group or the TiddlyWikiDev group. Let us know if you need further help.^

Mhhh, after peeking into your example I see that you have declared a submit handler but that it doesn'T actually seem to be invoked, nor does it seem to do all the desired handling, e.g.
  1. save the new tiddler
  2. close the current one (or all others)
  3. open the new tiddler
Not sure about your jQuery validator, haven't worked with it yet. I assume it runs some tests and checks conditions for being true and eventually invokes the submitHandler. As far as I can see, steps 2 and 3 are not performed.

As for closing the form tiddler, you can do tid = story.findContainingTiddler(form) and then tid = tid.getAttribute('tiddler'), this gives you the name of the tiddler containing the form. which you then close using story.closeTiddler()...

Open your new tiddler using...

Tobias.

magev958

unread,
Nov 6, 2013, 6:19:21 AM11/6/13
to tiddl...@googlegroups.com, TiddlyWiki
Thanks for Your help, I finally got it to work!
But I can't take credit for the form it self, PMario did that https://groups.google.com/d/topic/tiddlywiki/EFzbEOTgVsE/discussion
so I'm afraid I don't know how the code works, I'm just happy it does :)
 
But if I can trouble You once more, I would like to implement the "toggle-group-of-tags"-funktion, as in http://www.tiddlytools.com/#DailyChecklist, into the form. Think it can be done?

Tobias Beer

unread,
Nov 7, 2013, 8:20:27 AM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki
But if I can trouble You once more, I would like to implement the "toggle-group-of-tags"-funktion, as in http://www.tiddlytools.com/#DailyChecklist, into the form. Think it can be done?

When I look at your example I already see something like that working. What precisely are you missing? 

Tobias.

magev958

unread,
Nov 7, 2013, 9:56:22 AM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki
I'd like to have a checkbox to toggle tag1, tag2, tag3 all at once. I haven't been able to do that. But as I wrote in my last post, I don't know JS and don't know how to intepret the code :/

magev958

unread,
Nov 7, 2013, 10:11:35 AM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki
I have also run in some strange problem.
It all work in my TW on my usb-stick but when I moved it (copy & paste) to the network-drive at work the script gives a error "Identifier, string or number is expected" (translated from swedish). It still work from usb-stick if I bring both up in windows next to each other but the network-copy give an error. ?
 
And if the title start or end with a blank space the tiddler vanish "The tiddler 'tiddlerTitle' doesn't yet exist. Double-click to create it". But if I open the TW in Notepad its there!
 
I'm very confused right now

Tobias Beer

unread,
Nov 7, 2013, 11:14:08 AM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki
Hi magev958,

I'd like to have a checkbox to toggle tag1, tag2, tag3 all at once.

Not sure what you want exactly, do you want to assign or remove a number of tags collectively? Based on what reasoning / logic? What is wrong with having multiple tag columns as in your example? Keep in mind that the tiddler you're talking about doesn't exist until you hit the submit button. 

I have also run in some strange problem.
It all work in my TW on my usb-stick but when I moved it (copy & paste) to the network-drive at work the script gives a error "Identifier, string or number is expected" (translated from swedish). It still work from usb-stick if I bring both up in windows next to each other but the network-copy give an error?

No idea what could be wrong. At what point do you get the error, when you open the form tiddler or when you try to submit, i.e. save the TiddlyWiki?

And if the title start or end with a blank space the tiddler vanish "The tiddler 'tiddlerTitle' doesn't yet exist. Double-click to create it". But if I open the TW in Notepad its there!

Well, tiddler titles shouldn't start or end with blanks, afaic. Why would they?

Tobias.

magev958

unread,
Nov 7, 2013, 12:08:20 PM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki

I'd like to have a checkbox to toggle tag1, tag2, tag3 all at once.

Not sure what you want exactly, do you want to assign or remove a number of tags collectively? Based on what reasoning / logic? What is wrong with having multiple tag columns as in your example? Keep in mind that the tiddler you're talking about doesn't exist until you hit the submit button. 
 
Just lazy I guess ;)
In my example the are 6 groups with up to 12 checkboxes in every group. Often but not always a whole group or several groups have to be checked together. Would be nice to only have to click 6 times instead of 40 times :D
 
I have also run in some strange problem.
It all work in my TW on my usb-stick but when I moved it (copy & paste) to the network-drive at work the script gives a error "Identifier, string or number is expected" (translated from swedish). It still work from usb-stick if I bring both up in windows next to each other but the network-copy give an error?

No idea what could be wrong. At what point do you get the error, when you open the form tiddler or when you try to submit, i.e. save the TiddlyWiki?
 
This error message shows directly when I open the tiddler. In the place the script usually is hidden.
 
And if the title start or end with a blank space the tiddler vanish "The tiddler 'tiddlerTitle' doesn't yet exist. Double-click to create it". But if I open the TW in Notepad its there!

Well, tiddler titles shouldn't start or end with blanks, afaic. Why would they?
 
They shouldn't. It's mostly as a precation against error. The form is geared toward old, not-so-computer-savy-old-ladies ;)
Magnus
Message has been deleted

Tobias Beer

unread,
Nov 7, 2013, 1:38:45 PM11/7/13
to tiddl...@googlegroups.com, TiddlyWiki
Just lazy I guess ;)
In my example the are 6 groups with up to 12 checkboxes in every group. Often but not always a whole group or several groups have to be checked together. Would be nice to only have to click 6 times instead of 40 times :D

The thing is, this does involve a bit of coding and I'm a bit reluctant to be doing and testing all that just for your special usecase. To begin with, I would certainlyconstruct the tag table using javascript, that way you can easily add the desired toggle all inputs into the table head cells programatically.

Anyway, here's some UNTESTED code for the script section that might point you towards how it could be done. If you don't have any js knowledge, we'll need to work on it further.

//make jQuery available via $
(function($){

    //use a two-dimensional configuration array to define the tag categories
    cats = [
    [
    'cat 1 title',
    'cat 1 item 1 title|cat 1 item 1 tag',
    'cat 1 item 2 title|cat 1 item 2 tag'
    ],[
    'cat 2 title',
    'cat 2 item 1 title|cat 2 item 1 tag',
    'cat 2 item 2 title|cat 2 item 2 tag'
    ]
    ];

    //first, determine the number of rows
    var rows = 0;
    cats.map(function(cat){
        rows = Math.max(rows, cat.length);
    })

    var r, c, cat, $td, $tr,
        $table = $('<table/>').addClass('borderless smallTable table100').appendTo(place),
        $tbody = $('<tbody/>').appendTo($table),
        //the function that toggles all tags for a category
        toggleAll = function(){
            //get the checkbox to toggle all
            var $i = $(this),
                //and the containing table
                $table = $i.closest('table');
            //get all related tag inputs and set value to that of this checkbox
            $('[rel="' +  $i.attr('toggle') + '"]', $table).val($i.val());
        };

    //loop the categories and append the tags to the table...
    for(r = 0; r<rows; r++){
    //add row
    $tr = jQuery('<tr/>').appendTo($tbody);
    //when header
    if(r==0){
        //add header class
        $tr.addClass('table-header');
    }
    //loop cats
    for(c==0;c< cats.length;c++){
        //get category
        cat = cats[c];
        //when table head
        if(r==0){
            $td = jQuery('<td>')
                .html(cat[0])
                .appendto($tr);
            jQuery('<input/>')
                .text('all')
                .attr('toggle','cat'+c)
                .click(toggleAll)
                .appendTo($td);
            //table body
        } else {
            //get tag definition and split by pipe
            var t = cat[r].split('|');
            $td = jQuery('<td>').appendTo($tr);
            jQuery('<input name ="tags[]" type="checkbox"/>')
                .addClass('element checkbox')
                .attr('rel','cat'+c)
                .val(t[1])
                .appendTo($td);
            jQuery('<label/>')
                .addClass('choice')
                .attr('for','tags')
                .text(val[0])
                .appendTo($td);
        }
    }
};

})(jQuery);

They shouldn't. It's mostly as a precation against error. The form is geared toward old, not-so-computer-savy-old-ladies ;)

Well, then you need to sanitize any potentially corrupt values in your submitHandler, e.g...

//get title input
var $title = jQuery('the selector for the title input');
//set value to trimmed value, removing any blanks
$title.val($.trim($title.val());

Tobias.

magev958

unread,
Nov 8, 2013, 12:52:38 PM11/8/13
to tiddl...@googlegroups.com, TiddlyWiki
Just lazy I guess ;)
In my example the are 6 groups with up to 12 checkboxes in every group. Often but not always a whole group or several groups have to be checked together. Would be nice to only have to click 6 times instead of 40 times :D

The thing is, this does involve a bit of coding and I'm a bit reluctant to be doing and testing all that just for your special usecase. To begin with, I would certainlyconstruct the tag table using javascript, that way you can easily add the desired toggle all inputs into the table head cells programatically.
 
Don't bother your brain with it, a few clicks never kill anyone. It sounds easy to mess up for me ;) I will on the other hand be forever grateful if you help me with the "sanitizeing" thing. If I understode you right I put the code in the last part of the script like this:
 
submitHandler: function(form, event) {
   event.preventDefault();
   var f = jQuery(form).serializeObject();
          console.log("formData: ", f);
   var tid = new Tiddler( f.title);
   tid.text = f.text;
   tid.modifier = f.username;
   tid.creator = f.username;
   tid.tags = f.tags || [];
 
   store.saveTiddler(tid);
   saveChanges(true, [tid]);
   story.closeTiddler('formTemplate');
   story.displayTiddler(null,' SenasteNytt');
 
   var $title = jQuery('title');
   $title.val($.trim($title.val()));
 
   console.log("tid: ", tid)
  }
 
But I don't get it to work. Am I doing it wrong?

Tobias Beer

unread,
Nov 10, 2013, 6:25:12 PM11/10/13
to tiddl...@googlegroups.com, TiddlyWiki

Don't bother your brain with it, a few clicks never kill anyone. It sounds easy to mess up for me ;) I will on the other hand be forever grateful if you help me with the "sanitizeing" thing. If I understode you right I put the code in the last part of the script like this:
 
submitHandler: function(form, event) {
   event.preventDefault();
   var f = jQuery(form).serializeObject();
          console.log("formData: ", f);
   var tid = new Tiddler( f.title);
   tid.text = f.text;
   tid.modifier = f.username;
   tid.creator = f.username;
   tid.tags = f.tags || [];
 
   store.saveTiddler(tid);
   saveChanges(true, [tid]);
   story.closeTiddler('formTemplate');
   story.displayTiddler(null,' SenasteNytt');
 
   var $title = jQuery('title');
   $title.val($.trim($title.val()));
 
   console.log("tid: ", tid)
  }
 
But I don't get it to work. Am I doing it wrong?

Almost. First of all, you need to do it at the beginning, otherwise your serializeObject method grabs the wrong value.

Also, the selector for the title input doesn't seem right. You can use either of...


var $title = $("input[name=title]");

//or

var $title = $(".titleInputClass");

//or

var $title = $("#titleInputID");


Assuming that form element either had name="title" or a class called titleInputClass or an id called titleInputID — use whichever is appropriate.

To be even more specific — assuming there might be multiple forms — you can also use...


var $title = $("#formID input[name=title]");


or in your case, you even have the form variable passed to your submitHandler. So, best use...


var $title = $("input[name=title]", form);


...which translates to "get the input with the name of "title" within the element given as the form parameter and save that in a variable called $title".

Tobias.

magev958

unread,
Nov 11, 2013, 5:23:50 AM11/11/13
to tiddl...@googlegroups.com, TiddlyWiki
Thank you, that was a very informative answer. Even I understood :)
Only I could not get it to work :$
I've changed it to this (also updated the example https://dl.dropboxusercontent.com/u/955759/forms.html):
 
  submitHandler: function(form, event) {
   var $title = $("input[name=title]", form);
   $title.val($.trim($title.val()));
   event.preventDefault();
   var f = jQuery(form).serializeObject();
          console.log("formData: ", f);
   var tid = new Tiddler( f.title);
   tid.text = f.text;
   tid.modifier = f.username;
   tid.creator = f.username;
   tid.tags = f.tags || [];
   store.saveTiddler(tid);
   saveChanges(true,[tid]);
   story.closeTiddler('formTemplate');
   story.displayTiddler(null,'SenasteNytt');
   console.log("tid: ", tid)
  }
 
It closes the form and opening the tiddler I want but it will not create the new tiddler. It works without the extra two lines.

magev958

unread,
Nov 11, 2013, 5:58:17 AM11/11/13
to tiddl...@googlegroups.com, TiddlyWiki

Den torsdagen den 7:e november 2013 kl. 16:11:35 UTC+1 skrev magev958:
I have also run in some strange problem.
It all work in my TW on my usb-stick but when I moved it (copy & paste) to the network-drive at work the script gives a error "Identifier, string or number is expected" (translated from swedish). It still work from usb-stick if I bring both up in windows next to each other but the network-copy give an error. ?
 
 
I've tested to open the TW on the networkdrive with a portable version FF 24 and it works. Seems to be a IE8 problem :(

magev958

unread,
Nov 11, 2013, 6:33:31 AM11/11/13
to tiddl...@googlegroups.com, TiddlyWiki
Right now I tested to validate the html-form-code with http://validator.w3.org, corrected a few errors and now it seems to work over the network!

magev958

unread,
Nov 14, 2013, 4:23:28 AM11/14/13
to tiddl...@googlegroups.com, TiddlyWiki
I wrote to soon. It took my companys IT-department 3 years to upgrade to IE8, but this monday after only 6 months they upgrade to IE10 and IE10 broke the code again! Now as soon as I load the TW (from the networkdrive) and open the tiddler with the script, the script shows the error "cannot find member" and it won't save! 

Tobias Beer

unread,
Nov 21, 2013, 10:05:02 AM11/21/13
to tiddl...@googlegroups.com, TiddlyWiki
Hi magev958,

In order to use the $ variable you need to enclose your script block in...

(function($){
//the code
})(jQuery);

...otherwise, javascript in the context of TiddlyWiki wouldn't know that you want to call the jQuery object using $.

Other than that, this...

   story.displayTiddler(null,'SenasteNytt');

probably should be...

   story.displayTiddler(null,f.title);

I believe I have written it before, to not make the page reload, have your submit handler to conclude with...

return false;

Tobias.

magev958

unread,
Nov 22, 2013, 10:47:28 AM11/22/13
to tiddl...@googlegroups.com, TiddlyWiki
When I run the script through http://www.javascriptlint.com/online_lint.php I get this error. I don't know if it is serius but I still get the error on the network-TW :(

 1  (function($){
 2  jQuery.validator.addMethod("val-title", function (value, element) { 
 3          if (store.tiddlerExists(value)) return false; else return true; 
    ==================================^
    lint warning: block statement without curly braces
    =====================================================^
    lint warning: block statement without curly braces
 4      }, "En anteckning med det namnet finns redan. Välj ett annat namn.");
 5  
 6      var validator = jQuery("#form").validate({
 7          rules: {
 8              username: {
 9                  required : function(el) {
10                      if (el.value === "") { 
11                          el.value= config.options.txtUserName ? config.options.txtUserName : ""
12                      }
    =====^
    lint warning: missing semicolon
13                      // console.log("focusout", el)
14                      return true;
15                  }
16              },
17              title: "required"
18          },
19          messages: {
20              username: "Ett användanamn krävs"
21          },
22          // specifying a submitHandler prevents the default submit, good for the demo
23          submitHandler: function(form, event) {
24  
25              event.preventDefault();
26  
27              var f = jQuery(form).serializeObject();
28                  console.log("formData: ", f);
29  
30              var tid = new Tiddler( f.title);
31              tid.text = f.text;
32              tid.modifier = f.username;
33              tid.creator = f.username;
34              tid.tags = f.tags || [];
35  
36              store.saveTiddler(tid);
37  
38              saveChanges(true,[tid]);
39  
40              story.closeTiddler('formTemplate');
41              story.displayTiddler(null,f.title);
42  
43              console.log("tid: ", tid)
44              return false;
45          }
46  })})(jQuery);
Reply all
Reply to author
Forward
0 new messages