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
– Tim Vermaelen, Commented May 2, 2013 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
– Tim Vermaelen, Commented May 2, 2013 at 18:31

Community · Accepted Answer · 2017-05-23 10:25:44Z

2

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.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered May 2, 2013 at 18:41

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dxuhuang Over a year ago

Thank you so much! I simply removed the get() method and it works!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related