Forum:

HTML Pages with CSS and JavaScript

Ajax and Firefox

Ranch Hand

Posts: 42

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
This is a html page with AJAX.
The code is working perfectly in Internet Explorer but is not working in Firefox.
The result is a simple JSON object. I also tried jQuery but the result was the same.
Does anybody know how to get the code working in FF?

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function ajaxRequest(){
                var URL = "http://maps.google.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false";
                var container = document.getElementById("container_ID"); //destination of returned data
                var request = false;
                if (window.xmlhttprequest) {
                    request = new xmlhttprequest();
                }
                else if (window.ActiveXObject) {
                    try {
                        request = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e){
                        try{
                            request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e){}
                    }
                }
                request.open("GET", URL, true);
                request.onreadystatechange = function() {
                    if (request.readyState == 4) { // readyState, see below
                        container.innerHTML = request.responseText;
                    }
                }
                request.send(null);
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="ajaxRequest()">test</button><br>
        <div id="container_ID"/>
    </body>
</html>

Thanks,
Roman

SCJP 6, SCWCD J2EE 5 http://www.compcoding.com/

David Newton

Author

Posts: 12617

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just out of curiosity, what happens if you use <div></div> instead of <div/>?

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

<div/> is not valid and will not work.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Roman Mazur

Ranch Hand

Posts: 42

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

"<div/> is not valid and will not work. "

Are you saying that the code is not working in FF because of the div?

SCJP 6, SCWCD J2EE 5 http://www.compcoding.com/

David Newton

Author

Posts: 12617

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What else would "<div/> is not valid and will not work" mean?! Did you even try it?

Roman Mazur

Ranch Hand

Posts: 42

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I changed the div in the code but the result is the same (it is working in IE but not in FF)

Roman

SCJP 6, SCWCD J2EE 5 http://www.compcoding.com/

David Newton

Author

Posts: 12617

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I find that difficult to believe; can you access the div from the Firebug console?

Roman Mazur

Ranch Hand

Posts: 42

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
The div is not that important. You can display the result in different way like javascript alert().
I think the point is that the request object is null in FF.

Roman

SCJP 6, SCWCD J2EE 5 http://www.compcoding.com/

David Newton

Author

Posts: 12617

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Well if you're not even making a *request* properly, sure, I guess it would have been good to include that info earlier.

I haven't done Ajax w/o a framework for years--no point, so I won't be able to help with your JavaScript code.

Karthik Shiraly

Bartender

Posts: 1210

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Roman Mazur wrote:
I think the point is that the request object is null in FF.

Note the case. It should be
request = new XMLHttpRequest();

Roman Mazur

Ranch Hand

Posts: 42

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I changed it but it didn't help.
This is the current code:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function ajaxRequest(){
                var URL = "http://maps.google.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false";
                var container = document.getElementById("container_ID"); //destination of returned data
                container.innerHTML = 'test container';
                var request = false;
                if (window.xmlhttprequest) {
                    //request = new xmlhttprequest();
                    request = new XMLHttpRequest(); 
                }
                else if (window.ActiveXObject) {
                    try {
                        request = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e){
                        try{
                            request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e){}
                    }
                }
                request.open("GET", URL, true);
                request.onreadystatechange = function() {
                    if (request.readyState == 4) { // readyState, see below
                        container.innerHTML = request.responseText;
                    }
                }
                request.send(null);
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="ajaxRequest()">test</button><br>
        <div id="container_ID">
        div container
        </div>
    </body>
</html>

SCJP 6, SCWCD J2EE 5 http://www.compcoding.com/

David Newton

Author

Posts: 12617

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

...

if (window.xmlhttprequest) {

Seriously, why wouldn't you use a framework and skip all this manual, obviously error-prone stuff?

Karthik Shiraly

Bartender

Posts: 1210

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Roman Mazur wrote:I changed it but it didn't help.

Noticed the other mistake now, again in the case. Should be:
if (window.XMLHttpRequest)...

There is no entity named "xmlhttprequest" in window either - it'll always be false.

I too feel that if you're going to use ajax a lot, better to use one of the frameworks - jquery, dojo, etc.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Karthik Shiraly wrote:I too feel that if you're going to use ajax a lot, better to use one of the frameworks - jquery, dojo, etc.

Seriously! All this code usually boils down to a single statement when using jQuery.

[Asking smart questions] [About Bear] [Books by Bear]

Eric Pascarello

author

Posts: 15385

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That code should fail in any browser that has good security measures set.

JavaScript has a same origin policy. That means you can not call or interact with other domains. I am betting the error message you are getting is access denied.

You are trying to call a URL that is on a different domain with Ajax. That is not going to happen without a proxy. Most web services now support JSONP and some browsers support CORS.

Eric

Roman Mazur

Ranch Hand

Posts: 42

posted 13 years ago