Javascript to HTML Special Characters

gilf · May 18th, 2004, 09:40 AM

We have a page which has some dynamic combo boxes which are initially populated data from a database which contain HTML special characters such as uml and acutes. However as they are dynamic various parts of the page populate the combo box with a refreshed list via a Javascript Array. However this then shows the special characters literally i.e. é rather than the actual character.

how can we get round this. here is a small sample page to show our problem.

<html>

    <head>
        <script>
            test = new Array;
            test[0]=new Array("Täbert","test");

            test2 = "Täubert";

            function setVal1()
            {
                document.gui.aSelect.options[0].text = "1 - " + test[0][0];
            }

            function setVal2()
            {
                document.gui.aSelect.options[0].text = "2 - Täubert";
                escapeXml="false"
            }
        </script>
    </head>

    <body>

        <FORM NAME="gui">
            <SELECT NAME="aSelect">
                <OPTION VALUE="deafert">Taubert
            </SELECT>
            <P>
            <INPUT TYPE="button" VALUE="Copy from array in JS" onclick="setVal1()">
            <P>
            <INPUT TYPE="button" VALUE="Set explicitly from JS function" onclick="setVal2()">
            <P>
            <INPUT TYPE="button" VALUE="Set explicitly from HTML" onclick="document.gui.aSelect.options[0].text = '3 - Täubert'">
            <P>
            <INPUT TYPE="button" VALUE="Copy from JS array explicitly from HTML" onclick="document.gui.aSelect.options[0].text = '4 - ' + test[0][0]">
            <P>
            <INPUT TYPE="button" VALUE="Copy from JS variable explicitly from HTML" onclick="document.gui.aSelect.options[0].text = '5 - ' + test2">
        </FORM>
    </body>

</html>

melvik · May 18th, 2004, 11:38 PM

Sorry but I couldnt get ur question! its fine in my opinian since it show what evr u set for?! what do u want to be displayed?!

Kepp in touch.

Always:),
Hovik Melkomian.

gilf · May 19th, 2004, 02:49 AM

Hovik

Thanks for the reply.

What I want is to display the a uml character. If you run the code I provided press the 3rd button "Set Explicitly from HTML" then look in the box thats what I want, an a with 2 dots over it which is an uml used in european languages.

In HTML this is done by using ä but in javascript its /344. The problem is that when the text is passed out its not converting it into the HTML equivalent.

You will notice in the code that I'm using the same string in all examples of the button but only the 3rd will display the correct format. I need a way to do this for all of the buttons in this example or use so sort of Javascript function to return the pure html code.

Cheers

Andy Gilfrin...

ChrisScott · May 19th, 2004, 03:28 AM

Hi Andy,

The reason the third method works is that entities in the onclick attribute of the button are parsed when the page is rendered.

One (dirty) way to do what you want would be to create a hidden element in your page e.g.

<div id="Parser" style="display:none;"></div>

and populate it using innerHTML, causing the entities to be parsed then copy the innerHTML into the text property of the option element...

function SetVal(){
    var d = document;
    var p = d.getElementById("Parser");
    p.innerHTML = "2 - Täubert";
    d.gui.aSelect.options[0].text = p.innerHTML;
}

HTH,

Chris

gilf · May 19th, 2004, 04:33 AM

Thanks Chris.

Thank works a treat, but I'm not sure if thats going to be suitable as we are currently using a Javascript array to populate the values.

The main problem is that its not just one page way might have this problem on it could be lots of pages. But thanks for the info and it gives me a starting point to go back to the team to see what we can do.

Maybe we could build a function to get the data from the array and then return that using the method you described. I'll have to look at the code to see how it gets the data from the array.

Thanks alot.

Andy Gilfrin

:)

ChrisScott · May 19th, 2004, 05:01 AM

Hi Andy,

One way to tackle it might be to create a form in your page (server-side from the database) that contains hidden fields:

<form id="ArraySrc">
    <input type="hidden" value="1 - "value"" />
    <input type="hidden" value="Täubert" />

</form>

Then use it to populate your array when the page loads (call LoadArray() from the body onload)...

var gArray;
function LoadArray(){
    gArray = new Array();
    var src = document.forms["ArraySrc"];
    for(var i = 0; i < src.elements.length; i++){
        gArray[i] = src.elements[i].value;
    }
}

Then just access the array as normal.

Best regards,

Chris

gilf · May 19th, 2004, 09:25 AM

Thanks for the follow up Chris.

I actually managed to get it working simply using the method you described. I created a function as showed then called that passing in the array reference and then passing out the HTML values.

I works fine so thanks once again.

Andy Gilfrin...