Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

AJAX and characters


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;

On May 9, 8:02 pm, SM <servandomont@gmail.com> wrote:

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)
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: ...

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 :
    <?xml version="1.0" encoding="utf-8"?>

> 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>.

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.

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

--
Stephane Moriaux et son (moins) vieux Mac dj dpass
Stephane Moriaux and his (less) old Mac already out of date

SM wrote:
> 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,

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,

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

> very blablabla bla... You know what i mean.

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?

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...

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?

<snip>

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

Richard.

On May 9, 4:13 pm, "Richard Cornford" <Rich@litotes.demon.co.uk>
wrote:

---------------------
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

On May 10, 2:58 pm, SM <servandomont@gmail.com> wrote:

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)

On May 10, 10:41 am, shimmyshack <matt.fa@gmail.com> wrote:

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

On May 10, 2:10 pm, SM <servandomont@gmail.com> wrote:

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,

SM wrote:

--< cut >--
> 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?

--< 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

On May 10, 8:10 pm, SM <servandomont@gmail.com> wrote:

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.

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?
SM a crit :

> I have no problems with PHP

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

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

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...)

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.

--
Stephane Moriaux et son (moins) vieux Mac dj dpass
Stephane Moriaux and his (less) old Mac already out of date

Vicente Ral Plata Fonseca [XnT] wrote:

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.

--
-Lost
Remove the extra words to reply by e-mail.  Don't e-mail me.  I am
kidding.  No I am not.

SM wrote:
> 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?

See my response, in this thread, to Vicente Ral 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.

--
-Lost
Remove the extra words to reply by e-mail.  Don't e-mail me.  I am
kidding.  No I am not.

Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc