Can someone take me out of this frustrating situation? I have an html link which, once clicked updates a div by using an AJAX request to a PHP file which provides data to update the said div. The output in this div works fine in Mozilla firefox but displays only the textbox and the rest (select element and the button) is ignored in IE and google chrome. Next is the html document I am using:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
<title>Gestion des autorisations pour modification des quittances RCMS</title>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="well">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"><li><a href="super_or_admin.php">Retour</a></li></ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="heading">
<h3 class="small text-info h3"><i class="glyphicon glyphicon-th"></i> Outils de gestion des autorisations pour modifier les quittances RCMS <i class="glyphicon glyphicon-th"></i></h3>
</div>
<div class="list-group">
<a class="list-group-item" id="three"><span class="glyphicon glyphicon-transfer"></span> Réassigner le temps autorisé après expiration du temps par défaut</a>
</div>
<div class="col-md-12" id="content" >
<span>Content</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bootstrap3/js/jQuery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
Related jQuery code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#three').click(function() {
$.ajax({
url: 'get-centre-de-collecte-affecte.php',
dataType: 'html'
}).done(function(data) {
$('#content').html(data);
$('#content').css({'background-color':'#EEE', 'padding':'7px'});
});
});
});
</script>
</body>
</html
Last, the PHP is next and takes data from mysql. This data is what gets displayed in the html div#content
PHP code:
<?php
session_start();
include_once('Funcs.class.php');
include_once('conn.inc.php');
$conn = connect('user');
mysqli_set_charset($conn, 'UTF-8');
header('Content-Type: text/html; charset=utf-8');
$centre = Funcs::getCodeCentreNumbers($conn, $_SESSION['user']); // Centres de collecte du chef de service superutilisateur
$chaine = 'SELECT username, nom, prenom from user where username in (select username from affectation where code_centre in (';
$numItems = count($centre);
$i = 0;
foreach($centre as $key=>$value){
if((++$i !== $numItems)){
$chaine.='"'.$value.'", ';
}else{
$chaine.='"'.$value.'"';
}
}
$chaine.= ")) and type='user' AND active='yes'";
$stringTosendToBrowser = '<div class="form-group"><label for="users" class="control-label col-sm-2">Utilisateurs</label><div class="col-sm-4"><select class="form-control">';
$result = mysqli_query($conn, $chaine);
if($result){
while($row = mysqli_fetch_array($result)){
$stringTosendToBrowser.= "<option value='".$row['username']."'>".ucfirst($row['prenom'])." ".$row['nom']."</option>";
}
$stringTosendToBrowser.= '</select></div></div><br /><div class="form-group"><label for="temps" class="control-label col-sm-2">Temps alloué</label><div class="col-sm-4"><input type="text" class="form-control" placeholder="Entrer le nouveau temps alloué..." /></div></div><br /><div class="form-group"><div class="col-sm-offset-2 col-sm-4"><button type="button" class="btn btn-primary">Envoyer</button></div></div>';
}
echo $stringTosendToBrowser;
?>
Output is OK in Forefox 35.0.1 but fails to load the content in same div in Internet explorer 9 and chrome. I don't see what I am missing.
Thanks to anyone willing to help me with this.