2011-07-07 13 views
0

私は2日間ソリューションを検索しましたが、もう使用できません。私はこの質問の長さについて事前に謝罪します。私は誰を圧倒しようとはしていない、私はあなたが私を助けるために必要なすべてを含めることを確認したかった。前もって感謝します。だから今、私の質問のために:jQueryとAjax

状況:私のプロジェクト管理ページの左側に

、私は二つの小さな形態を有します。マイルストーンを追加する1つ、Tasks/Todosを追加するもう1つ。ページの右側には、プロジェクトが作成されている間に(マイルストーンとタスクを追加することによって)プロジェクトが示されています。

私はフォームをAjax経由で正常に提出しています。しかし、私は何をするにせよ、私は "結果"(ページの右側)に更新されたコンテンツを反映させることができません。ページをリフレッシュする必要はありません(最初はajaxを使用する目的に反する)。 .ajaxCompleteを理解できないか、または$.postコマンドのsuccess:部分を正しく記入する方法がわかりません。

私はここに投稿するためにあまりにも多くのバリエーションを試してみましたので、私はちょうど私の最新の試み含めます:

をPHP

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()); 
}; 

を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

関連するコード(二つの形態、結果セクション、等)

<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> 

答えて

1

あなたはクロージャを含む必要がありますR $ .postの三番目のパラメータ、すなわち

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

はまた、jQueryのを初期化するためのラッパーは、{)(この `関数addMilestoneFormのように、この

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

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

よりもむしろ

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

ようにする必要があります $ .post( "i/addMilestone.php"、 $( "#addMilestoneForm")。serialize()、 関数(data、textStatus、jqXHR){ $( "#results")。load( "i/getAllInfo.class.php"); //マイルストーンをUIに追加するためのここのコード } );私はそれを試みた...いいえサイコロ。私は何が欠けていますか? }; ' –

+0

はい、「i/addMilestone.php」の呼び出しが新しいマイルストーンのHTMLを返す方が効率的ですが、上記の例を適切に変更します。 –

+0

ありがとうございます!あなたはちょうど私の一日を作ったばかりです(そして、コードの正しいスニペットのために私のとんでもない長い探求を終了しました)。乾杯! –