jquery .html() not displaying in ie works fine in firefox

Question

Hi again!

I have a what i would call a stange problem, though its to do with internet explorer (7 8 in both normal and compatability modes) so is not that strange to have a problem!!

I have created a page break system. there are buttons on the page [previous] [next] [show all] / [show as pages]

when the buttons are clicked it uses an ajax call to get the data and replace the html of a div.

all the buttons work in firefox, safari etc but in ie only the [show all] [show as pages] buttons work the [previous] [next] buttons just empty the data.

the page is visible here: http://www.pimms-transfer-eu.org/index_ietest.php?id_lang=10

here is my jquery code:

$(document).ready(function() {
    $id_sec = <?php echo $row_rs_sections['id_sec']; ?>;

    function getBreaks($id_sec ,$id_brk){ // function to get next page and previous page
        var ajax_load = "<img src='img/icons/loadinfo_circle 16x16.gif' alt='loading...' /> Loading data...";
        $("#pbcontent").html(ajax_load);
        $.get('getbreakData.php?id_sec='+$id_sec+'&id_brk='+$id_brk, function(data) {
            $("#pbcontent").empty(); // tried adding this to fix ie prob
            $("#pbcontent").html(data);
        });
    };

    function getAllBreaks($id_sec){ //function to get all pages
        var ajax_load = "<img src='img/icons/loadinfo_circle 16x16.gif' alt='loading...' /> Loading data...";
        $("#pbcontent").html(ajax_load);
        $.get('getbreakData.php?id_sec='+$id_sec+'&showall=true', function(data) {
            $("#pbcontent").html(data);
        });
    };
    //using live as buttons are page loaded via ajax
    $('.showAllButton').live('click', function(){
        $id_brk = $(this).attr('rel');
    getAllBreaks($id_sec, $id_brk);
    });

    $('.showAsPagesButton').live('click', function(){
    $id_brk = $(this).attr('rel');
    getBreaks($id_sec, 0);
    });

    $('.prevButton').live('click', function(){
    $id_brk = $(this).attr('rel');
    getBreaks($id_sec, $id_brk);
    });

    $('.prevButton').live('hover', function () {
        this.src = '/img/icons/prev_on.gif';
    }, function () {
        this.src = '/img/icons/prev_off.gif';
    });

    $('.nextButton').live('click', function(){
    $id_brk = $(this).attr('rel');
    getBreaks($id_sec, $id_brk);
    });

    $('.nextButton').live('hover', function () {
        this.src = '/img/icons/next_on.gif';
    }, function () {
        this.src = '/img/icons/next_off.gif';
    });

    getBreaks($id_sec ,0); // load page
});

