jQuery append to table

[kru...@gmail.com]

Hi

I have been modifying Jim's EL4C_Registration widget at:

http://wikieducator.org/Widget:TwoColumnDataTable

so that I users can append a row to a table in a wiki page using a
form. The page that the widget is in is:

http://wikieducator.org/User:Kruhly/Widget_Sandbox/Data

It currently adds a table row to the bottom of the page instead of
appending the table. I have tried giving the table an iD and using
the append method like

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

with no luck.

Any help would be appreciated

Cheers

Rob

[Robert Kruhlak]

Ok, the input box extension must be part of the problem.

type=comment

only allows content to be added the end of the page.

Is there another method to get a button in the wiki page other than
using <inputbox>?

Cheers

Rob

> --
> You received this message because you are subscribed to the Google Groups "WikiEducator Technical Discussion" group.
> To post to this group, send email to wikieduc...@googlegroups.com.
> To unsubscribe from this group, send email to wikieducator-t...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/wikieducator-tech?hl=en.
>
>

--
Robert Kruhlak
North Vancouver, BC
CANADA
(M) +1 778 230 1875
(E) kru...@gmail.com

[Jim Tittsler]

On Sun, Sep 11, 2011 at 11:58, Robert Kruhlak <kru...@gmail.com> wrote:
> Ok,  the input box extension must be part of  the problem.
>
> type=comment
>
> only allows content to be added the end of the page.

But you can always use Javascript to keep the normal action of its
submit button from happening, and then use the Mediawiki API to fetch
the content, append to it, and write it back... which is what
Widget:Lesson_builder does.
http://gcsn.nz.wikieducator.org/Greater_Christchurch_Schools_Network/Lesson_builder

> Is there another method to get a button in the wiki page other than
> using <inputbox>?

If you have Javascript you can put anything you want on the page. :-)

The slide presentation widget puts a button on a page (and handles
what happens when the user clicks the button).
http://WikiEducator.org/User:JimTittsler/Slides
And if you are writing a widget, you can put arbitrary HTML into the
rendered page that way too.

[Robert Kruhlak]

Thanks for the reply. Response below.

> But you can always use Javascript to keep the normal action of its
> submit button from happening, and then use the Mediawiki API to fetch
> the content, append to it, and write it back... which is what
> Widget:Lesson_builder does.
>  http://gcsn.nz.wikieducator.org/Greater_Christchurch_Schools_Network/Lesson_builder

All the code for working with the api, etc looks to be in

src="/skins/common/we/lesson_builder.js"

I did a search and could not find the file in the wiki. How do I
access it so I can understand what it is doing?

>
>> Is there another method to get a button in the wiki page other than
>> using <inputbox>?
>
> If you have Javascript you can put anything you want on the page.  :-)
>
> The slide presentation widget puts a button on a page (and handles
> what happens when the user clicks the button).
>  http://WikiEducator.org/User:JimTittsler/Slides
> And if you are writing a widget, you can put arbitrary HTML into the
> rendered page that way too.

This widget does not actually save anything to the wiki. It just
re-renders the content. I'm a correct?

If I'm correct, it does not seem like it would be as helpful as the
first example for learning how to grab the content from a wiki page,
create a form or dialog to enter data, append the data to a table, and
save the appended page to the wiki.

Thanks for your help.

[Jim Tittsler]

On Tue, Sep 13, 2011 at 16:08, Robert Kruhlak <kru...@gmail.com> wrote:
>> But you can always use Javascript to keep the normal action of its
>> submit button from happening, and then use the Mediawiki API to fetch
>> the content, append to it, and write it back... which is what
>> Widget:Lesson_builder does.
>>  http://gcsn.nz.wikieducator.org/Greater_Christchurch_Schools_Network/Lesson_builder
>
> All the code for working with the api, etc looks to be in
>
> src="/skins/common/we/lesson_builder.js"
>
> I did a search and could not find the file in the wiki. How do I
> access it so I can understand what it is doing?

http://wikieducator.org/skins/common/we/lesson_builder.js

(It is in a separate file for my development convenience. Once the
Christchurch folk are happy, it can be copied into the wiki. Or if we
update Mediawiki, we can start using the Ace editor to simplify
Javascript authoring within the wiki. But for now, please just get
the file. :-)

>>> Is there another method to get a button in the wiki page other than
>>> using <inputbox>?
>>
>> If you have Javascript you can put anything you want on the page.  :-)
>>
>> The slide presentation widget puts a button on a page (and handles
>> what happens when the user clicks the button).
>>  http://WikiEducator.org/User:JimTittsler/Slides
>> And if you are writing a widget, you can put arbitrary HTML into the
>> rendered page that way too.
>
> This widget does not actually save anything to the wiki. It just
> re-renders the content. I'm a correct?
>
> If I'm correct, it does not seem like it would  be as helpful  as the
> first example for learning how to grab the content from a wiki page,
> create a form or dialog to enter data, append the data to a table, and
> save the appended page to the wiki.

Correct. It was an example of putting a button on the page. The
earlier Lesson Builder was the example for the API of
loading/saving... and I was suggesting that the new button could
trigger the latter operation.

