読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Ajax・DOM】配下のliノードを全て削除し、DBを更新する

【今回の紹介】


DOMを使用し、対象の全ての配下ノードを削除し、DBへの更新処理を行う


ということを紹介します。

より具体的には、ulタグ配下の指定のリストを全て削除するという処理です。




※先日作ったWebtodoリストの機能を一部実装したものを

 少し整理したものです。

 興味がある方はこちら

 →Webtodoリスト
 
 

【処理の流れ】


①リスト名(h1要素)のイベントを拾う

②対象のh1からulとliのオブジェクトを取得

③すべてのliのIDし、配列に格納

④画面上からli要素を削除

⑤③の配列をカンマ区切りの文字列に分解

⑤④をDBの削除処理を行うphpにPOSTする

ざっくりなどこのような流れです。

【メモ】

①一度配列に格納してからカンマ区切りに分解する意味
 
 最初からカンマ区切りでいいではないか
 
 →for文を回すときに条件分岐(一回目だったらとか最後ならカンマつけないとか)

とか面倒な気がしました。

②配列の要素を繋いで一つの文字列にできる
 
 今回は配列の要素をカンマ区切りにして結合しましたが、
 
 行ったカンマ以外でも「と」とかいろいろできるみたいです。
 
 便利です。
 
③すべての子ノードを削除する処理
以下のサイトを参考に削除処理を実装しました。
参考にしたサンプル


【参考ソース】

<!--カテゴリー名(todo or doing or done)をダブルクリックすると配下の全リストを削除する処理-->
function allDel_li(obj){
	var allDel_ul=obj.nextSibling.nextSibling;
	var allDel_li=obj.nextSibling.nextSibling.childNodes;
		var allDel_lis=new Array();
		for(var i=allDel_li.length-1;i>=0;i--){
			allDel_lis.push(allDel_li[i].id);
			allDel_ul.removeChild(allDel_li[i]);

		}
	allDel_lis.join(',');
	delListAll(allDel_lis);
}

function delListAll(value){
 	var send_value=value;
 	alert(send_value);
 	var url="allDeLists.php";
	var httpobj =createHttpRequest();
	httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
  			alert(httpobj.statusText);
  			}
			};
	
		httpobj.open("POST",url);
		httpobj.setRequestHeader('Pragma', 'no-cache');
		httpobj.setRequestHeader('Cache-Control', 'no-cache');
		httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("send_value="+send_value);
}
||


>|php|
<?php
include("./log.php");
?>
<?php
  header('Content-Type: text/html; charset=UTF-8');
    $input=$_POST['send_value'];
    $mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "DB接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	$stmt=$mysqli->prepare("update t_01 set delflg='1' where id in($input) ") or exit("error");
	$stmt->execute();
	$mysqli->close();

?>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }