JQuery plugin - Datatables.net

Hi,

I’m trying to install the datatables jquery plugin into my (work in progress) FW site. I’ve created a simple FW table that looks ok.

So far I have put the following code into the HTML Markup window exactly as follows (after the header):

$(document).ready( function () {
$(‘#restauranttable_id’).DataTable();
} );

Does this look right or, as I suspect, am I making novices mistakes!. Your help would be greatly appreciated.

So far in the preview in browser the table FW table appears but with the following script above the table for some reason:

$(document).ready( function () { $(‘#restauranttable_id’).DataTable(); } );

The instructions I thought I was following correctly are found on the following page:

http://www.datatables.net/manual/installation

Again, many thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That last bit ($(document).ready … ) needs to be wrapped in another

$(document).ready( function () {
$(‘#restauranttable_id’).DataTable();
} );

Does this look right or, as I suspect, am I making novices mistakes!. Your help would be greatly appreciated.

So far in the preview in browser the table FW table appears but with the following script above the table for some reason:

$(document).ready( function () { $(‘#restauranttable_id’).DataTable(); } );

The instructions I thought I was following correctly are found on the following page:

Installation

Again, many thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not sure if this is a repeat post as I lost my connection.

Many thanks Walter.

The reason I’m looking at this plug-in is because I wanted the table to be filterable and also like the pagination and search features which would be extremely helpful to me.

I’m aware of the conflict issues but was hoping that if I keep the page otherwise just containing text and images I might get away with it. I trust this is not just blissful ignorance on my part.

You may recall me posting on the subject of tables some time ago. Unfortunately health issues intervened, so I’m hoping for better luck this time!

I do have further questions on Jquery and datatables which I’m hoping you/ others may be able to assist me with, if I may. Chiefly about where all the datatable files go in my FW folder. Can’t find any instructions anywhere!

Thanks again.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You will need to upload those extra files separately, I’m afraid. Freeway will only manage the files it creates itself, or that it is tasked with using an Action like Upload Stuff. No matter what you put in the Site Folder on your Mac, the only things that will be uploaded from there through Freeway are those things that Freeway put there itself.

As far as where to put things, look carefully at the code you have to add to the page. If it looks like this:

<script src="/foo/bar/baz.js" type="text/javascript"></script>

then pay attention to that leading slash. That means “starting from the Web server’s root folder (where the index.html for the whole site lives) go into the foo folder, then the bar folder within that, to find the baz.js file”. So you would have to re-create that structure on your server and (manually) upload the baz.js file in there. Usually you want to use Transmit or another FTP application for this task. If the path does not start with a slash, then it is relative to the current page. So if your page is in a subfolder, you would need to create whatever folder structure is needed to duplicate the offset (or edit the HTML to point somewhere else). If the path begins with one or more …/ constructions, then that means “jump up one layer of the hierarchy (one per …/) and then start looking for the following structure.”

Next, have a peer at any CSS files they have given you. You may find references to images there, and they may be relative. In that case, they are relative to the location of CSS file, not the HTML page that will ultimately reference it. This is a common sight:

.widget {
	background-image: url(../images/widget.png);
}

That tells you that you have to add an /images folder in the same level of the page hierarchy as the folder containing your css file, and that css file is not just hanging out bare in the same folder as your page.

/htdocs
	page_with_table.html
	/css
		data-table.css
		other-freeway.css
	/images
		widget.png
	index.html
	/Resources
		_clear.gif
		other-freeway.png

Hope this helps,

Walter

On Jun 25, 2014, at 12:17 PM, Tim wrote:

Not sure if this is a repeat post as I lost my connection.

Many thanks Walter.

The reason I’m looking at this plug-in is because I wanted the table to be filterable and also like the pagination and search features which would be extremely helpful to me.

I’m aware of the conflict issues but was hoping that if I keep the page otherwise just containing text and images I might get away with it. I trust this is not just blissful ignorance on my part.

You may recall me posting on the subject of tables some time ago. Unfortunately health issues intervened, so I’m hoping for better luck this time!

I do have further questions on Jquery and datatables which I’m hoping you/ others may be able to assist me with, if I may. Chiefly about where all the datatable files go in my FW folder. Can’t find any instructions anywhere!

Thanks again.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Alas Walter I am a novice in these matters. I assumed that the accompanying collection of files downloaded from datatables.net would simply have to be placed in various appropriate parts of my FB site folder. I’ve been barking up the wrong tree it seems. How very very disappointing.

I’m assuming I would have similar problems with any other WYSIWYG website builder. I know I shouldn’t really ask this here but in this case would I be better served by using Wordpress. I’m loathed to do so as in the short time I’ve been using FW I’ve grown to like it!

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If there is a WordPress plugin that makes the jQuery data table thing one-click-easy to install, then sure, that would work. Any other Web development application, WYSIWYG or not, desktop or server-based, would present the same threshold to use, however. You are presumed to understand enough about how HTML and its allied files work together in order to use this toolkit. It’s written by hand-code developers, and they don’t expect any other sort of developer to exist, frankly.

Walter

On Jun 25, 2014, at 1:28 PM, Tim wrote:

Alas Walter I am a novice in these matters. I assumed that the accompanying collection of files downloaded from datatables.net would simply have to be placed in various appropriate parts of my FB site folder. I’ve been barking up the wrong tree it seems. How very very disappointing.

I’m assuming I would have similar problems with any other WYSIWYG website builder. I know I shouldn’t really ask this here but in this case would I be better served by using Wordpress. I’m loathed to do so as in the short time I’ve been using FW I’ve grown to like it!

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter.

Maybe I should be looking for someone to do the appropriate coding/ work for me. Is what I’m looking for fairly straightforward to the initiated? I don’t want to end up forking out hundreds of pounds obviously!

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Having had more time to digest your last suggestions I was wondering whether referencing the Jquery files to FW using the External Javascript action would work (and your similar CSS action as appropriate).

So far I have tried uploading/ referencing the main JQuery file to FW (using the action) which placed my Jquery.js file to the Resources folder inside the Site Map folder. After testing with the script below this seems to work, as when I clicked the text in the preview browser it became ‘hidden’:

This is a paragraph

Am I going in the right direction? Trust this makes sense.

Thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That method will definitely work. Just watch out for anything in the scripts that expect a particular (and different) directory layout on your server. If there is a reference in one of the scripts to a css sheet or another script at a particular “offset” from the script making the reference, then you may need to adjust these to suit the new layout (in the Resources folder). It’s super-important to get your head wrapped around the idea of relative paths from one file to another.

Walter

On Jun 27, 2014, at 6:37 AM, Tim wrote:

Hi Walter,

Having had more time to digest your last suggestions I was wondering whether referencing the Jquery files to FW using the External Javascript action would work (and your similar CSS action as appropriate).

So far I have tried uploading/ referencing the main JQuery file to FW (using the action) which placed my Jquery.js file to the Resources folder inside the Site Map folder. After testing with the script below this seems to work, as when I clicked the text in the preview browser it became ‘hidden’:

This is a paragraph

Am I going in the right direction? Trust this makes sense.

Thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

I hope you don’t think I’m taking advantage of your somewhat generous nature by having further questions but I would greatly appreciate your advice. If I am imposing too much, please let me know. Many thanks for your previous post also.

From the Datatables JS folder I have uploaded the jquery.js file (as previously stated) and also the Datatables plug-in (jquery.dataTables.js) to FW by way of the External JS Action. There is another file in the JS folder named jquery.dataTables.min.js which I’m assuming is just the compressed version of the jquery.js file so I haven’t done anything with it. I trust that I have done the right thing there!

I realise that for anything to remotely happen I must initialise the table by applying the ‘document ready’ script. Datatables recommend the script as given on the following page (Section: Intialising Data Tables): Installation although I now appreciate that it should be wrapped in the script tags as you suggested (i.e. preceded by .).

My questions are:

  1. Do I use the ‘document ready’ script exactly as written - i.e. over three lines with exactly the same spacing?

  2. I named my table in the FW tables inspector restaurantables (exactly as written). So do I simply replace the script in blue with restaurantables; i.e. no preceding hashtag or following underscore but still inside the parentheses. Which seems logical.

  3. Where do I put the ‘document ready’ script? In HTML markup and if so where? Before or after head, before or after body? I have the impression that I should be treating in the same way as I have been doing with the .js files else I can’t see how FW would recognise what it’s meant to do with it.

P.S. I have yet to include Datatable’s CSS files as they deem them unnecessary at this stage. I find that a little baffling as I can’t see that the table could work without them!

Cheers,

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jun 27, 2014, at 11:34 AM, Tim wrote:

Hi Walter,

I hope you don’t think I’m taking advantage of your somewhat generous nature by having further questions but I would greatly appreciate your advice. If I am imposing too much, please let me know. Many thanks for your previous post also.

Not a problem. Glad to help someone else come up the sheer vertical learning “cliff” of scripting and front-end development.

From the Datatables JS folder I have uploaded the jquery.js file (as previously stated) and also the Datatables plug-in (jquery.dataTables.js) to FW by way of the External JS Action. There is another file in the JS folder named jquery.dataTables.min.js which I’m assuming is just the compressed version of the jquery.js file so I haven’t done anything with it. I trust that I have done the right thing there!

I realise that for anything to remotely happen I must initialise the table by applying the ‘document ready’ script. Datatables recommend the script as given on the following page (Section: Intialising Data Tables): http://www.datatables.net/manual/installation although I now appreciate that it should be wrapped in the script tags as you suggested (i.e. preceded by .).

My questions are:

  1. Do I use the ‘document ready’ script exactly as written - i.e. over three lines with exactly the same spacing?

The white-space is not significant in JavaScript, but the case, spelling, and punctuation are. You could write this function as all one line if you like, as long as you don’t omit any of the semicolons or braces.

  1. I named my table in the FW tables inspector restaurantables (exactly as written). So do I simply replace the script in blue with restaurantables; i.e. no preceding hashtag or following underscore but still inside the parentheses. Which seems logical.

jQuery requires a CSS selector as its entry point. In CSS, the preceding hash (octothorp) is the symbol for HTML ID, so you would need to put #restaurantables within the single-quotes. (Single or double quotes work equally well, as long as you begin and end with the same kind of quotation mark.)

  1. Where do I put the ‘document ready’ script? In HTML markup and if so where? Before or after head, before or after body? I have the impression that I should be treating in the same way as I have been doing with the .js files else I can’t see how FW would recognise what it’s meant to do with it.

Document.ready scripts already build in the logic to ensure that the entire page is downloaded and all of the elements within it are “ready” to be scripted. If you weren’t using jQuery, and you were using “vanilla” (non-library) JavaScript, you would need to ensure that your script appeared in the output HTML anywhere AFTER the entire table code. But since you are using jQuery, you can put this script anywhere AFTER the initial reference to jQuery itself. If you’re worried about the order of scripts in your page (and you should worry, since you are using an Action to add them, and that brings a little uncertainty to the party, owing to the hands-off nature of the generated code) then put the script tag containing all of your initialization code in the Before slot of the Page / HTML Markup dialog. That will ensure that it’s referenced after both the jQuery script reference and the table code. Remember – anything that relies on jQuery must be added after the first reference to jQuery itself.

P.S. I have yet to include Datatable’s CSS files as they deem them unnecessary at this stage. I find that a little baffling as I can’t see that the table could work without them!

The table will work, it just may not look very pretty as it does.

Walter

Cheers,

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Having done everything I believe to be correct, unfortunately nothing is yet happening when I view my page in my (Safari) browser.

The only thing I can think of is that FW hasn’t attributed an ID to my table, even though I did name it in the inspector.

The source code is as follows:

Untitled

Name

Area

Address

Telephone No.

A Concha

Praia da Luz

Avenida dos Pescadores 6, Praia da Luz, 8600-130 Lagos, Portugal

(+351) 282 788 584

Adega do Papagaio

Espiche

Largo da Adega 11, Espiche, 8600-109 Lagos, Portugal

(+351) 282 789 423

Alloro @ Baia da Luz

Praia da Luz

Rua José Pedro das Lajes, Praia da Luz, Lagos, Portugal

(+351) 282 790 886

Amici

Praia da Luz

Urb. St. James, Lote 5-v, Praia da luz, 8600-128 Lagos, Portugal

(+351) 282 763 119

Is there anything obvious that I’ve done wrong here?

Many thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Apologies for the above. Not sure what went wrong there! I simply copy/ pasted the source code! Should I start again? Can I delete the previous post?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, I subscribe by mail, so I am reading your exact post as written. In future, simply type four tildes in a row, followed by a return, followed by your code blast, followed by a return, followed by another four tildes and a return. Make a tilde sandwich of it!

Walter

On Jun 30, 2014, at 9:02 AM, Tim wrote:

Apologies for the above. Not sure what went wrong there! I simply copy/ pasted the source code! Should I start again? Can I delete the previous post?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You have got the problem exactly right. Try using my AddSelector Action on your table to give it your explicit ID. I just tested this in Freeway 6 and it works fine (ignore whatever ActionsForge says about compatibility, in other words). Click on the table border (carefully – it’s 1px x width or height target to hit) until the corner handles appear on the table itself. Then use Item / Actions / AddSelector and switch the tag picker to TABLE. Enter the ID where indicated.

Important thing to note here. Despite the fact that you added the preferred table name to the Inspector’s Name/ID field, your table is being published as an inline child of the PageDiv, instead of as a child of an identified child div, which you would get if you had drawn the table in place on your page. So this means one of two things is true: either you have the CSS Positioning option turned off, or you double-clicked into the page and chose Insert / HTML Item / Table when you created your data table.

If the former is true, then turning on CSS Positioning (and turning off Table Positioning) would get you a div containing a table when you draw a table on the page. This div would have an ID (whatever you entered in the Name/ID field when you named the table) and the structure would be this:

<div id="PageDiv">
	<div id="datatable">
		<table>
		...
		</table>
	</div>
</div>

You could then attach your behavior to it by accessing that table indirectly:

$('#datatable table').whatever_your_function_is_named();

That keeps you from needing to use the extra Action, although it relies on your jQuery function properly handling the case where the accessor returns an array rather than a single element. Prototype handles this much more explicitly, by using a separate method for “Find Element By ID” $('the_id') which always returns an element or false, and “Find the element(s) that fit this CSS selector” $$('.foo .bar .baz') which always returns an array (either empty or containing one or more found elements. jQuery relies on the author to figure out what to do when presented with an array versus a single element. I have never used this toolkit you are referencing, so I can’t say whether it will handle this gracefully or not.

Walter

On Jun 30, 2014, at 8:59 AM, Tim wrote:

Hi Walter,

Having done everything I believe to be correct, unfortunately nothing is yet happening when I view my page in my (Safari) browser.

The only thing I can think of is that FW hasn’t attributed an ID to my table, even though I did name it in the inspector.

The source code is as follows:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

When I created the table I simply clicked on the ‘table icon’ on the toolbar and added the requisite number of columns and rows as prompted (then imported the data from a csv. file). I didn’t have the css bottom highlighted if that’s possibly the problem? Should I start another table, except with the CSS button activated?

FW’s knowledge base/ instructions on tables seem to be on the scant side unless I’ve missed something.

In the meantime I’ve added the AddSelector Action to the table ‘created as is’ and given it an ID, but that in itself doesn’t appear to have made any difference. Presumably therefore the answer lies in how I created the table in the first place (as above in my first paragraph).

I think I’m getting there, although slowly!

Thanks Walter.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you can post a link to the page showing the problem, I or another can probably tell quite a lot more from viewing the page in the Safari Web Inspector or Firebug.

Walter

On Jun 30, 2014, at 10:26 AM, Tim wrote:

When I created the table I simply clicked on the ‘table icon’ on the toolbar and added the requisite number of columns and rows as prompted (then imported the data from a csv. file). I didn’t have the css bottom highlighted if that’s possibly the problem? Should I start another table, except with the CSS button activated?

FW’s knowledge base/ instructions on tables seem to be on the scant side unless I’ve missed something.

In the meantime I’ve added the AddSelector Action to the table ‘created as is’ and given it an ID, but that in itself doesn’t appear to have made any difference. Presumably therefore the answer lies in how I created the table in the first place (as above in my first paragraph).

I think I’m getting there, although slowly!

Thanks Walter.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have created a link to a public google doc I created containing the site. Would I be safe in posting the link on here?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, we actually need to see the page running live on the server, not a picture of it, in order to use the debugging tools provided by the browser. If you don’t feel like putting this in public view, click on my name in the Web view of the mailing list for my contact info, or simply Control-clcik on my name in the header of this e-mail message to choose Reply To Sender in Apple Mail.

Walter

On Jun 30, 2014, at 11:31 AM, Tim wrote:

I have created a link to a public google doc I created containing the site. Would I be safe in posting the link on here?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m in the process of trying to put my page onto a server.

In the meantime (as much for information as anything) I’ve recently read an article that states that the and tags are “are mandatory if you want to use DataTable”.

That might account for some (but only some) of my problem as, looking at the page source code, I have neither!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options