2013-06-01 39 views
0

我需要將此表單發佈到數據庫並檢索新添加的信息,而無需使用XHR進行刷新。使用AJAX更新部分動態表單(無刷新) - 無法使其工作

頁面加載時可以編輯一些初始元素,並可以通過按按鈕動態添加更多「新」元素(新用戶需要這樣做,因爲他們沒有預先存在的任務,它會跟蹤誰你與session_id)。

我已經在這裏超過13個小時了,有點累了。

代碼:

的index.php

<?php 
    //Sets unique session for the current visitor and keeps track of information for use with database 
    $time = time(); 
    $date = $today = date("Ymd"); 
    $id = $time + $date; 

    $id = session_id(); 
    if(empty($id)) session_start(); 

    //echo "SID: ".SID."<br>session_id(): ".session_id()."<br>COOKIE: ".$_COOKIE["PHPSESSID"]; 


?> 
<!doctype html> 
<html> 
    <head> 
    <meta charset='utf-8'> 
    <title>Simple To-Do List</title> 
    <?php 
     // Create connection via my connect.php file 
     require 'connect.php'; 

      // Create query 
      $query= "select * from checklist where SID = '".session_id()."'"; 
      $result = mysql_query($query); 

      // Create requisite array for checklist 
      $checklistItems = array(); 

      //Check to ensure query won't implode and is valid 
      if($result === FALSE) { 
      die(mysql_error()); 
      } 

      // Calculates number of rows from query 
      $num=mysql_numrows($result); 

      mysql_close($con); 

    ?> 
     <!-- javascript code to dynamically add new form fields as well as check\uncheck all boxes --> 
      <script src="//code.jquery.com/jquery-latest.min.js" language="javascript" type="text/javascript"></script> 
      <script src="addInput.js" language="Javascript" type="text/javascript"></script> 



    </head> 
    <body> 

     <h1>My To-Dos</h1> 


    <form name="checklist" id="checklist" class="checklist"> 
     <?php // Loop through query results 
       while($row = mysql_fetch_array($result)) 
        { 
        $entry = $row['Entry']; 
        $CID = $row['CID']; 
        $checked =$row['Checked']; 
       // echo $CID; 
        echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />"; 
        echo "<input type=\"checkbox\" name=\"checkbox$CID;\" id=\"checkbox$CID;\" value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')." />"; 
        echo "<br>"; 
        } 
     ?> 
     <div id="dynamicInput"></div> 
     <input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">     
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form> 


    </body> 
</html> 

connect.php

<?php 

// Create connection 
$con=mysql_connect("localhost","root",""); 
$selected = mysql_select_db("madmonk",$con); 

// Check connection 
if (mysqli_connect_errno($con)) 
{ 
    echo "Failed to connect to MySQL: " . mysql_connect_error(); 
} 

?> 

addInput.js

// Creates new dynamic elements within HTML body 
var counter = 0; 
var limit = 8; 

function addInput(divName){ 
    i=counter; i++; 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 

      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = " <input type='text'name='myInputs["+i+"]'><input type='checkbox' name='myInputs["+i+"]'><br>"; 
      document.getElementById(divName).appendChild(newdiv); 
      counter++; 
    } 
} 

//Checks\unchecks all checkboxes on the web page 
function checkAll(formname, checktoggle) 
    { 
     var checkboxes = new Array(); 
     checkboxes = document[formname].getElementsByTagName('input'); 
     for (var i=0; i<checkboxes.length; i++) { 
     if (checkboxes[i].type == 'checkbox') { 
     checkboxes[i].checked = checktoggle; 
      } 
     } 
    } 


//AJAX code to communicate with server without page refresh 
$('checklistSubmit').click(function(e) { 
    $(e).stopPropagation(); 

    $.post({ 
     url: 'processor.php', 
     data: $('#checklist').serialize(), 
     dataType: 'html', 
     success: function(data, status, jqXHR) { 
      $('div.successmessage').html(data); 
      //success callback function 
      alert (success); 
     }, 
     error: function() { 
      //error callback function 
      alert (failure); 
     } 
    }); 
}); 

我知道一個事實,我在上面的AJAX代碼有問題。這很關鍵,我無法得到這個工作。我從來沒有嘗試過像這樣做過,我決定嘗試並將我的想法付諸實踐並完成。啊。

processor.php

<?php 
require 'connect.php'; 

$entry = $_POST['entry']; 
$checked = $_POST['checked']; 


$num_items = count($entry); 
for ($i = 0; $i < $num_items; $i++) 
{ 
    $sql="INSERT INTO checklist (Entry, Checked, SID) 
VALUES ($checked, $entry, session_id()) WHERE SID = '".session_id()."'";} 


mysql_close($con); 

?> 

^這是粗糙的,完全未完成。

  1. 我如何通過MySQL和PHP動態域和循環通過他們管 到數據庫進行交互?

  2. 如何獲取它以更新index.php頁面,新值爲 新增無縫添加新項目?

  3. 如何獲得AJAX的工作?

對我來說非常具體。我對使用AJAX非常新穎。

回答

0

使用本... $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

檢查此鏈接http://api.jquery.com/jQuery.post/

+0

這對我來說還不夠,我無法單獨做任何事情。我在網上搜索這個程序,特別是使用動態生成的表單。 –

2

$('checklistSubmit')應該是$('#checklistSubmit')。您需要#才能查找ID。

此外,該點擊處理程序綁定應該位於$(function() { ... });之內,以便在窗體加載到DOM之前不會運行它。

您的成功函數包含$('div.successmessage').html(data);但我沒有在您的PHP中看到具有該類的DIV。

$(e).stopPropagation(); 

應該是:

e.stopPropagation(); 

因爲e不是一個DOM元素,它是一個事件。

+0

還沒有,我正在努力工作..我在這裏最後階段tbh有點不知所措。 –

+0

謝謝。我繼續補丁,所有的..做更多的測試。 –

+0

現在它的意思是 「對象[對象對象]沒有方法'stopPropagation'」 –

1

1)與動態磁場相互作用,只是給他們所有一類像class="dynamicField"myId = <whatever the id you care about is>或東西,然後加入

$(".dynamicField").change(function(){ 
    $.post("updateDB.php", 
    { 
     "dataToGoInDB": $(this).val(), 
     "idYouCareAbout": $(this).attr("myId") 
    }, 
    function(data){ 
     console.log(data.responseBackFromDB); 
    }, "json"); 

}); 

,然後有一個PHP頁面updateDB.php將看看POST變量,正確地SANITIZE他們避免SQL注入,然後做任何你需要做的數據庫。

如果您在創建DOM後添加動態領域的規劃,做這種方式來代替:

$("document").on("change", ".dynamicField", function(){ 
    $.post("updateDB.php", 
    { 
     "dataToGoInDB": $(this).val(), 
     "idYouCareAbout": $(this).attr("myId") 
    }, 
    function(data){ 
     console.log(data.responseBackFromDB); 
    }, "json"); 

}); 

將在.change重視.dynamicField的任何新的實例爲您服務。 (http://api.jquery.com/on/

2)要添加新的領域,嘗試的jQuery的DOM操作方法之一,像追加http://api.jquery.com/append/

3)見我說的話對我的回答#1

希望有所幫助。

0

你可以採取以下的方法來處理AJAX: -

  1. 認沽Ajax調用的函數。說initAjax()。
  2. 在initMyForm()函數中添加點擊或更改處理程序
  3. 加載文檔時執行此函數。

    $(document).ready(function(){ 
        initAjax(); 
        initMyForm(); 
    } 
    
  4. 裏面Ajax調用更新HTML表單的成功或失敗的回調比再次調用initMyForm();

  5. 示例代碼

    function initAjax(){ 
        $.ajax({ 
         url : 'myurl', 
         success : function(data){ 
          playWithData(data); 
         }, 
         failure : function(data){ 
         } 
        }); 
    } 
    
    function playWithData(data){ 
        //after playing with data 
        initMyForm(); 
    } 
    
    function initMyForm(){ 
    } 
    

    的console.log和谷歌Chrome的開發者工具(按F12)是很好的朋友。您也可以爲XHR請求設置斷點。這也將幫助您進行調試。

相關問題