Question

I’m working on a simple project with 1 javascript file and 1 php file. I am trying to use ajax to call some php code, which will then display text onto a lightbox. My problem is that I am receiving the following error:

This error points to my php file.

"NetworkError: 404 Not Found - http://localhost/folder/folder/dictionary.php"

I’ve checked (and double-checked) all my code, but I don’t know how to fix this error. Could someone please help me? I will provide my JavaScript and PHP code below:

JavaScript:

$(document).ready(function() {
    $("#SearchField").submit(function(e) {  
        e.preventDefault(); 

        // grabs all post variables in the form
        var info = $(this).serialize();

        $.post('dictionary.php', info, function(data) {
            $('.DictionaryContentWrapper').append(data);
        });

        // prevent server from refreshing page
        return false;   
    });
});

PHP:

$input = $_POST['input'];
echo $input;

Directory Structure:

index.php
Widget
  - **input.js**
  - getURL.php
  - **dictionary.php**
lightbox
  - lightbox.css
  - lightbox.js

Answer 1

An easy solution would be to use the absolute path relative to the root of your web-server.

Something like:

$.post('/Widget/dictionary.php', info, function(data) {

However, that assumes that your index.php resides in the root directory of the website – http://localhost/index.php – but that is not very clear from the information you have posted: The error message does not seem to fit the directory structure.

Edit: If you are calling your script from your index.php, you can also use:

$.post('Widget/dictionary.php', info, function(data) {    // path relative to index.php