I don't know what is wrong, I have this JavaScript function:

<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
    //initialize the javascript
    App.init();
    @if(Session::has('message'))
    var msg = '{{ Session::get('message') }}';
    console.log(msg);
    swal({
        title: "",
        text: 'pa&ntilde;ia',
        type: "warning",
        confirmButtonText: "Ok!",
        closeOnConfirm: false
    });
    $(window).bind("load", function() {
        $.gritter.add({
            title: 'Atencion',
            text: 'pa&ntilde;ia',
            image: '{{ asset('images/clipboard_icon.png') }}',
            class_name: 'danger',
            time: ''
        });
        return false;
    });
    @endif
});
</script>

The problem is that sweet alerts doesn't display: 'pañia' it displays 'pañia' but the gritter message is correctly displaying the word. (See picture)

As you can see the red gritter correctly displays the word, but the sweet alert doesn't,

The file is UTF-8 encoded, so is the meta and the script also just in case, and before you ask why I put 'pañia' its part of a larger message that is send by Laravel on the session and retrieved by the view in that format.

Anyway my real question is why does the gritted display the word fine and how can I fix it so it works also on sweet alert.

I don't know what is wrong, I have this JavaScript function:

<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
    //initialize the javascript
    App.init();
    @if(Session::has('message'))
    var msg = '{{ Session::get('message') }}';
    console.log(msg);
    swal({
        title: "",
        text: 'pa&ntilde;ia',
        type: "warning",
        confirmButtonText: "Ok!",
        closeOnConfirm: false
    });
    $(window).bind("load", function() {
        $.gritter.add({
            title: 'Atencion',
            text: 'pa&ntilde;ia',
            image: '{{ asset('images/clipboard_icon.png') }}',
            class_name: 'danger',
            time: ''
        });
        return false;
    });
    @endif
});
</script>

The problem is that sweet alerts doesn't display: 'pañia' it displays 'pañia' but the gritter message is correctly displaying the word. (See picture)

As you can see the red gritter correctly displays the word, but the sweet alert doesn't,

The file is UTF-8 encoded, so is the meta and the script also just in case, and before you ask why I put 'pañia' its part of a larger message that is send by Laravel on the session and retrieved by the view in that format.

Anyway my real question is why does the gritted display the word fine and how can I fix it so it works also on sweet alert.

• javascript
• php
• utf-8
• sweetalert

• What you are seeing are not UTF-8 characters (well, technically they're), but you are seeing a html encoded string. Like your answer says, you need to allow HTML formatting. – Charlotte Dunois Commented Feb 5, 2016 at 23:29

2 Answers 2

I just fixed it by adding html: true to the function:

swal({
        title: "",
        text: 'pañia',
        type: "warning",
        confirmButtonText: "Ok!",
        closeOnConfirm: false,
        html: true
    });

I fixed it by setting html to the text.

swal({
        title: "",
        text: 'pañia',
        type: "warning",
        confirmButtonText: "Ok!",
        closeOnConfirm: false,
        html: 'pañia'
    });