Json-Dialogelemente

Quellcode

// <![CDATA[
// mit GridLayout
function getStylesDialogElements(json2) {
"use strict";
let json2b = json2.replace(/---/g, "|");
let patterns = json2b.split('|');
let n = patterns.length; // Anzahl der Elemente

let s='';
s += '#wrapperdialog {'+"\n";
s += ' display: grid;'+"\n";
s += ' grid-template-columns: auto 1fr;'+"\n";
s += ' grid-template-rows: ';
// je nach Anzahl die Reihen definieren
for (let i=0; i<n; i++) {
s +='auto ';
}
s +="\n";

s += ' grid-column-gap:70px;'+"\n";
s += ' grid-row-gap:10px;'+"\n";
s += ' background-color:red;'+"\n";
s += '}'+"\n";
s += ' '+"\n";
s += '.fbox1 {'+"\n";
s += ' margin-right:10px;'+"\n";
s += '}'+"\n";
s += ' '+"\n";
s += '.fbox2 {'+"\n";
s += ' margin-right:10px;'+"\n";
s += '}'+"\n";
return s;
}
function createDialogElements(json1, json2) {
"use strict";
//alert(json1);
// alert(json2);

let customer = JSON.parse(json1);
// normales replace ersetzt nur den ersten Fall !!
let json2b = json2.replace(/---/g, "|");
let patterns = json2b.split('|');
let n = patterns.length; // Anzahl der Elemente

let s='';
s+=' <div id="wrapperdialog">'+"\n";

let captions = Object.keys(customer);
// dialoge
let index=1;
for(var j in customer){
let str_pat = patterns[index-1]; // hier noch string !!
//alert(str_pat);
let pat = JSON.parse(str_pat);
s+=' <label class="fbox1" for="ui' + index + 'Id">'+pat.caption+'</label>'+"\n";
if (pat.typ=='number') {
s+=' <input type="number" class="fbox2" min="'+pat.min+'" max="'+pat.max+'" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" />'+"\n";
}
else if (pat.typ=='text') {
s+=' <input type="text" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" />'+"\n";
}
else if (pat.typ=='-') {
s+=' <input type="text" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" readonly="readonly" />'+"\n";
}
if (pat.typ=='date') {
s+=' <input type="date" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" />'+"\n";
}
index++;
}
s+=' </div>'+"\n"; // wrapperDialog
return s;
}

// ]]>

Pattern der UI-Elemente

function getCustomerPatternFromDB() {
// PINDEX, CNR, LASTNAME, FIRSTNAME, STREET, BIRTHDAY '
  return
'{"typ":"-","caption":"Pindex","min":1,"max":10001}' . '---' .
'{"typ":"number","caption":"Kundennr","min":1,"max":100002}' . '---' .
'{"typ":"text","caption":"Nachname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}' . '---' .
'{"typ":"text","caption":"Vorname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}' . '---' .
'{"typ":"text","caption":"Strasse","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}([ ][A-ZÜÄÖ][a-züäöß]{1,29}){0,2}[ ][1-9][0-9]{0,3}([a-z]){0,1}$"}' . '---' .
'{"typ":"date","caption":"Geburtag"}' ;
 }

Json-Array

JSon: 1. Teil: Daten aus der Datenbank
{"pindex":11,"cnr":1111,"lastname":"Meier","firstname":"Hans","street":"Friedrichstrasse 55","birthday":"2018-03-14"}|{"typ":"-","caption":"Pindex","min":1,"max":10001}---

JSon: 2. Teil: Definition des Typs der UI-Elemente und des Pattern:
{"typ":"-","caption":"Pindex","min":1,"max":10001}---
{"typ":"number","caption":"Kundennr","min":1,"max":100002}---
{"typ":"text","caption":"Nachname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}---
{"typ":"text","caption":"Vorname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}---
{"typ":"text","caption":"Strasse","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}([ ][A-ZÜÄÖ][a-züäöß]{1,29}){0,2}[ ][1-9][0-9]{0,3}([a-z]){0,1}$"}---
{"typ":"date","caption":"Geburtag"}

Erläuterung:
typ: -
UI-Element: Text mit readonly

typ: number
UI-Element: number mit min und max

typ: text
UI-Element: Text mit pattern

typ: date
UI-Element: Datum-Element

Zusammenfassen der Json-Texte

$customer= loadCustomerFromDB($pindex);
$s1 = json_encode($customer); // {"pindex":11,"cnr":1111,"lastname":"Mer","firstname":"Has","street":"Fri","birthday":"2018-03-14"}
$s2 = getCustomerPatternFromDB(); // [ {},{},{},{}]
echo $s1 . '|' . $s2;

Aufruf

let items = xmlhttpEdit.responseText.split('|');
// Trennen zwischen CSS-Abschnitt und HTML-Code
let str_dialogStyles = getStylesDialogElements(items[1]);
let str_Dialog = createDialogElements(items[0], items[1]);

let s='';
s += ' <style type="text/css" id="internalStyle" >'+"\n";
s += str_dialogStyles+"\n";
s += 'fieldset {'+"\n";
s += ' border: 2px solid #C5D8E1;'+"\n";
s += ' border-radius: 10px;'+"\n";
s += ' background: white;'+"\n";
s += ' margin: 0;'+"\n";
s += ' width:25rem;'+"\n";
s += ' }'+"\n";
s += ' '+"\n";
s += 'legend { '+"\n";
s += ' color:red;'+"\n";
s += ' } '+"\n";
s += ' </style>'+"\n";

s += '<h1>Edit an address</h1>'+"\n";
s += '<form method="get">'+"\n";
s += '<fieldset>'+"\n";
s += '<legend>Inputs for an address</legend>'+"\n";

s+=str_Dialog+"\n";
s+='</fieldset>'+"\n";
s+='<br />'+"\n";
s+='<input type="button" value="Yes" onclick="javaedit_yes(this.form)" />'+"\n";
s+='<input type="button" value="No" onclick="java_no(this.form)" />'+"\n";
s+='<input type="reset" value="Reset" />'+"\n";
s+='</form>'+"\n";
s+='<br />'+"\n";
s+='<br />'+"\n";
s+='<div id="ajaxerror"></div>'+"\n";
alert(s);
elementAjax.innerHTML = s;

Ergebnis. Der rote Anteil wird dynamisch erzeugt