AJAX and á é í ó ú characters

S

SM

Hello,
I have a index.html file with 3 links and one div.
Each link refers to and html file (1.html, 2.html, and 3.html).
Using AJAX, i upload the HTML file (depending on which link the users
click) into the div.
That makes for a perfect no-refresh web page, very user-friendly, very
blablabla bla...
You know what i mean.

This is my problem:
Those weird characters don't show up correctly! I mean the characters
with accent like: á é í ó ú ...

Why? and how do i fix that small problem?

Two more related questions:
1
For the the html files (1.html, 2.html, and 3.html), do i need to
insert tha <HEAD> and <HTML> or can i just insert

<BODY>. The reason im asking, is that i only use the <BODY> content to
upload in a div.... i dont think i need the rest...just asking...
2
Is this the best way to achieve this? I've read in this forum that a
php that calls a html file or something like that is also a

good solution.


Thanks
Marco


--------------
If it helps, this is how i insert the html file (1.html, 2.html, and
3.html) to the main div of the index.html

/*-----------------------------------------------------*/
function display()
{
var div = document.getElementById('main');
var xmlResponse = xmlHttp.responseText;

div.innerHTML = xmlResponse;
}
 
S

shimmyshack

Hello,
I have a index.html file with 3 links and one div.
Each link refers to and html file (1.html, 2.html, and 3.html).
Using AJAX, i upload the HTML file (depending on which link the users
click) into the div.
That makes for a perfect no-refresh web page, very user-friendly, very
blablabla bla...
You know what i mean.

This is my problem:
Those weird characters don't show up correctly! I mean the characters
with accent like: á é í ó ú ...

Why? and how do i fix that small problem?

Two more related questions:
1
For the the html files (1.html, 2.html, and 3.html), do i need to
insert tha <HEAD> and <HTML> or can i just insert

<BODY>. The reason im asking, is that i only use the <BODY> content to
upload in a div.... i dont think i need the rest...just asking...
2
Is this the best way to achieve this? I've read in this forum that a
php that calls a html file or something like that is also a

good solution.

Thanks
Marco

--------------
If it helps, this is how i insert the html file (1.html, 2.html, and
3.html) to the main div of the index.html

/*-----------------------------------------------------*/
function display()
{
var div = document.getElementById('main');
var xmlResponse = xmlHttp.responseText;

div.innerHTML = xmlResponse;

}
Click to expand...

