Roy'sWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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>
Roy'sWiki

User Tools

Site Tools

Page Tools
