encoding issue (?) after ajax post request

peppericious · January 13, 2013

I've never done anything with ajax before but am pleased to have got my first page without refresh working here.

However, there's a character encoding issue, as you can see. It only applies to the data retrieved from the db, according the menu selections.

How can I resolve this? (All relevant code is below.)

Thanks in advance. (Be gentle... as I say, it's my first time out with jquery/ajax.)

main page

<?php
// assemble select menu options
include('includes/mysqli_connect.php');
$q = "SELECT title FROM content ORDER BY title";
$r = mysqli_query($dbc, $q);
$retrieved = mysqli_num_rows($r);
if($retrieved > 0) {
$select = "<option value = '' >Make a selection...</option>";
while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
$title = $row['title'];
$label = ucfirst($row['title']);
$select .= "<option value='$title'>$label</option>";
}
}
?>
<!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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="includes/js/script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
<title>PCs retrieval testing</title>
<style type='text/css'>
body {
font-family: 'Monda', sans-serif;
color: #00A2EE;
}
#wrap {
width:800px;
margin:20px auto;
}
.ct {
padding: 0px 20px 10px 20px;
border: 1px solid lightSeaGreen;
border-radius: 4px;
margin-top: 30px;
background-color: white;
color: lightSeaGreen;
}
.ct h2 {
margin: 0;
border-bottom: 1px solid lightSeaGreen;
}
.x {
float: right;
position: relative;
bottom: 31px;
right: -4px;
font-size: .7em;
cursor: pointer;
border: 1px solid lightSeaGreen;
border-radius: 11px;
padding: 0px 5px;
}
</style>
</head>
<body>
<div id='wrap'>
<h2>Blah de blah</h2>
<p>"Nous avons fait des dizaines de morts, même une centaine de morts parmi les islamistes à Konna. Nous contrôlons la ville, totalement", a affirmé un officier malien depuis Mopti (centre), région marquant la limite entre le nord et le sud du pays.</p>
<p>ibh euismod tincidunt utugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim</p>
<select name="select_menu" id="select_menu">
<?php echo $select; ?>
</select>
<div id='content' class='ct'>
<!-- db content will show here, based on menu selection-->
<span class='x'>X</span>
</div>
</div>
</body>
</html>

script.js

$(document).ready(function() {
$('#content').hide();
$("#select_menu").change(function()
{
var sel = $(this).val();
if(sel != '' ) {
$("#content").html('<h2><img src="img/ajax-loader.gif"/></h2>').show();
$.post('includes/get_content.php', { opt: $(this).val() }, function(data)
{
 $('#content').fadeIn('fast').html(data).append("<span class='x'>X</span>");
 $(".x").click(function() {
 $("#content").slideUp('fast');
 $("#select_menu").val("");	
 });
});
} else { // choisir is selected so hide div
$('#content').slideUp('fast');
}
});
});

get_content.php

<?php
$def = $_POST['opt'];
include('mysqli_connect.php');
$q = "SELECT definition FROM content WHERE title = '$def'";
$r = mysqli_query($dbc, $q);
$retrieved = mysqli_num_rows($r);
if($retrieved = 1) {
$row = mysqli_fetch_array($r, MYSQLI_ASSOC);
$definition = $row['definition'];
}
echo $definition;

cpd · January 13, 2013

You can convert the encoding using http://php.net/mb_convert_encoding . If you use this in your get_content.php page all should be well.

I've noticed you don't sanitise or prepare your SQL before execution. Consider using the mysqli_prepare function as opposed to just running a query. In its current state you are open to injection.

peppericious · January 13, 2013

You can convert the encoding using http://php.net/mb_convert_encoding . If you use this in your get_content.php page all should be well.

I've noticed you don't sanitise or prepare your SQL before execution. Consider using the mysqli_prepare function as opposed to just running a query. In its current state you are open to injection.

Excellent, thanks. To deal with both issues you referred to, I changed get_content.php to this:

<?php
include('mysqli_connect.php');
$def = mysqli_real_escape_string($dbc, $_POST['opt']);
$q = "SELECT definition FROM content WHERE title = '$def'";
$r = mysqli_query($dbc, $q);
$retrieved = mysqli_num_rows($r);
if($retrieved = 1) {
$row = mysqli_fetch_array($r, MYSQLI_ASSOC);
$definition = $row['definition'];
}
echo mb_convert_encoding($definition, 'UTF-8');

... and everything is great now.

So, just to clarify about the encoding... the content attribute in the meta tag within the head of pc_menu_test.php will not apply to the content returned by means of the ajax request, is that right? It's as if that content is an entirely separate entity... and needs to have its own encoding dealt with separately, is that right?... Or am I way off?

DavidAM · January 13, 2013

The Content-Type META tag simply tells the browser what kind of text it is about to receive; it does not magically change the text you send. Your script should send text that matches what you tell the browser.

If the data in your database is stored as UTF-8, then you should not need to convert the encoding. But you do need to tell the browser you are sending UTF-8 on the AJAX request.

1) Make sure your database (tables/columns) are defined as UTF-8.

2) Make sure your database connection include file sets the connection to UTF-8 immediately after openning it:

$dbc->set_charset("utf8")

3) You should send a header from PHP to indicate UTF-8 text will be sent.

header('Content-type: text/html; charset=utf-8');

4) I have not worked a great deal with non-ASCII text, but the following PHP settings are also of interest in this case. Have a look at the manual book.mbstring

 mb_internal_encoding('UTF-8');
 mb_http_output('UTF-8');
 mb_http_input('UTF-8');
 mb_language('uni');
 mb_regex_encoding('UTF-8');

peppericious · January 13, 2013

Thanks DavidAM,

I wasn't just 'way off', I was 'way... way off'! That information is very, very helpful. Much appreciated.

Sign In

encoding issue (?) after ajax post request

Recommended Posts

peppericious

Link to comment

Share on other sites

cpd

Link to comment

Share on other sites

peppericious

Link to comment

Share on other sites

DavidAM

Link to comment

Share on other sites

peppericious

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information