you shouldnt use the BODY tag, or else there will be 2 body tags in
the DOM ;)
as for characters, its probably the encoding, is the "master" page
encoded with utf-8
(look at the content type send by the server, and at the content-type
meta tag, they should match, although the meta tag isnt needed if the
server sends the correct one,
you might find that you are dragging in content from 1,2,3.html which
is encoded in a different way. If so, lookup mb_convert_encoding and
either save the files in the correct encoding or pass things you are
not sure about through a script that converts them. (this is the case
with ad hoc content from another site you are not in control of)
 
A

ASM

SM a écrit :
Hello,
I have a index.html file with 3 links and one div.
Each link refers to and html file (1.html, 2.html, and 3.html).
Using AJAX, i upload the HTML file (...)
This is my problem:
Those weird characters don't show up correctly! I mean the characters
with accent like: á é í ó ú ...
Click to expand...

Quasi normal.
It is a question of charset.
Usually the XHR (at least with FF) reads the downloaded file as if it
was written in utf-8.

So the best is to write or re-write your files 1, 2, 3.html
in utf-8

An other way is to tell to your server which charset in his headers he
has to send with the files (this time you can have your files written in
the charset you want).

If you can't fix your server, and no charset is send with files,
with Safari you will have to add on 1st line of downloaded files the XML
charset declaration :
Two more related questions:
1
For the the html files (1.html, 2.html, and 3.html), do i need to
insert tha <HEAD> and <HTML> or can i just insert

<BODY>.
Click to expand...

I do without tags body, only the content.
I expect that the file could be a *.txt
2
Is this the best way to achieve this? I've read in this forum that a
php that calls a html file or something like that is also a
good solution.
Click to expand...

It could be, because in PHP you can send headers with the file
and eventually use the charset you want.
 
R

Richard Cornford

SM said:
I have a index.html file with 3 links and one div.
Each link refers to and html file (1.html, 2.html, and 3.html).
Using AJAX, i upload the HTML file (depending on which link the
users click) into the div.
That makes for a perfect no-refresh web page,
Click to expand...

Why are you doing that? If you are downloading entire HTML pages and
having them parsed by a web browser you are not achieving any
performance improvement over normal web page navigation and you will
have introduced a great deal of needless dependency on technologies that
are not guaranteed to be supported by web browsers.
very user-friendly,
Click to expand...

That will not be the opinion of the users for which the result does not
work.
very blablabla bla... You know what i mean.
Click to expand...

Ah, such a well-thought-out design that it is not possible to present a
single complete sentence to justify it.
This is my problem:
Those weird characters don't show up correctly! I mean the
characters with accent like: á é í ó ú ...

Why? and how do i fix that small problem?
Click to expand...

The character encoding used on the main page is being employed when
interpreting the characters in the HTML source used with - innerHTML -
but differs from the UTF-8 that is used to interpret the text in the -
responseText - property of XML HTTP request objects.
Two more related questions:
1
For the the html files (1.html, 2.html, and 3.html), do i
need to insert tha <HEAD> and <HTML> or can i just insert
<BODY>. The reason im asking, is that i only use the <BODY>
content to upload in a div.... i dont think i need the
rest...just asking...
Click to expand...

And (x)HTML DOM may not contain more than one HTML, HEAD or BODY
element. If you are going to inset HTML into a DIV in the body of a
document the HTML inserted should only be HTML that would be valid in
that context.
2
Is this the best way to achieve this?
Click to expand...
<snip>

Achieve "very blablabla bla..."? Yes this is ideal, there is no better
way to get "very blablabla bla...".

Richard.
 
S

SM

Why are you doing that? If you are downloading entire HTML pages and
having them parsed by a web browser you are not achieving any
performance improvement over normal web page navigation and you will
have introduced a great deal of needless dependency on technologies that
are not guaranteed to be supported by web browsers.


That will not be the opinion of the users for which the result does not
work.


Ah, such a well-thought-out design that it is not possible to present a
single complete sentence to justify it.



The character encoding used on the main page is being employed when
interpreting the characters in the HTML source used with - innerHTML -
but differs from the UTF-8 that is used to interpret the text in the -
responseText - property of XML HTTP request objects.


And (x)HTML DOM may not contain more than one HTML, HEAD or BODY
element. If you are going to inset HTML into a DIV in the body of a
document the HTML inserted should only be HTML that would be valid in
that context.


<snip>

Achieve "very blablabla bla..."? Yes this is ideal, there is no better
way to get "very blablabla bla...".

Richard.
Click to expand...

---------------------
Thanks for all your answers. Sorry for not beeing more descriptive.

I always try to make my question simple, even though it sometines
doesnt reflect what i really want to achieve. That's because i dont
want to be to complicated and not received any answers but also
because most of the time im just looking for a confirmation if im in
the right path or not.

What im trying to achieve here is a dynamic tab functionality. When a
user clicks on a tab (tabs are created using CSS) the display switches
automatically. I see this a lot in the web, and i thought it would be
cool to add it to my web page.

After some research, i've found out that AJAX was the best solution
for what im trying to achieve.

After all of your answers, i have made some changes. No more
<HTML><HEAD><BODY> tags. Just plain html tags like <p><h1><ul>, etc...

As for the characters, i've check my server (phpinfo) and i see this:
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7

my master HTML is encoded like this:
<!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=iso-8859-1" />


Also i tried replacing 'charset=iso-8859-1' for 'charset=UTF-8' in the
master HTML with no sucess.
I guess my only solution is to use 'mb_convert_encoding', is that ok?
Are they any other solution?


Thanks again
Marco
 
S

shimmyshack

---------------------
Thanks for all your answers. Sorry for not beeing more descriptive.

I always try to make my question simple, even though it sometines
doesnt reflect what i really want to achieve. That's because i dont
want to be to complicated and not received any answers but also
because most of the time im just looking for a confirmation if im in
the right path or not.

What im trying to achieve here is a dynamic tab functionality. When a
user clicks on a tab (tabs are created using CSS) the display switches
automatically. I see this a lot in the web, and i thought it would be
cool to add it to my web page.

After some research, i've found out that AJAX was the best solution
for what im trying to achieve.

After all of your answers, i have made some changes. No more
<HTML><HEAD><BODY> tags. Just plain html tags like <p><h1><ul>, etc...

As for the characters, i've check my server (phpinfo) and i see this:
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7

my master HTML is encoded like this:
<!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=iso-8859-1" />

Also i tried replacing 'charset=iso-8859-1' for 'charset=UTF-8' in the
master HTML with no sucess.
I guess my only solution is to use 'mb_convert_encoding', is that ok?
Are they any other solution?

Thanks again
Marco
Click to expand...

just make sure all the encodings are the same
so in the master page you could have:
header( 'Content-Type: text/html;charset=utf-8');
remove or make the meta tag the same
then open and actual make sure the document IS in utf-8 using a
unicode aware editor
same for 1,2,3,4.html (although Richards's right, flat files are a
slow and intensive way, you could have a php script, or just hard code
the tabs in the DOM, and switch between them, this removes the need
for tcp connections each time someone clicks)

this line:
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
is what yor /browser/ will accept not what the server will send.
to see what the server sends you need to inspect the response headers
for the page concerned. (rather than the request headers)
 
S

SM

just make sure all the encodings are the same
so in the master page you could have:
header( 'Content-Type: text/html;charset=utf-8');
remove or make the meta tag the same
then open and actual make sure the document IS in utf-8 using a
unicode aware editor
same for 1,2,3,4.html (although Richards's right, flat files are a
slow and intensive way, you could have a php script, or just hard code
the tabs in the DOM, and switch between them, this removes the need
for tcp connections each time someone clicks)

this line:
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
is what yor /browser/ will accept not what the server will send.
to see what the server sends you need to inspect the response headers
for the page concerned. (rather than the request headers)
Click to expand...

Ok, now im more confused then ever. Forget about the characters and
let's talk about concept.
As a programmer, you never want to program something that is going to
be slow for the user and intensive for the server.

My web page is not only made of tabs, theres also many pages. I dont
want to create a bunch of pages and then if i need to make a change;
go through all of them and change it. The idea is to create a master
html page and then upload the 'content' of the link into the master
html div. That way, if i needed to make a change to a link in the
master html, i do it only once.

The old way was to create a bunch of pages and link them together, and
if you needed to update a link, you had to do it in all the pages.
The new way, so i heard, is to use AJAX. But now, from your messages,
there's also php script.

I have no problems with PHP and AJAX, etc... i just needed to know
what is the best way to not create the old model (create a bunch of
pages, link them together, update all if one change occurs, etc...)

Can someone help me with this concept?

Thanks
Marco
 
V

Vicente Raúl Plata Fonseca [XnT]

Ok, now im more confused then ever. Forget about the characters and
let's talk about concept.
As a programmer, you never want to program something that is going to
be slow for the user and intensive for the server.

My web page is not only made of tabs, theres also many pages. I dont
want to create a bunch of pages and then if i need to make a change;
go through all of them and change it. The idea is to create a master
html page and then upload the 'content' of the link into the master
html div. That way, if i needed to make a change to a link in the
master html, i do it only once.

The old way was to create a bunch of pages and link them together, and
if you needed to update a link, you had to do it in all the pages.
The new way, so i heard, is to use AJAX. But now, from your messages,
there's also php script.

I have no problems with PHP and AJAX, etc... i just needed to know
what is the best way to not create the old model (create a bunch of
pages, link them together, update all if one change occurs, etc...)

Can someone help me with this concept?

Thanks
Marco
Click to expand...

Hi,

By the accents, may I suppose you speak spanish. Maybe you would like
to check out my blog:

http://www.javanes.com/blogs/vicente/?p=16#more-16

Or the example itself and analyze it:

http://www.javanes.com/blogs/vicente/ejemplos/tabs.html

What I do is that the XMLHttpRequest object gets a plain file and uses
it as the inner html of the div. Therefore I can use &aacute; &eacute;
and so.

It doesn't use php nor jsp or anything... Just plain HTML with a bit
of Ajax ( however you obviously need a Web Server ).

Regards,
 
J

Josef Feit

SM wrote:

-- said:
This is my problem:
Those weird characters don't show up correctly! I mean the characters
with accent like: á é í ó ú ...

Why? and how do i fix that small problem?
Click to expand...
--< cut >--

Just one small note: these characters can be encoded in charsets:
utf-8
iso-8859-2
windows-1250

(and perhaps in some other).

JF
 
S

shimmyshack

Ok, now im more confused then ever. Forget about the characters and
let's talk about concept.
As a programmer, you never want to program something that is going to
be slow for the user and intensive for the server.

My web page is not only made of tabs, theres also many pages. I dont
want to create a bunch of pages and then if i need to make a change;
go through all of them and change it. The idea is to create a master
html page and then upload the 'content' of the link into the master
html div. That way, if i needed to make a change to a link in the
master html, i do it only once.

The old way was to create a bunch of pages and link them together, and
if you needed to update a link, you had to do it in all the pages.
The new way, so i heard, is to use AJAX. But now, from your messages,
there's also php script.

I have no problems with PHP and AJAX, etc... i just needed to know
what is the best way to not create the old model (create a bunch of
pages, link them together, update all if one change occurs, etc...)

Can someone help me with this concept?

Thanks
Marco
Click to expand...

wherever the content is, that will need editing, database, flat html
files, php files, wherever, Ajax doesnt solve that.
Before ajax people were using css to create a page with a "display"
div, and 17 divs hidden from view, the links swopped the content.
This way is great, 1 http request, with 17x more actual content, so
the overhead in terms of bytes is also very low (<<17x)
Now with Ajax, people have started to create millions of html files,
each with a small amount of html, valid in the main page's context,
but not really valid by itself, they even have a little classes in
there
<li class="list white">item 1</li>
<li class="list grey">item 2</li>
<li class="list white">item 2</li>
and so on....
this in its own way doesnt help the speed of the website, makes it
harder to maintian to history and state of the application and will
make it hard to change the website later to whatever comes after AJAX,
good old fashioned html probably.
It's more of a fashion statement, than a real solution fit to meet a
need that nothing else is meeting.

If you use a datastore, with an MVC type approach, you can keep the
data/content separate from the markup, if your site changes you can
make a change to a single file, perhaps a few, without the need to
revist the data, or know where it appears on the site.

The webpage you are describing seems best suited at the moment to have
a single point of "dat" perhaps a php file which uses a database, so
that you can scale the website up without gathering thousands of
partial_content html files.
You need to decide how to process the data into the markup you need,
for that use some kind of template system, just a few empty markup
pages with placeholders which represent where the data will be used.
All the time keeping separation of content from markup from styles.
You might not feel your website will scale too much, why not have the
css driven appraoch then
<div id="content">
<div id="section1"></div>
<div id="section2 hide"></div>
<div id="section3 hide"></div>
<div id="section4 hide"></div>
</div>
now to see section3, you remove className hide from section3 and add
it to the section (section1) that does not have hide in it. It's super
fast and is great for a small site with 20 pages.
The links might be of the form
http://server.com/section1/
http://server.com/section2/
you can have a rewrite that takes the section number and sends it to a
php script quietly
ReWriteRule ^/?(section[0-9]{1,2})/? /index.php?page=$1 [L]

unobtrusive javascript rewrites the links so that they become
http://server.com/#section1
http://server.com/#section2
so that a javascript enabled browser can use the anchor to show/hide,
while a non javascript browser gets index.php to hide/show each
section via the use of some php
The great thing is that this approach degrades well and is accesssible
with no further effort.
It's fast (light on requests with worst case scenario of one request
per click supporting caching), is easy to gather a history, the
content is not distributed in many files, but can be if you like.

Ajax has its uses, but there are mature technologies to deal with
templating, (xslt/templating engines) wheres the techniques for
dealing with scattered contextless content in files of non-descriptive
names is not so mature (yet)

I guess I am only a fan of ajax where it really produces cool
improvements, like online shopping experience, or live working with a
database. Even there jetty/comet/continuations is nicer.
 
S

SM

Ok, now im more confused then ever. Forget about the characters and
let's talk about concept.
As a programmer, you never want to program something that is going to
be slow for the user and intensive for the server.
Click to expand...
My web page is not only made of tabs, theres also many pages. I dont
want to create a bunch of pages and then if i need to make a change;
go through all of them and change it. The idea is to create a master
html page and then upload the 'content' of the link into the master
html div. That way, if i needed to make a change to a link in the
master html, i do it only once.
Click to expand...
The old way was to create a bunch of pages and link them together, and
if you needed to update a link, you had to do it in all the pages.
The new way, so i heard, is to use AJAX. But now, from your messages,
there's also php script.
Click to expand...
I have no problems with PHP and AJAX, etc... i just needed to know
what is the best way to not create the old model (create a bunch of
pages, link them together, update all if one change occurs, etc...)
Click to expand...
Can someone help me with this concept?
Click to expand...
Thanks
Marco
Click to expand...

wherever the content is, that will need editing, database, flat html
files, php files, wherever, Ajax doesnt solve that.
Before ajax people were using css to create a page with a "display"
div, and 17 divs hidden from view, the links swopped the content.
This way is great, 1 http request, with 17x more actual content, so
the overhead in terms of bytes is also very low (<<17x)
Now with Ajax, people have started to create millions of html files,
each with a small amount of html, valid in the main page's context,
but not really valid by itself, they even have a little classes in
there
<li class="list white">item 1</li>
<li class="list grey">item 2</li>
<li class="list white">item 2</li>
and so on....
this in its own way doesnt help the speed of the website, makes it
harder to maintian to history and state of the application and will
make it hard to change the website later to whatever comes after AJAX,
good old fashioned html probably.
It's more of a fashion statement, than a real solution fit to meet a
need that nothing else is meeting.

If you use a datastore, with an MVC type approach, you can keep the
data/content separate from the markup, if your site changes you can
make a change to a single file, perhaps a few, without the need to
revist the data, or know where it appears on the site.

The webpage you are describing seems best suited at the moment to have
a single point of "dat" perhaps a php file which uses a database, so
that you can scale the website up without gathering thousands of
partial_content html files.
You need to decide how to process the data into the markup you need,
for that use some kind of template system, just a few empty markup
pages with placeholders which represent where the data will be used.
All the time keeping separation of content from markup from styles.
You might not feel your website will scale too much, why not have the
css driven appraoch then
<div id="content">
<div id="section1"></div>
<div id="section2 hide"></div>
<div id="section3 hide"></div>
<div id="section4 hide"></div>
</div>
now to see section3, you remove className hide from section3 and add
it to the section (section1) that does not have hide in it. It's super
fast and is great for a small site with 20 pages.
The links might be of the formhttp://server.com/section1/http://server.com/section2/
you can have a rewrite that takes the section number and sends it to a
php script quietly
ReWriteRule ^/?(section[0-9]{1,2})/? /index.php?page=$1 [L]

