添加和更新不復制空元素 - jQuery的/ PHP

學習的目的，我創建了一個簡單的應用程序，基本上通過$.post增加值到數據庫，並返回在同一時間使用JSON更新的結果。添加和更新不復制空元素 - jQuery的/ PHP

最大的問題是，增加和更新時，與空元素更新。例如：如果我已經添加了5個項目，那麼當添加一個項目時，它將刷新並返回5個已經有的項目，外加5個空項目和一個項目到發送值的末尾。

下面是jQuery的發送的代碼：

send_btn.bind('click', function() { 

    var that = $(this), 
     input_val = input_word.find('input').val(); 

    that.find('.wrp').css('margin-left', -152); 

    $.post('post.php', { palavra: input_val }, function (data) { 
     console.log(data); 
     that.find('.wrp').css('margin-left', 0); 
     update(); 
    }); 

});

下面是接收信息的PHP的文件：post.php

$_palavra = $_POST['palavra']; 
$query = mysql_query("INSERT INTO `glaubersampaio`.`postit` (`ID`, `PALAVRA`, `MOSTRAR`) VALUES (NULL, '".$_palavra."', '1');");

update()功能：

function update() { 
    $.getJSON('request.php', function (data) { 
     for (i = 0; i < data.length; i++) { 
      $('<li class="postit" id="postit-' + data[i].id + '"></li>').appendTo(quadro.find('ul')); 
      $('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>'); 
      $('<div class="remover">REMOVER?</div>').appendTo('#postit-' + data[i].id); 

     } 
    }) 
     .done(function() { 
     quadro.find('.loader').hide(); 
    }); 
}

的PHP請求文件：request.php

$query = mysql_query("SELECT * FROM `postit`"); 
$dados = array(); 

while($a = mysql_fetch_array($query)) { 

    $ID = $a['ID']; 
    $PALAVRA = $a['PALAVRA']; 
    $MOSTRAR = $a['MOSTRAR']; 

    array_push($dados, array("id"=>$ID, "palavra"=>$PALAVRA, "mostrar"=>$MOSTRAR)); 

} 

echo json_encode($dados);

來源

2013-07-27 Gláuber Sampaio

問題在於update()函數。假設你已經有5個項目在你的列表中，然後你添加一個新的，它被保存在數據庫中，然後調用update（）來查詢表中的所有數據，所以你的JSON響應包括你以前的5個項目加上新項目，現在你通過所有這些，把它們添加到您的列表，追加循環意味着他們的最後一個元素後添加，使原來的5加查詢中的5，你的新項目是你在表中看到的結果。

爲什麼新的5空？因爲你用這條線來創建一個新項目：

$('<li class="postit" id="postit-' + data[i].id + '"></li>')

，但你已經與該ID的項目，所以產生無效的HTML標記，當你試圖在此處設置的內容：

$('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>');

只有具有Id的第一個元素纔會被修改。

會有什麼解決辦法？你有幾個選擇。第一種方法是在添加請求查詢中的元素之前清空列表，以便清除當前項目並從查詢數據中重新填充完整表格。

$.getJSON('request.php', function (data) { 
    quadro.find('ul').empty(); 
    for (i = 0; i < data.length; i++) { 
     $('<li class="postit" id="postit-' + data[i].id + '"></li>').appendTo(quadro.find('ul')); 
     $('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>'); 
     $('<div class="remover">REMOVER?</div>').appendTo('#postit-' + data[i].id); 
    } 
})

但更有效的方法將是某種方式得到了在你的桌上最年長的ID的引用，並將其發送到request.php用一個id大於只返回元素。喜歡的東西

update()功能

var lastID = 0; 
function update() { 
    $.getJSON('request.php', {lastID: lastID}, function (data) { 
     for (i = 0; i < data.length; i++) { 
      //apend element 
      if(i == data.length-1) 
       lastID = data[i].id; 
     } 
    }); 
}

而且在request.php

$lastID = isset($_POST['lastID']): $_POST['lastID'] : 0; 
$query = mysql_query("SELECT * FROM `postit` WHERE ID > $lastID ORDER BY ID ASC");

來源

2013-07-27 07:01:35

添加和更新不復制空元素 - jQuery的/ PHP

回答

相關問題