I'll take a crack a building a sample this evening or tomorrow. A
concrete starting point might be useful.

[Jim Tittsler]

On Tue, Sep 13, 2011 at 16:45, Jim Tittsler <jtit...@gmail.com> wrote:
> I'll take a crack a building a sample this evening or tomorrow.  A
> concrete starting point might be useful.

http://wikieducator.org/User:JimTittsler/Data contains a quick hack.
(The "save" function needs work, because right now, regardless of the
number of rows you add or the values in them, it always adds a single
row with constant values. :-) But I need to do something else
tonight, so reading the inputs will have to wait.

I'll clean this up tomorrow, but hope this provides a concrete example
of using Javascript to add buttons to the page, and have one of those
buttons do an AJAX API call to fetch the wikitext, mung it, and write
it back.

[Robert Kruhlak]

Thanks Jim.

It looks great and very instructive. I was able to collect data by
using your EL4C registration widget as an example so now that I know
how to do a replace post I from this example, I should be able to get
it working. I will have a go tonight and let you know.

Thanks again.

Cheers

Rob

[Jim Tittsler]

On Wed, Sep 14, 2011 at 10:50, Robert Kruhlak <kru...@gmail.com> wrote:
> It looks great and very instructive. I was able to collect data by
> using your EL4C registration widget as an example so now that I know
> how to do a replace post I from this example, I should be able to get
> it working. I will have a go tonight and let you know.

I'm not sure if you got your version working.

I've finished a first functional draft at
http://WikiEducator.org/Widget:AddDataRows
Which you can play with at:
http://WikiEducator.org/User:JimTittsler/Data

It should work with an arbitrary number of columns. It only saves
numeric (+/-, digits, decimal, comma) input. It only saves rows that
have values in every column.

Known weaknesses:
- only works for the first <table> on a page
- data sanitization is dirty, and would allow values like ',.'

Please feel free to hack and extend if you haven't already.

[Robert Kruhlak]

Hi Jim,

Thanks. I got stuck on parsing the $table -- could not get rid of the
input. I will need to remember .find().

I'm don't understand how the second line:

/* <![CDATA[ */

and the last line:

/* ]]> */</script><span id="weDataSpan<!--{$weDataTab}-->"></span>

of the widget work but I think it is the cause of another weakness.
When the data table is not located on the same line as the widget
reference something breaks and the buttons are not rendered. I am
thinking of adding it to activities like:

http://wikieducator.org/Masses_and_Springs/Hooke%27s_Law/Activities/Self_guided_Activity

Thanks again.

Rob

[Jim Tittsler]

On Tue, Sep 20, 2011 at 18:34, Robert Kruhlak <kru...@gmail.com> wrote:
>  of the widget work but I think it is the cause of another weakness.
> When the data table is not located on the same line as the widget
> reference something breaks and the buttons are not rendered. I am

That was actually intentional, so that it was sure it found the correct table.
var $table = $(id).nextAll('table:first');
The nextAll() only checks siblings, not children or nephews. There
are obviously other ways to get the correct table, this one just
seemed the easiest way to get something robust. Another option would
be to require the user to put a unique id on the table. Or search all
nodes and pick the table "closest" to the unique span id. Or have a
template wrap the table in a div, and then use jQuery to go up to the
div and then find() the table down from there.

[Robert Kruhlak]

Hi Jim,

I have added a line to the usage stating that the widget must be on
the same line as <table ... >.

Thanks for your help.

Rob

>
> That was actually intentional, so that it was sure it found the correct table.
>    var $table = $(id).nextAll('table:first');
> The nextAll() only checks siblings, not children or nephews.  There
> are obviously other ways to get the correct table, this one just
> seemed the easiest way to get something robust.  Another option would
> be to require the user to put a unique id on the table.  Or search all
> nodes and pick the table "closest" to the unique span id.  Or have a
> template wrap the table in a div, and then use jQuery to go up to the
> div and then find() the table down from there.
>

> --
> You received this message because you are subscribed to the Google Groups "WikiEducator Technical Discussion" group.
> To post to this group, send email to wikieduc...@googlegroups.com.
> To unsubscribe from this group, send email to wikieducator-t...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/wikieducator-tech?hl=en.
>
>

--

[Jim Tittsler]

I was disappointed to discover this afternoon while working on a new
registration widget[1] that the #%$! rich editor always writes tables
back in wikitext format, even if they were originally in the more
flexible HTML format allowed by MediaWIki. I'll modify my AddDataRows
widget to use wikitext format for the table so that if someone edits
the page "by hand" using the #%$! rich editor the widget will still be
able to find and extend the table.

[1] http://wikieducator.org/OER_university/2011.11_OERu_virtual_meeting_participants

[Robert Kruhlak]

Hi Jim,

Would it be sufficient to put the table and widget in a subpage of
the registration page to increase the effort necessary for by-hand
data entry using the rte ?

ie)

http://wikieducator.org/Masses_and_Springs/Hooke%27s_Law/Activities/Self_guided_Activity

Rob