unobtrusive javascript rewrites the links so that they becomehttp://server.com/#section1http://server.com/#section2
so that a javascript enabled browser can use the anchor to show/hide,
while a non javascript browser gets index.php to hide/show each
section via the use of some php
The great thing is that this approach degrades well and is accesssible
with no further effort.
It's fast (light on requests with worst case scenario of one request
per click supporting caching), is easy to gather a history, the
content is not distributed in many files, but can be if you like.

Ajax has its uses, but there are mature technologies to deal with
templating, (xslt/templating engines) wheres the techniques for
dealing with scattered contextless content in files of non-descriptive
names is not so mature (yet)

I guess I am only a fan of ajax where it really produces cool
improvements, like online shopping experience, or live working with a
database. Even there jetty/comet/continuations is nicer.
Click to expand...

Wow! Ok i definitely need to do more research and specially read on
all the ways to create web pages. Maybe the good old fashion way is
good enough for my webpage.
Is there a good book you could recommend on the concept of creating
web pages with the new technologies, like php, ajax, etc...

Thanks
Marco
 
S

SM

Wow! i definitely need to go and read about this. Or maybe i should
just use good old html programming.
Is there a good book you could recommend on how to create web pages in
this new internet era?
 
A

ASM

SM a écrit :
I have no problems with PHP
Click to expand...

You seem to ...
didn't you hear about include() ?

Include in each page the menu (and its links to fix) written in an alone
external file to main pages.
and AJAX
Click to expand...

Even with AJAX (what is exactly AJAX ?) you can use PHP or other
sever-side languages.

Anyway, whatever with what you build your pages you must in first to
have all your code served (headers) in the charset they are written.

Then you'll be allowed to use XMLHttpRequest to feed the one or the
other part of your page without having to load another complete page.
what is the best way to not create the old model
Click to expand...

Which one old model ?
this in frameset ? (what you try to reproduce via XHR)
(create a bunch of
pages, link them together, update all if one change occurs, etc...)
Click to expand...

Why to update all files if the change was in another alone file included
in all of them ?
Server side inclusion is a basic feature in very old SSI, for instance.
 
L

-Lost

Vicente said:
Hi,

By the accents, may I suppose you speak spanish. Maybe you would like
to check out my blog:

http://www.javanes.com/blogs/vicente/?p=16#more-16

Or the example itself and analyze it:

http://www.javanes.com/blogs/vicente/ejemplos/tabs.html

What I do is that the XMLHttpRequest object gets a plain file and uses
it as the inner html of the div. Therefore I can use &aacute; &eacute;
and so.

It doesn't use php nor jsp or anything... Just plain HTML with a bit
of Ajax ( however you obviously need a Web Server ).
Click to expand...

Instead of testing for HTTP only statuses, you should verify the
responseText exists, or the readyState is at the point you require. At
least for a simple tab switcher, relying on an HTTP status code is not
required.

This same type of thing could easily have been done with DIVs and CSS
though. Hide all the content to begin with, then use JavaScript to
display the element, depending on which tab was clicked.

For example, http://www.devpro.it/bytefx/ uses a very similar method.
 
L

-Lost

SM said:
Wow! i definitely need to go and read about this. Or maybe i should
just use good old html programming.
Is there a good book you could recommend on how to create web pages in
this new internet era?
Click to expand...

See my response, in this thread, to Vicente Raúl Plata Fonseca [XnT].

Basically, you could do the same thing via plain ole' DHTML.

Now, if you were writing a front-end to a database that had to refresh
the details of each item, then use an XMLHttpRequest.

For a little user interface though, can the AJAX.

See http://www.devpro.it/bytefx/ for a similar example.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Survey details won't go through using php, ajax, Mysql 2
Sort by number of characters 1
I want to Display Excel As HTML In js 2
How do I fix this issue in sqaurespace code block? 1
Add Image and label dynamically inside the dropdown 2
Check forms With JavaScript 1
AJAX and character 3
Only one table shows up with the information 2

Members online

No members online now.
Total: 1,439 (members: 0, guests: 1,439)
Robots: 326

Forum statistics

Threads
474,161
Messages
2,570,892
Members
47,431
Latest member
ElyseG3173

Latest Threads

Top