and the code that is called via ajax:

    <?php require_once('Connections/pimms.php'); ?>
    <?php
    // Require the MXI classes
    require_once ('includes/mxi/MXI.php');

    if (!function_exists("GetSQLValueString")) {
    function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
    {
      $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

      $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

      switch ($theType) {
        case "text":
          $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
          break;    
        case "long":
        case "int":
          $theValue = ($theValue != "") ? intval($theValue) : "NULL";
          break;
        case "double":
          $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
          break;
        case "date":
          $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
          break;
        case "defined":
          $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
          break;
      }
      return $theValue;
    }
    }

    $MMID_rs_pagebreaks = "0";
    if (isset($_GET['id_sec'])) {
      $MMID_rs_pagebreaks = $_GET['id_sec'];
    }
    mysql_select_db($database_pimms, $pimms);
    $query_rs_pagebreaks = sprintf("SELECT * FROM sections_sec WHERE id_sec = %s", GetSQLValueString($MMID_rs_pagebreaks, "int"));
    $rs_pagebreaks = mysql_query($query_rs_pagebreaks, $pimms) or die(mysql_error());
    $row_rs_pagebreaks = mysql_fetch_assoc($rs_pagebreaks);
    $totalRows_rs_pagebreaks = mysql_num_rows($rs_pagebreaks);
    $id_sec = $row_rs_pagebreaks['id_sec'];
    ?>
    <?php 
        // set up the vars

        //store the content for the page in $str
        $str = $row_rs_pagebreaks['text_sec'];  
        // break up the content into pages
        $myPages = explode('<div style="page-break-after: always;">',$str);
        // get the number of pages
        $pageCount = count($myPages);
        // array starts from 0 so create values for the display counter +1
        $pageCountHR = $pageCount;
        // set default to the first page ($page = 0)
        $page = 0;
        //set the default to the display counter
        $pageHR = $page+1;

        // set the page to the page requested if it has been passed
        if (isset($_GET['id_brk'])) {
            $page = $_GET['id_brk'];
            //set the value to the display counter
            $pageHR = ($page+1);
        };
        // set up the next and previous links
        $nextLink = $page +1;
        $prevLink = $page -1;

        // echo the results
        /*
        echo('pagecount in array = '.$pageCount.'<br>');
        echo('hr pagecount = '.$pageCountHR.'<br>');
        echo('page in array = '.$page.'<br>');
        echo('hr page = '.$pageHR.'<br>');
        echo('prev page = '.$prevLink.'<br>');
        echo('next page = '.$nextLink.'<br>');
        */

        // set wether to show all pages or not
        $showAll = false;
        if (isset($_GET['showall'])) {
            $showAll = $_GET['showall'];
        };
        // set the page to display
        $pagetoprint = $myPages[$page];

    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/pagebreaks2.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/development-bundle/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/roundedcorners.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('.pagingInfo').corner();
      $('.navButton_on').corner();
    });

    </script>
    </head>

    <body>

    <?php if($pageCount > 1){?>
    <div id="navBar">
        <?php if ($page != 0){?>

          <div id="navitem">
                <?php if($showAll == false){?>
                <img src="/img/icons/prev_off.gif" alt="To Left" width="21" height="15" class="prevButton" rel="<?php echo($prevLink);?>"/>
             <?php };?>      
          </div>
       <?php }else{?>
            <div class="noButton"></div>
       <?php };?>

        <?php if($showAll == false){?>
          <div class="pagingInfo">
             Page <?php echo($pageHR);?> of <?php echo($pageCountHR);?>
          </div>
       <?php };?>
       <?php if ($pageHR < $pageCountHR){ ?>
      <div id="navitem">
      <?php if($showAll == false){?>
        <img src="/img/icons/next_off.gif" alt="To Right" name="NavRight" class="nextButton" id="NavRight" rel="<?php echo($nextLink); ?>"/>  
        <?php };?>
        </div>
          <?php }else{ ?>
             <div class="noButton"></div>
          <?php }; ?>
       <?php if ($showAll == false){?>
        <div class="showAllButton navButton_on">
            Show All Pages
        </div>
       <?php };?>
       <?php if ($showAll == true){?>
        <div class="showAsPagesButton navButton_on">
            Show As Pages
        </div>
       <?php };?>
    </div>
    <br />
    <br />

    <?php };?>
    <h1><?php echo $row_rs_pagebreaks['name_sec']; ?></h1>
        <?php 
          if ($showAll == true){
             echo($str);
          }else{
             echo($pagetoprint);
       };?>
    <?php if($pageCount >1){?>
    <div id="navBar">
        <?php if ($page != 0){?>

          <div id="navitem">
                <?php if($showAll == false){?>
                <img src="/img/icons/prev_off.gif" alt="To Left" width="21" height="15" class="prevButton" rel="<?php echo($prevLink);?>"/>
             <?php };?>      
          </div>
       <?php }else{?>
            <div class="noButton"></div>
       <?php };?>

        <?php if($showAll == false){?>
          <div class="pagingInfo">
             Page <?php echo($pageHR);?> of <?php echo($pageCountHR);?>
          </div>
       <?php };?>
       <?php if ($pageHR < $pageCountHR){ ?>
      <div id="navitem">
      <?php if($showAll == false){?>
        <img src="/img/icons/next_off.gif" alt="To Right" name="NavRight" class="nextButton" id="NavRight" rel="<?php echo($nextLink); ?>"/>  
        <?php };?>
        </div>
          <?php }else{ ?>
             <div class="noButton"></div>
          <?php }; ?>
       <?php if ($showAll == false){?>
        <div class="showAllButton navButton_on">
            Show All Pages
        </div>
       <?php };?>
       <?php if ($showAll == true){?>
        <div class="showAsPagesButton navButton_on">
            Show As Pages
        </div>
       <?php };?>
    </div>
    <br />
    <br />

    <?php };?>


    </body>
    </html>
<?php
    mysql_free_result($rs_pagebreaks);
?>

EDIT:

i looked into document types in case that was the problem and i think i have it set up correctly on both files: getbreakdata.php:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
index_ietest.php:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Answer 1

I encountered same problem previously. In IE JQuery live method was not working for some AJAX generated contents. So i used JQuery livequery plugin.

Answer 2

You're trying to stick the whole <html> block of another page inside a <div>...IE isn't going to like that.

There are other issues as well, reused IDs and an unmatched </div> in your source that IE also won't tolerate very well. The main issue is that unclosed </div> which doesn't exist in the Show All version. but why not fix all the issues? :)

Instead of $.get() you can use .load() to get content from the server for only a portion of the page, for example:

$("#pbcontent").load('getbreakData.php?id_sec='+$id_sec+' #container');

This would load only the #container into #pbcontent, discarding the rest of the requested page.

Answer 3

Thanks nick pointing out the missing div element was a great help. helped me locate the problem!!

The content to be displayed was pulled from a database, it was in the code that split the content into seperate pages that was causing the error.

$myPages = explode('<div style="page-break-after: always;">',$str);

when it should have been:

$myPages = explode('<div style="page-break-after: always;"><span style="display: none;">&#160;</span></div>',$str);

now the closing div for the page-break is gone all works great.

will add http://validator.w3.org/ to my list of tools!!!