Roy'sWiki

User Tools

Site Tools

Trace: • giroux • roy

Sidebar

Vincent:

Christian:

christian:roy

copié/collé de cr_03.html

Pourquoi le html n'est pas interprété ??

<html> <head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
p,details {margin-block-start:5px;margin-block-end:5px;}
h3{margin-block-end:5px;}
#data_zone, #html_zone {
  display:block;
  border: 4px solid blue;
  overflow: auto;
  resize: auto;
}
#data_zone {
  width:100%;
  height: 5%;
}
#html_zone {
  height: 30%;
}
.ul {margin-bottom:0px;padding-bottom:0px;}
.ol {position:relative;margin-left:16px;margin-top:-14px;width:50px;background-color:white;padding-left:10px;border: 1px solid blue;}
.in { width:10%; border: 2px solid blue;}
#html_zone.hl {border: 4px solid green;}
th, td    { text-align:left; border: 1px solid grey;}
td input  { width:100%; border: none;}
th button { height:100%; width:100%; border: 2px solid blue;}

td div    { overflow:hidden; max-height:140px;}
img {
  max-width: 100%;
  height: auto;
}

#laliste {width:100%;}
#laliste th {width:5%;}
.qa, .qi, .qb, .qs {font-family:Arial; font-size:14px; padding:0 2px }
.qb, .qi {border:1px solid blue;}
.qp {
/*flex: auto; 1;*/
  background-color: white; height:40px; 
  border: 2px solid blue;
  padding:2px;
  margin:1px;
}
</style>

</head>

<body> 

<div style="display:flex; width:100%; position: sticky; top: 0; height:60px; background-color: #fefbd8; ">
	<p class="qp" style="max-width:110px;">
		<span class="qs">"Q"</span>
		<button class="qb" onclick="newForm()">new</button>
		<button class="qb" onclick="modForm()">mod</button>
		<br><span class="qs" id="uid"></span>
	</p>
	<p class="qp">
		<button class="qb" style="width:100%;" onclick="delForm()">del</button>
		<br><input class="qi" id="del" style="width:50px;" type="text" value="">
	</p>
	<p class="qp">
		<span class="qs" style="width:50px;">lien</span>
		<br><span class="qs" id="lien"></span>
	</p>
	<p class="qp">
		<span class="qs">id</span>
		<br><input class="qi" id="id" style="width:100%;" type="text" value="">
	</p>
	<p class="qp">
		<span class="qs">créé</span>
		<br><span class="qs" id="créé"></span>
	</p>
	<p class="qp">
		<span class="qs">check</span>
		<br><input class="qi" id="check" style="width:50px;" type="text" value="">
	</p>
	<p class="qp">
		<span class="qs">description</span>
		<br><input class="qi" id="descr" type="text" value="">
	</p>
	<p class="qp">
		<button class="qb" style="width:100%; text-align: center;" onclick="openRef()">référence</button>
		<br><input class="qi" id="reference" type="text" value="">
	</p>
</div>

<!–/div–> 

<div class="ul"><textarea id="data_zone" style="resize: vertical;" name="data" onclick="data_zone_copy()" onkeyup="data_zone_copy()" placeholder="Drag data to this Drop Zone ..."></textarea>
<div class="ol"><b>data:</b></div></div>
<div class="ul"><div id="html_zone" style="resize: vertical;" ondrop="dh(event)" ondragover="doh(event)" ondragleave="dlh(event)"></div>
<div class="ol"><b>html:</b></div></div>

<!–div style=“position: sticky; >xxxxxxx</div–> 

<details open>
	<summary>Liste
		<input type="text" name="param" id='param' placeholder='id=&descr=' />
		<button type="button" onclick="getJSON()">getJSON</button>
		<button type="button" onclick="clearData()">effacer</button>
	</summary>
	<div style="overflow-x:auto;" id='liste'></div>
</details>

