How to add Javascript(jQuery) to a page created from XSLT/XML

Question

I have an XML file (consisting of a few data items, namely <Book> ) and a corresponding XSLT file that I created, which when opened up in a browser turns this list of books into an html table. The columns are named "Author", "Title", and "BookID" (they are ids of child nodes of <tr>).

Now I want to make the resulting page dynamic using jQuery, i.e. I want to make the resulting table rows to be sorted on the column I click on. However, while the table renders fine, the resulting jQuery code seems to have no effect.

I am not sure whether this is a result of bugs in my jQuery code, or whether I didn't include it properly, or both. I included two <script></script> tags in my XSL file (one to hotlink the jQuery library, the other to link to my code), but I'm not sure if this is the correct way to do it. also, can someone look over my jQuery code to find out if there's anything wrong (I'm a complete newbie to web programming, so please forgive my errors)?

Thanks!

$(document).ready(function() {

function sortBy(a, b, selectFunction) {
    var a1 = selectFunction(a);
    var b1 = selectFunction(b);

    if (a1 < b1) {
        return -1;
    }
    if (a1 > b1) {
        return 1;
    }
    return 0;
}

function sortHelper(index) {
    var rows = $('table tbody tr').get();
    rows.sort(function(a, b) {
        return sortBy(a, b, function(x) { return $(x).children('td').eq(index).text().toUpperCase(); });
    });
    rows.appendTo('tbody');
}

$('#Author').click(function() {
   sortHelper(0);
});

$('#Title').click(function() {
    sortHelper(1);
});

$('#BookID').click(function() {
    sortHelper(2);
});

});

Try to insert an `alert("this gets loaded");` between your DOM ready script and comment out everything else. Also a development toolbar can help to see if you get any errors. Or use Chrome (F12). — Tim Vermaelen, May 02 '13 at 18:27
In `var rows = $("table tbody tr")` you do the actual selection in jquery. with `.get()` you turn it back into a javascript DOM object. — Tim Vermaelen, May 02 '13 at 18:31

score 2 · Accepted Answer · edited May 23 '17 at 10:25

A stated in the comments .get() returns a javascript object. So to use rows.sort() you want the jQuery object.

// javascript
$(obj).get(0); // returns the first element from the query
// jquery
$(obj).eq(0); // return the first $(element) from the query.

Also one thing I noticed: since you're accessing the td's by an id you can do something like:

var topRow = $("table tbody tr").eq(0),
    topCells = topRow.find("td"); // expecting #author, #title, #bookid

topCells.click(function(){
    sortHelper($(this).index()); // makes more sense this way
});

Other than that if you're loading external *.js files into your solution you'll be fine. If you're inserting code directly into the page use CDATA encoding as described here.

Thank you so much! I simply removed the `get()` method and it works! — dxuhuang, May 02 '13 at 19:28

How to add Javascript(jQuery) to a page created from XSLT/XML

1 Answers1