Das geht relativ einfachemit jQuery.getJSON():
$.getJSON( "deine-json-datei.json", function(data) {
var id = data.id,
type = data.type,
status = data.status,
title = data.title;
// So kannst Du auf die einzelnen Element zugreifen
});Ja, so sollte es gehen:
.line {
flex-direction: column;
display: flex;
}macht dein Code das ?
Das sieht man sofort, wenn man sich mein Beispiel in Aktion ansieht: Die vier Boxen füllen den Raum unterhalb der Navi vollständig aus, ohne dass man selbst irgend etwas berechnen muss. Man kann die Navi beliebig anlegen, mit fester oder automatischer Höhe, und der Browser füllt mit den zwei Boxenreihen immer den freien Raum darunter aus.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ sagt:
flex
This is the shorthand for
flex-grow,flex-shrinkandflex-basiscombined. The second and third parameters (flex-shrinkandflex-basis) are optional. Default is0 1 auto.
Nein, wenn man Flexlayout richtig einsetzt, braucht es kein calc. Siehe mein Beispiel.
Schau mal, ob dies das ist, was Du dir vorstellst:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
nav {
font-size: 2em;
background-color: lightblue;
}
.line {
flex: 1 1 10px;
display: flex;
}
.box {
border: 2px solid blue;
flex: 1 1 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.line:first-of-type .box:first-child {
background-image: url(images/dia0.jpg);
background-size: cover;
}
.line:last-of-type .box:last-child {
background-image: url(images/dia1.jpg);
background-size: cover;
}
</style>
<div id="wrapper">
<nav>
Hier die Navigation
</nav>
<div class="line">
<div class="box">
</div>
<div class="box">
Der Text<button>Der Button</button>
</div>
</div>
<div class="line">
<div class="box">
Der Text<button>Der Button</button>
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>Bevor wir mit einem Modal anfangen, sollten wir auf das prompt verzichten und statt dessen ein Input-Felder verwenden:
<form>
<label>
Attributwert Attribut1 ändern:
<input class="attrinput" type="text">
<input class="okbutton" type="button" value="Abschicken" data-deviceid="deviceid1" data-attributeid="attributeId1">
</label>
<label>
Attributwert Attribut2 ändern:
<input class="attrinput" type="text">
<input class="okbutton" type="button" value="Abschicken" data-deviceid="deviceid2" data-attributeid="attributeId2">
</label>
</form>
<script>
jQuery(".okbutton").on("click", function () {
var deviceId = $(this).data("deviceid"),
attributeId = $(this).data("attributeid"),
newValue = $(this).prev(".attrinput").val();
console.log("clicked", deviceId, attributeId, newValue
);
if (newValue != null) {
jQuery.get('rest/devices/' + deviceId,
+ '/attributes/' + attributeId
+ '/valueText?set=' + newValue);
}
});
</script>Erst Mal um zu testen, ob es damit funktioniert. console.log ist für mich zum Testen, jQuery.get konnte ich verständlicher Weise nicht testen.
Ich verstehe das Ganze nicht mehr richtig. Wo ist denn da die SPS, von der Du weiter oben geschrieben hast?
Ohne es richtig zu verstehen, könntest Du statt des prompt ein Modal verwenden und testen, ob das Problem damit auch auftritt.
Also offenbar ein Cross-Origin-Problem. Wird die Seite in dem iFrame denn überhaupt angezeigt?
Verstehe ich das richtig: Die Elternseite ist Joomla und liegt auf einem lokalen Webserver. Die Kindseite, die in dem iFrame angezeigt werden soll, liegt auf einem anderen Webserver, den die SPS bereit stellt?
Es gibt zu diesem Problem einiges bei Stackoverflow:
https://stackoverflow.com/questions/4086…ss-domain-issue
You need control over the domain you want to embed to remove/amend its CORS policy. It the domain has explicitely blocked Cross-Origin requests, there's nothing you can do about it.
Wahrscheinlich hast Du ja Zugriff auf die SPS?
Was sagt denn nun die Console?
Für Firefox gibt es z. B. diese Anleitung:
https://developer.mozilla.org/de/docs/Tools/Debugger
Chrome und Opera:
dass man da den Code Zeile für Zeile ausführen kann und gucken, was jeweils die Zwischenergebnisse (z.B. Variable) sind.
Gibt es das auch für javascript?
Selbstverständlich, in den Entwicklerwerkzeugen aller gängigen Browser findest Du einen Debugger, mit dem Du Haltepunkte setzen, den Code Schritt-für-Schritt ausführen, Variablen anzeigen etc. kannst.
Strg-Umsch-I bzw. F12 im IE. Dort findest Du einen Reiter "Console", wo Fehlermeldungen etc. ausgegeben werden.
Ich habe es übrigens mal ausprobiert und es hat einwandfrei funktioniert, auch Crossdomain.
Da fällt schnell auf, dass die Namen nicht eindeutig sind:
name: 'ntext' + i,
i fängt ja bei jedem Aufruf der Funktion wieder bei 0 an. Offenbar verwendet jCanvas den Namen auch für seine interne Buchführung, so dass es zu Problemen kommt. Gib dem Namen einen Zusatz, der ihn eindeutig macht.
Das gleiche passiert mit den Namen wenn ich im Canvas an einer beliebigen Stelle klicke.
Das überrascht zunächst, aber ich vermute stark, dass jCanvas einen Click-Listener für das ganze Canvas registriert und darin dann prüft, auf welches Element der Klick zutrifft.
Hast Du mal einen Blick auf die Console geworfen?
Ich wollte dir nur die grobe Richtung zeigen. Ja, da war noch ein Fehler drin und deine Korrektur ist richtig. Mit thefunction meine ich die Funktion, von der Du im Eingangsposting geschrieben hast. Die musst Du natürlich selber definieren.
Ich empfehle, die Arrays in einem Objekt zu übergeben, etwa so:
var arr1 = // Hier wird das erste Array erzeugt
var arr2 = // Hier wird das zweite Array erzeugt
return {narr1: arr1, narr2, arr2};Und dann auspacken:
var botharrays = thefunction();
var arr1 = botharrays.narr1;
var arr2 = botharrays.narr2;Den Fehler habe ich eben auch nicht gesehen:
setLayer('yy', {
Du willst ja nicht den String 'yy' übergeben, sondern den Inhalt der Variablen yy, die den Namen enthält. Nimmt man die Hochkommas weg, funktioniert es.
Beim reinen Lesen kann ich keinen Fehler entdecken. Hast Du auch an das drawLayers() gedacht?
Ich würde setLayer nur einmal aufrufen:
var yy='text' + nr;
if (nr < 3) var txt = vnamen[nr];
else var txt = nnamen[nr]
$('canvas').setLayer('yy', { text: txt}).drawLayers();Nein, wie MrMurphy schon schrieb, geht das nur eingeschränkt und mit Tricks und ist nicht zu empfehlen:
https://css-tricks.com/float-center/
Nimmt man Javascript zu Hilfe, kann man das Bild auch einiger Maßen vertikal zentrieren, aber ebenfalls eher nicht zu empfehlen: