Question

I’ve searched for a solution for two days and I can’t take it anymore. I apologize in advance for the length of this question. I’m not trying to overwhelm anyone, I just wanted to make sure to include everything you might need to help me. Thanks in advance. So now for my question:

Situation:

On the left side of my Project Management page, I have two small forms. One to add Milestones, the other to add Tasks/Todos. On the right side of the page, I am showing the Project as it is being built (by adding milestones and tasks).

I am successfully submitting the forms via Ajax. But NO MATTER WHAT I DO, I am unable to have the “results” (right side of the page) reflect the updated content without having to refresh the page (which defeats the purpose of using ajax in the first place). It seems that I am unable to understand the .ajaxComplete or how to properly fill out the success: portion of the $.post command.

I have tried too many variations to post here, so I’ll just include my latest attempt:

javascript

$(document).ready(function() {
    $("#results").load("i/getAllInfo.class.php");

    $('#loader').hide()

    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).fadeOut(1000);
    });
});

function addMilestoneForm() {
    $.post("i/addMilestone.php",
    $("#addMilestoneForm").serialize());
};

function addTodoForm() {
    $.post("i/addTodo.php",
    $("#addTodoForm").serialize());
};

PHP

i/getAllInfo.class.php

<?php
include("database.php");

class getAllInfo
    {
        public function getProjectInfo()
            {
                global $db;
                $projectId = "1";
                $qProject = sprintf("SELECT * FROM projects WHERE id = '%s'",
                                    mysql_real_escape_string($projectId));
                $qProjectResult = mysql_query($qProject);
                return $qProjectResult;
            }

        public function getMilestoneInfo($projectName)
            {
                global $db;
                $qMilestone = sprintf("SELECT * FROM milestones WHERE projectName = '%s' AND complete = 0",
                                mysql_real_escape_string($projectName));
                $rMilestone = mysql_query($qMilestone);
                return $rMilestone;
            }

        public function getTodoInfo($msId)
            {
                global $db;
                $qTodo = sprintf("SELECT * FROM todos WHERE id = '%s' AND complete = 0",
                            mysql_real_escape_string($msId));
                $rTodo = mysql_query($qTodo);
                return $rTodo;
            }
    }
$g = new getAllInfo();

$pInfo = mysql_fetch_object($g->getProjectInfo());
$theProjectName = $pInfo->projectName;
$theProjectSummary = $pInfo->summary;

$rM = $g->getMilestoneInfo($theProjectName);
echo '<h2>' . $theProjectName . '</h2>';

while ($row = mysql_fetch_object($rM))
    {
        $msId = $row->id;
        $milestone = $row->milestone;
        $msEtaTime = $row->etaTime;
        $msEtaScope = $row->etaScope;
    ?>
        <ul style="float: left; clear: left; width: 85%; margin-left: 2%; margin-right: auto; margin-bottom: 10px;">
                <p><b><?php echo $milestone; ?></b><br />
                ETA: <?php echo $msEtaTime . ' ' . $msEtaScope; ?></p>

            <?php
                $rT = $g->getTodoInfo($msId);
                while ($row = mysql_fetch_object($rT))
                    {
                        $todo = $row->todo;
                        $dep = $row->dependency;                                
                ?>
            <li>
                <span>
                    <a href="todos/index.php?todo=<?php echo $todo; ?>"><?php echo $todo; ?></a>
                    <span class="dependency">
                        <span class="innerDep"><?php echo $dep; ?></span>
                    </span>
                </span>
            </li>
                <?php
                    }; ?>
        </ul>
    <?php
    }; ?>

i/addMilestone.php

<?php
include("database.php");
global $db;

$theProjectName = htmlentities($_POST['projectName']);
$milestoneName = htmlentities($_POST['milestoneName']);
$etaTime = htmlentities($_POST['milestoneEtaTime']);
$etaScope = htmlentities($_POST['milestoneEtaScope']);              

$query = sprintf("INSERT INTO milestones (projectName, milestone, etaTime, etaScope) VALUES ('%s', '%s', '%s', '%s')",
            mysql_real_escape_string($theProjectName),
            mysql_real_escape_string($milestoneName),
            mysql_real_escape_string($etaTime),
            mysql_real_escape_string($etaScope));

$result = $db->query($query);
if (!$result)
    {
        return false;
    }
else
    {
        return true;
    }
?>

i/addTodo.php

<?php
include("database.php");
global $db;

$milestoneId = htmlentities($_POST['addToMilestone']);
$todo = htmlentities($_POST['todoName']);
$etaTime = htmlentities($_POST['etaTime']);
$etaScope = htmlentities($_POST['etaScope']);

$query = sprintf("INSERT INTO todos (id, todo, etaTime, etaScope) VALUES ('%s', '%s', '%s', '%s')",
            mysql_real_escape_string($milestoneId),
            mysql_real_escape_string($todo),
            mysql_real_escape_string($etaTime),
            mysql_real_escape_string($etaScope));           

$result = $db->query($query);

if (!$result)
    {
        return false;
    }
else
    {
        return true;
    }
?>

HTML

the relevant code (two forms, result section, etc.)

<section id="content">
        <span id="loader"></span>
        <span id="alertBox"></span>
        <section id="accordion">
            <form id="addMilestoneForm" style="margin-bottom: 10px;" onsubmit="addMilestoneForm(); return false;">
                <fieldset>
                    <h4>Milestones</h4>
                    <ul>
                        <li>
                            <label for="milestoneName">Name: </label>
                            <input type="hidden" name="projectName" value="FML" id="projectName" />
                            <input type="text" name="milestoneName" value="" id="milestoneName" />
                        </li>
                        <li>
                            <label for="milestoneEtaTime">ETA: </label>
                            <input type="text" name="milestoneEtaTime" id="milestoneEtaTime" style="width: 55%;" />
                            <select name="milestoneEtaScope" id="milestoneEtaScope">
                                <option value="minutes">minutes</option>
                                <option value="hours">hours</option>
                                <option value="days">days</option>
                                <option value="weeks">weeks</option>
                                <option value="months">months</option>
                                <option value="years">years</option>
                            </select>
                        </li>
                    </ul>
                </fieldset>
                <fieldset>
                    <button type="submit" formname="addMilestoneForm">Add</button>
                </fieldset>
            </form>
            <form id="addTodoForm" onsubmit="addTodoForm(); return false;">
                <h4>Todo's</h4>
                <fieldset>
                    <ul>
                        <li>
                            <select name="addToMilestone" id="msSelect"></select>
                        </li>
                        <li>
                            <label for="todoName">Name: </label>
                            <input type="text" name="todoName" id="todoName" />
                        </li>
                        <li>
                            <label for="etaTime">ETA: </label>
                            <input type="text" name="etaTime" value="" />
                            <select name="etaScope">
                                <option value="minutes">minutes</option>
                                <option value="hours">hours</option>
                                <option value="days">days</option>
                                <option value="weeks">weeks</option>
                                <option value="months">months</option>
                                <option value="years">years</option>
                            </select>
                        </li>
                    </ul>
                </fieldset>
                <fieldset>
                    <input type="submit" value="Add" />
                </fieldset>
            </form>
        </section>
        <section id="results"></section>
    </section>

Answer 1

You just need to include a closure as your third parameter to $.post, i.e.

function addMilestoneForm() {
  $.post("i/addMilestone.php",
      $("#addMilestoneForm").serialize(),
      function(data, textStatus, jqXHR) {
         $('#results > ul').append(data);
      }
  );
};

Also, your wrapper for initializing jQuery should be like this

$(function() {
    $("#results").load("i/getAllInfo.class.php");

    $('#loader').hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).fadeOut(1000);
    });
});

Rather than

$(document).ready(function() {})