Implementing jquery plugins in HTML5

[Psider]

Hi guys,

I'm trying to implement a jquery plugin that allows column sorting, non-scrolling headers, etc, however I'm not having any luck in Flare HTML5. I got column sorting to work in Flare9 Webhelp, however it is broken in Flare10 webhelp and does not work at all in either versions HTML5. (I have a few things yet to try to get it working in Flare10 webhelp.)

I contacted support who replied that there is a conflict with the jquery used by Flare and the jquery I want to add. But they don't support custom javascript or jquery.

Does anyone know how to replace/work around this issue?

The jquery plugin I want to use is this one:
http://datatables.net/

Thanks for any help or suggestions.

Amber

[NorthEast]

HTML5 Help uses jQuery, so you wouldn't include a link to the jQuery js file.
Flare v10 appears to use jQuery 1.8.3, so your plugin would need to work with that version.

WebHelp doesn't use jQuery, so you'd need to include a link to the jQuery js file (e.g. in your master page), and can obviously choose whichever version that you want.

[Psider]

Thanks Dave. It supports 1.7 and above. I tried with and without a jquery reference and with the references at different locations in the html. Madcap have logged a bug and mentioned that there was some modification that could be made, but said they don't provide support, which is fair enough.

I've managed to get it working in webhelp by moving the script references to the bottom of the topic.

I'd prefer to use html5, but given the amount of work I've already put into it...

[NorthEast]

I was interested in looking at Datatables, so tried this myself.

Trying the website example gave an error, and a quick Google suggests that Datatables has problems with RequireJS which is used by HTML5 Help.

But there's a solution mentioned here that seems to work: http://datatables.net/forums/discussion ... js-problem

In my working project, I have two script links at the end of the body section of the master page - one to my configuration JS, and one to the datatables JS.

Code: Select all

		<script src="../datatables/js/jquery.dataTables.js">
		</script>
		<script src="../datatables/js/init.js">
		</script>
    </body>

Then in init.js, I have the following:

Code: Select all

require.config({
	baseUrl: "Resources/datatables/js/",
	paths: {
	"datatables": "jquery.dataTables.min.js"
	}
	});


requirejs(["datatables"], function() {
		$('#example').dataTable();
	});

Note:
- The first part sets the path (from topics) to the JS is Resources/datatables/js/, and the filename is jquery.dataTables.min.js. (Based on the solution from that post - http://live.datatables.net/deluluk/1/edit.)
- The second part initiates a table with an ID of example (#example).