A workaround to fix an IE bug with respect to the clone() method in jquery 1.3.2

Question

Hi everyone....!!

I am using the Jquery pagination plugin

http://plugins.jquery.com/project/pagination

to paginate the rows in a table.

I also use a little tip provided in another SO question here to correct a bug in the original example...

The code is working fine in FireFox and Chrome but not in IE6+... Here is my javascript to initialize and run the pagination...

function pageselectCallback(page_index, jq){
              var items_per_page = pagination_options.items_per_page;
              var offset = page_index * items_per_page;
              var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();



               $('#Searchresult').empty().append(new_content);


              return false;
            }

            var pagination_options = {
                  num_edge_entries: 2,
                  num_display_entries: 8,
                  callback: pageselectCallback,
                  items_per_page:3
                }



            /**
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult tr.result').length;
                // Create pagination element

                 $("#Pagination").pagination(num_entries, pagination_options);
            }

            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements
            $(document).ready(function(){
                initPagination();
            });

The Table structure is

// Table to display the paginated data
<table>
  <tr>
   <td>
      <div id="Pagination" class="pagination">
      </div>
        <br style="clear:both;" />
      <div id="Searchresult" style="height:auto;">
      This content will be replaced when pagination inits.
     </div>
   </td>
 </tr>
</table>


// Table containing the rows that are to be paginated
<table id="hiddenresult" style="display:none;">
  <tr>
    <td>   

 <table>
      <tr> // 1st row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> // end 1st row

     <tr> //2nd row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> //end 2nd row

    etc etc etc....
    </table>

 </td>
</tr>
</table> // id = "hiddenresult"

The way i see it the plugin get's initialized in IE but the bug is in displaying the paginated rows... But cannot figure out where it is or how to correct it... Thanks a lot for your suggestions....

Answer 1

Hi y'all...

I'm still working on the code and found a peculiar thing....

After the pagination process is over the paginated content is still not visible in IE6+ .... So i tried "alert"ing the content of "Searchresult" div... i.e the one that displays the paginated content... like this...

function pageselectCallback(page_index, jq){
              var items_per_page = pagination_options.items_per_page;
              var offset = page_index * items_per_page;
              var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();



               $('#Searchresult').empty().append(new_content);

               // Checking whether content is loaded after pagination
               alert($('#Searchresult').html());


              return false;
            }

and when i added the alert statement, the alert box shows that the content is indeed been loaded.... but it's just not visible... So.. i tried setting the css display property to block... with no success...
.. Goofy..!!! Ain't it..!!!

Answer 2

Hi everyone...

Still losing hair fighting with this stupid IE Bug.... I've found another thing.... if it's help full to anyone.. just in case....

As shown in the above code i slice the hidden content using the slice() jquery method and clone it, save it to the variable "new_content" and then append it to Searchresult div... and the slice content is not being displayed... but viewing the "page source" i can see the proper html code.... and it's jsut wierd that the content is not shown on screen....

Then.. instead of storing the sliced content to "new_content" i put some html code like...

var new_content = "<table border=1> <tr> <td> hi </td> </tr> <tr> <td>  hello </td> </tr> <tr> <td> <img src=\"../uploads/sunset.jpg\" /> </td> </tr> </table>";

and voila... it get's appended properly to Searchresult div.... and the html get's rendered properly and i can see the table and image on screen...

This led me to take a guess that the content returned by clone() method cannot be rendered by IE.. if that's the case... what can be the workaround to this total ineptitude of good ol' IE...?????

Answer 3

Graceful Degradation is the solution. Don't paginate your tables in IE, make it just readable.

Answer 4

Hi y'all...!!!

fixed it...!!!

This is the code....!!

 function pageselectCallback(page_index, jq){
                var items_per_page = pagination_options.items_per_page;
                var offset = page_index * items_per_page;
                var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();


               if(navigator.appName == "Microsoft Internet Explorer"){
                   // This is to fix an IE bug that won't properly append the cloned html to the 
                   // Searchresult div. So we first append the cloned html to a dummy div and
                   // then use javascript innerhtml property to copy to the actual div.
                   $('#justDiv').empty().append(new_content);

                    var content = document.getElementById("justDiv").innerHTML;

                    document.getElementById("Searchresult").innerHTML = content;
              }
                else{
                    $('#Searchresult').empty().append(new_content);
                }


                return false;
            }

Cheers everybody...!!!

I know this is not very neat... and i am still open for suggestions... So.. all are welcome... thanks