nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

AJAX breaks when published online

Seachmall

Hey,

I have an App that utilises AJAX. It works fine when offline but once I publish it online it no longer works. I'm using the Prototype framework and it updates the onCreate/onSuccess functions properly but it doesn't appear to actually be making a request or returning data.

I'm wondering if there are any settings on the server that could be preventing AJAX requests or must the problem be with my code. I'm using Hosting365's "Designer Hosting" package.

The URLs for the request have been updated correctly.

Thanks for any help.

Find more posts tagged with

development

web

php

javascript

ajax

Quick Links

Comments

techguy

Hey,

I had a similar problem when I published my app (CodeIgniter, jQuery ajax).

The ajax .GET query had something appended to the end which was accepted on my local server but was being rejected on the web.

I only spotted it after installing firebug.

Go install firebug and check the ajax requests url. Try copy/pasting that directly into the address bar and see what happens.

Thats how I fixed my problem anyway, hope it helps you.

EDIT: I know you are using Prototype but are you using a PHP framework also or .htaccess URL rewriting?

Seachmall

Hey,

I'm not using a framework or .htaccess URL rewriting. Looking at firebug the URL in the request is as it should be however I'm getting a 501 response ("Not Implemented"). Looking at the headers the method is "OPTIONS" (?!) as oppose to "POST". (I probably should have checked the status response code straight away, ah well. We live we learn.)

Why/How would this change? Is the request not generated client side? Does anyone have any ideas as to why this happens or how to fix this? Any help appreciated.

Thanks.

techguy

Seachmall wrote: »

Why/How would this change? Is the request not generated client side? Does anyone have any ideas as to why this happens or how to fix this? Any help appreciated.

Code snippet??

Seachmall

Not much to it,

new Ajax.Request(
        
        url,        // "http://www.mysite.ie/app/doSomething.php"
        
        {
        
        method: "post",
        
        postBody: post_value        // area_group_id=0&area_group_name=GROUPNAME&user_id=1

        }

);

That's pretty much it. Prototype does the rest which works perfectly locally.

Here's the request,

OPTIONS /app/doSomething.php HTTP/1.1
Host: www.mysite.ie
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-GB; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://mysite.ie
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-prototype-version,x-requested-with

Procasinator

It appears you are having problems with cross-site AJAX calls.

Read http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/, which applies to the browser you are using (according to your user-agent).

Maybe change the URL field to be relative, and not include the whole domain. So, say the page doing the AJAX request is on http://www.mysite.ie/page.ext, make the URL "/app/doSomething.php". In other words, have relative URLs.

This also makes the javascript more portable if you ever run under a different domain, re-use it on another site, etc.

Seachmall

That's it! I changed the URLs and it appears to be working now.

Thanks for the help lads, much appreciated.