<script> Opération sur la base de données function sendForm (chain, del){ fd = new FormData(); fd.append('chain',chain); fd.append('html',document.getElementById(“html_zone”).innerHTML); fd.append('pid',document.getElementById(“id”).value); fd.append('del',del); fd.append('check',document.getElementById(“check”).value); fd.append('descr',document.getElementById(“descr”).value); fd.append('ref',document.getElementById(“reference”).value); var xhr = new XMLHttpRequest(); xhr.onreadystatechange=getLastId; xhr.open(“POST”,”post.php“); xhr.onprogress = function(e){if(e.lenghtComputable){console.log(e.loaded+ ” / “ + e.total);}}; xhr.send(fd); console.log(fd); } function getLastId(){ if (this.readyState == 4 && this.status == 200) { var response=this.responseText; var responseJson=JSON.parse(response.substring(response.indexOf('{'))); document.getElementById(“uid”).innerHTML=responseJson.lastId; } } function newForm(){ POST : sauve dans la base 

	sendForm (0, "F");
	document.getElementById("del").value="F";
	document.getElementById("uid").innerHTML="0";
	$("#data_zone").val('');
	$("#html_zone").empty();
	return false;
}
function modForm(){
	sendForm (document.getElementById("uid").innerHTML, "F");
	document.getElementById("del").value="F";
}
function delForm(){
	sendForm (document.getElementById("uid").innerHTML, "Z");
	document.getElementById("del").value="Z";
}
/*function delForm(){ // Update le champ delete pour le uid
	fd = new FormData();
	fd.append('uid',document.getElementById("uid").innerHTML);
	fd.append('del',"T");
	//fd.append('del',document.getElementById("del").value);
	var xhr = new XMLHttpRequest();
	xhr.open("POST","update.php");
	xhr.send(fd);
	//console.log(fd);
	document.getElementById("del").value="T";
	return false;
}
*/

</script>

<script> Ouvre la référence function openRef() { window.open(document.getElementById(“reference”).value, ”“, “width=200,height=100”); var myWindow = window.open(document.getElementById(“reference”).value, “MsgWindow”, “width=200,height=100”); 

	//myWindow.document.write("<div>This is 'MsgWindow'. I am 200px wide and 100px tall!</div>");
}

</script>

<script> Drop zone function dh(ev){ var output={}; var foundA=false; ev.preventDefault(); $(”#html_zone“).removeClass('hl'); $(”#html_zone“).empty(); if (ev.dataTransfer.items) { output.html = ev.dataTransfer.getData('text/html'); if(output.html){ $(”#html_zone“).html(output.html); document.getElementById(“html_zone”).innerHTML=output.html; 

			$("#data_zone").val(output.html); 	//document.getElementById("data_zone").value=output.text;
			foundA=output.html.search("</a>")>0;
		}
		//output.text = ev.dataTransfer.getData('text');
		//if(output.text) $("#data_zone").val(output.text);//document.getElementById("html_zone").value=output.text;
		output.url=ev.dataTransfer.getData('text/uri-list');
		if(output.url&&!foundA) $("#html_zone").prepend('<a href="'+output.url+'">'+output.url+'</a>');//document.getElementById("result_html").innerHTML+='<a href="'+output.url+'">'+output.url+'</a>';
		//if(output.url)$("#result_html").prepend('<a href="'+output.url+'">URL</a>');
		$("#data_zone").val($("#html_zone").html());
	}
	console.log(output);
}
// pour highlite
function doh(ev) {
	ev.preventDefault();
	$("#html_zone").addClass('hl');
}
function dlh(ev){
	$("#html_zone").removeClass('hl');
}	
function data_zone_copy() {
	$("#html_zone").html($("#data_zone").val());
}

function clearData(){
	$("#data_zone").val('');
	$("#html_zone").empty();
}

</script>

<script> GET : Obtenir et afficher la liste function displayJSON(){ console.log(this); if (this.readyState == 4 && this.status == 200) { document.getElementById(“liste”).innerHTML=this.responseText; … =unescape(this.responseText); 

		}
	}
	function getJSON(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange=displayJSON;
		xhr.open("GET","get.php?"+document.getElementById("param").value);
		xhr.send();
		return false;
	}

</script>

<script> Reproduire la ligne en zone éditable function whichElement(e) { var targ; if (!e) { var e = window.event; } if (e.target) { targ=e.target; } else if (e.srcElement) { targ=e.srcElement; } FAUDRAIT trouver la ligne cliquée à partir du haut du document 

// targ pointe sur le td, son parent est le tr, chilsNodes le set de td de la rangé
// vérifier que le targ est un td de la bonne classe, sinon monter
    if (targ.nodeName == "TD") {
	var c = targ.parentNode.childNodes; 
	document.getElementById("uid").innerHTML       = c[0].innerHTML;
	document.getElementById("lien").innerHTML      = c[1].innerHTML;
	document.getElementById("id").value            = c[2].innerHTML;
	document.getElementById("del").value       	   = c[3].innerHTML;
	document.getElementById("créé").innerHTML      = c[4].innerHTML;
	document.getElementById("check").value         = c[5].innerHTML;
	//document.getElementById("type").innerHTML      = c[6].innerHTML;
	document.getElementById("descr").value         = c[6].innerHTML;
	// pour annuler le div supplémentaire
	document.getElementById("reference").value     = c[7].childNodes[0].innerHTML;
	document.getElementById("data_zone").value     = c[8].childNodes[0].innerHTML;
	document.getElementById("html_zone").innerHTML = c[8].childNodes[0].innerHTML;
	}
}

</script> </body>

christian/roy.txt · Last modified: 2020/04/15 16:41 by cotangente

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki