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

Question

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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

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 2

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 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;"> </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!!!