views:

35

answers:

3

Hi, im beginning with Ajax, i have problem with including Ajax files. Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.

I haven't changed Ajax code except url for calling PHP function.

edit:

calling ajax files:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' /> 
<a href="JavaScript:Validate();"> Available?</a>
<span id="result"></span>
Email address: <input type="text" name="email" />
...

I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"

myValidation.js

function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}

function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}

This example is from mentioned book

A: 

Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?

Tomasz Kowalczyk
@Tomasz <script> tag is in <head section, and function call is embaded in html tag. Result shoud be in span tag.
phpEnthusiast
This works fine when ajax code is placed internaly in <head<script> section, problem is when i relocate ajax code in separated .js file
phpEnthusiast
@Tomasz: He's not binding anything. The JavaScript interpreter will look for a `Validate` function at the point when the user clicks the link, not sooner. (You're thinking of people prematurely trying to hook up handlers in a more modern way, e.g. Prototype's `observe` method and the underlying `addEventListener`/`attachEvent` it uses.)
T.J. Crowder
+1  A: 

You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:

  1. They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:

    function Validate() {
        // ...
    }
    

    not:

    <script type='text/javascript'>
    function Validate() {
        // ...
    }
    </script>
    

    I've seen the latter a fair bit.

  2. They put the JavaScript file in a location that doesn't match their script tag src.

  3. They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.

  4. They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.

  5. They're using a web server sensitive to permissions and the file doesn't have the right permissions.

In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.

For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.

T.J. Crowder
A: 

Problem solved.

In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz

phpEnthusiast