JS console throws an error while getting data with non english characters from db with ajax

Question

I'm writing simple web app (using MAMP for Mac for development). On the page there is element with that is being generated by this code:

display_store_list.php

include('db.php');

$sql = "SELECT id, name FROM stores";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each option
    while($row = $result->fetch_assoc()) {
        $id=$row['id'];
        $name=$row['name'];
        echo '<option value="'.$id.'">'.$name.'</option>';
    }
} else {
    echo "<p>Some problem with getting values from DB</p>";
}
$conn->close();

There is with connection to database (id,store name, address, etc) db.php

$servername = "servername";
$username = "username";
$password = "password";
$dbname = "dbname";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);


// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

PROBLEM #1 It renders mostly correctly, but some store names has non-english caracters (ä, ö) and those are displayed as � symbols. Database, table and name all have Collation utf8_unicode_ci and values are displayed properly (with ä and ö) in phpMyAdmin. I did the research and only thing that worked was to include this to my display_store_list.php:

if (!$conn->set_charset("utf8")) {
    printf("Error loading character set utf8: %s\n", $conn->error);
} else {
    printf("Current character set: %s\n", $conn->character_set_name());
}

No names with mentioned characters are rendered properly, howere, it doesnt solve problem number 2

PROBLEM #2 I have js script that when user selects some store from the list, it loads (using jquery ajax and handlebars.js) other data related to selected store (address, phone number, etc).

var source   = $("#store-info").html();
var template = Handlebars.compile(source);

$('#valitse').change(function(event) {
    var id = $(this).val();

    console.log(id);
    if(id == "") {
        return false;
    }
    //Make AJAX request, using the selected value as id in the GET
    else {
        $.ajax({url: 'store_info.php?q='+id,
              success: function(data) {

                console.log(data);

                //Parsing data to object
                var context = $.parseJSON(data);

                //Insterting received data to template
                $(".store_details").html(template(context));

              },
              error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status + " "+ thrownError);
              }
        });
    }
});

It works as intended when user selects store without special characters (ä, ö) in it's name. When selecting store with these characters, js console fires:

Uncaught SyntaxError: Unexpected end of input localhost/:1

and script doesn't work. When user selects the store script logs to console log it's value and in both cases value has been got correctly. Where did I go wrong?

UPDATED

store_info.php

    include('db.php');

$id = intval($_GET['q']);

$sql = " SELECT * FROM stores WHERE id = '".$id."' "; 

$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data 
    while($row = $result->fetch_assoc()) {
        //Defining virables
        $name=$row['name'];
        $address=$row['address1'];
        $phone=$row['phone'];
        $weekdays=$row['week'];
        $sat=$row['sat'];
        $sun=$row['sun'];
        $city=$row['city'];

        //Creating array
        $arrayStoreInfo = array(
            "Name" => $name,
            "Address" => $address, 
            "Phone" => $phone, 
            "Weekdays" => $weekdays,
            "Sat" => $sat,
            "Sun" => $sun,
            "City" => $city
        );

        //Send the array back to front end
        echo json_encode($arrayStoreInfo);

    }
} else {
    echo "Some problem with getting values related to that id from DB";
}   $conn->close();

UPDATE 2

Even though I have

<?php header('Content-Type: text/html; charset=utf-8'); ?>

in my header,

 <?php echo mb_detect_encoding($str); ?>

echoes ASCII on the page.

score 0 · Answer 1 · edited May 23 '17 at 11:43

Ok. As it turns out I didn't encode data from db the right way. Here

Fellow stackoverflower actually answers my question. As it turns out, before quering anything from database one has to call mysql_set_charset("utf8") right after creating connection to db, before starting any queries.

In my case it was mysqli_set_charset($link, "utf8") right after

$conn = new mysqli($servername, $username, $password, $dbname);

in my db.php. No jason data is correct with non english characters and script executes as intended. Hope it might help someone.

UPDATE echo json_last_error_msg(); after jason_encode($array) gave me the error every time I tried to pull data with non english characters "Malformed UTF-8 characters, possibly incorrectly encoded". Googling this, took me to this question where solution was found.

JS console throws an error while getting data with non english characters from db with ajax

1 Answers1