peppericious Posted January 13, 2013 Share Posted 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; Quote Link to comment https://forums.phpfreaks.com/topic/273092-encoding-issue-after-ajax-post-request/ Share on other sites More sharing options...
cpd Posted January 13, 2013 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/273092-encoding-issue-after-ajax-post-request/#findComment-1405324 Share on other sites More sharing options...
peppericious Posted January 13, 2013 Author Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/273092-encoding-issue-after-ajax-post-request/#findComment-1405329 Share on other sites More sharing options...
DavidAM Posted January 13, 2013 Share Posted 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'); Quote Link to comment https://forums.phpfreaks.com/topic/273092-encoding-issue-after-ajax-post-request/#findComment-1405343 Share on other sites More sharing options...
peppericious Posted January 13, 2013 Author Share Posted January 13, 2013 Thanks DavidAM, I wasn't just 'way off', I was 'way... way off'! That information is very, very helpful. Much appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/273092-encoding-issue-after-ajax-post-request/#findComment-1405365 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.