padolsey-archive / jquery.fn

A collection of jQuery plugins
http://james.padolsey.com
The Unlicense
1.1k stars 720 forks source link

IE6 javascript error in sortElements demo.html #7

Open ianchanning opened 13 years ago

ianchanning commented 13 years ago

I've been getting consistently repeated IE6 javascript errors. If you strip the Demo just down to the rows Apple, Orange, Melon and Banana.

Then in IE6 (at least in IETester version of IE6), on the 16th time that I re-sort the Quantity column or the 8th time that I re-sort the Fruit column I get a 'Number Expected' error from the line of code that does the a > b comparison. The issue seems to be these lines:

    a = $(a).text();
    b = $(b).text();

a is being over-written by itself, sometimes it seems that this results in the var a becoming null or a blank string (I'm not sure which).

If you replace the lines with :

    var a1 = $(a).text(),
        b1 = $(b).text();

And then use a1 and b1 instead of a and b, then the errors stop occurring.

Here's the code I have that gives me these errors:

    <!DOCTYPE html>
    <html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Sort plugin for jQuery</title>
        </head>
        <body>

            <h1>Demo</h1>

            <p>Click on the headers (fruit/quantity).</p>

            <table>
                <thead>
                    <tr>
                        <th>Fruit</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apple</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                        <td>88</td>
                    </tr>
                    <tr>
                        <td>Orange</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>Melon</td>
                        <td>21</td>
                    </tr>
                </tbody>
            </table>

            <button>Click to sort the list below</button>

            <ul>
                <li>Lamborghini</li>
                <li>Farrari</li>
                <li>Masarati</li>
                <li>Aston Martin</li>
                <li>Porche</li>
            </ul>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
            <script src="jquery.sortElements.js"></script>
            <script>
                var th = jQuery('th'),
                    li = jQuery('li'),
                    inverse = false;

                th.click(function(){

                    var header = $(this),
                        index = header.index();

                    header
                        .closest('table')
                        .find('td')
                        .filter(function(){
                            return $(this).index() === index;
                        })
                        .sortElements(function(a, b){

                            a = $(a).text();
                            b = $(b).text();

                            return (
                                isNaN(a) || isNaN(b) ?
                                    a > b : +a > +b
                                ) ?
                                    inverse ? -1 : 1 :
                                    inverse ? 1 : -1;

                        }, function(){
                            return this.parentNode;
                        });

                    inverse = !inverse;

                });

                $('button').click(function(){
                    li.sortElements(function(a, b){
                        return $(a).text() > $(b).text() ? 1 : -1;
                    });
                });
            </script>

        </body>
    </html>