CODEWITHSUNDEEP
phphtmlajax
nasito90
nasito90

Reputation: 43

Linked list with PHP and AJAX

I'm having troubles when making a linked list in HTML, let me explain:

In HTML I have this two selects:

<!-- This select WORKS and read the opened projects from de database  -->
            <select name="project" id="project">
                <option value="0">Select a project</option>
                <?php if (isset($result2)): ?>
                    <?php foreach ($result2 as $res): ?>
                        <option value=<?php echo $res['c_project_id'] ?>><?php echo $res['d_name'] ?></option>
                    <?php endforeach ?>
                <?php endif ?>

            </select>

<!-- This doesn't work, but I want: When I select a project, the project's categories go here -->
                <select name="category" id="category">

                </select>

The REAL DATA are the next: Table PROJECT

c_project_id | d_name | d_description | n_budget | d_state
      1      |  Test  |  Test Project |    100   |  Open
      2      |  Web   |    Web APP    |   3000   |  Open
      3      | C Test |Closed Project |    100   | Closed
      4      | Certif.| Certificates  |   2500   |  Open

Table Categories (conected with table project)

c_category_id | d_name | d_description | c_project_id
     1        | General| General cat   |      1
     2        | Test   | Test cat      |      1
     3        | General| General cat   |      2
     4        | General| General cat   |      3
     5        | Nothing| Nothing cat   |      3
     6        |Program | Programming   |      2
...

I have a SELECT in html that takes the project name and ID, this works in the select nº1

$statement2 = $conexion->prepare("SELECT c_project_id, d_name FROM project WHERE d_state= 'Open'");
$statement2->execute();
$resultado2 = $statement2->fetchAll();

Now I want: When I "click" in the first select, the second select make the statement and fulfill the second select. For testing, I just wrote a simple option. I tried with AJAX and PHP but the 2nd option is empty:

AJAX: 

$( "#project" ).change(function() {
      var select = $( "#project option:selected" ).val();
      console.log(select); //just for testing that I took the value.
      $.ajax({
            type: "POST",
            url: "phpPage.php",
            data: { selectedProject : select } 
        }).done(function(data){
            console.log("Done");
            $("#category").html(data);
        });
    });

AND PHP:

if(isset($_POST["selectedProject"])){
        $proy = $_POST["selectedProject"];
        $output = "<option value='100'> Select your category </option>";

        if($proy != 0){
            $output.= "<option>" . $proy . "</option>"; 
        }

        echo $output;   
    }

But this return me nothing, all is empty.

FINALLY, when I tried to debug, I noticed that in one of the PHP responses, the HTML code () is been written at start of the page (in the response):

<option value='100'> Select your category </option><option>1</option> 
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
...

Sorry for that huge question, but I'm wasting a lot of time with that and I don't know what could happen. Thanks you!

Upvotes: 3

Views: 183

Answers (1)

IncredibleHat
IncredibleHat

Reputation: 4104

Lets look at the breakdown of what you have and want to do. First, you have an empty select element:

<select name="category" id="category">
    // empty
</select>

Then, you are tripping off an ajax call which returns data from your PHP. This ajax is simply taking all the returned html from the PHP and putting it in the middle of that above select:

$("#category").html(data);

Your PHP is where you are creating too much information on output. This is usually where its a good idea to isolate your "ajax php scripts" from normal full html build php scripts. So that you are only outputting what you need for that specific ajax call.

In your above PHP, you have:

if(isset($_POST["selectedProject"])){
    $proy = $_POST["selectedProject"];
    $output = "<option value='100'> Select your category </option>";
    if($proy != 0){
        $output.= "<option>" . $proy . "</option>"; 
    }
    echo $output;
}
// you must have more page generation below this based on your Q (?)

You can either isolate the above code into a new ajax response script (include any needed db actions and pull of data from the database based on the POST arg value, etc).... OR, you can add exit; after your echo $output;... so long as no other extra html was being output BEFORE this if block.

if(isset($_POST["selectedProject"])){
    $proy = $_POST["selectedProject"];
    $output = "<option value='100'> Select your category </option>";
    if($proy != 0){
        $output.= "<option>" . $proy . "</option>"; 
    }
    echo $output;
    exit; // <-- halt so none of the other following html spills out
}

Upvotes: 2

Related Questions