Das Navigieren im DOM mit jQuery ist zu 50 % CSS. Am wichtigsten ist dies:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator
Beim Verwenden von Selektoren gilt, das man kein Vorgänger- und keine Elternelemente ansprechen kann. Dafür muss man jQuery verwenden.
Die wichtigsten Funktionen sind children(), find(), next(), prev(), parent() und closest(). Du informierst dich darüber am besten bei https://api.jquery.com/
Vergleiche mal genau die IDs, einmal im Screenshot und einmal im Javascript:
Im Javascript hat sie ein Prefix "ID_", das ich im HTML nicht erkennen kann.
Ich bin immer noch der Meinung, dass dieses:
$("option:selected", this).text()
den Text aller Selectboxen auf deiner Seite ausgibt und dass Du statt dessen dieses
+ $(this).find("option:selected").text()
verwenden müsstest.
Da wird empfohlen, Cookies und Cache zu löschen:
https://www.technobezz.com/what-to-do-if-…ozilla-firefox/
Versuche, ob das das Problem löst.
Ja, open und send sind die Befehle in Vanilla-JS. Ich ziehe statt dessen jQuery-Ajax vor, weil ich es einfacher und übersichtlicher finde.
Der erste Parameter ist das PHP-Skript, das aufgerufen werden soll.
Der zweite (data) die Daten, hier POST-Daten, da weiter unter method auf POST gesetzt wird. Diese Daten findet man unter den POST-Variablen im PHP-Skript wieder.
success ist die Callback-Funktion, die aufgerufen wird, wenn der Request erfolgreich war.
error-Callback kann man ebenfalls übergeben für den Fehlerfall, hier nicht genutzt.
Weitere Einzelheiten kannst Du hier nachlesen:
http://api.jquery.com/jquery.ajax/
Wenn Du diesen Code verwenden möchtest, darfst Du nicht vergessen, jQuery einzubinden.
Navigieren im DOM ist mit Vanilla-Javascript ziemlich spröde. Dafür empfehle ich eher jQuery. Bei deinem konkreten Beispiel brauchst Du jedoch gar nicht zu navigieren, weil Du schon die ID des gesuchten Elementes hast. Sollte so funktionieren (ungetestet):
var ele = document.getElementById('ID_Action_ApplicationName_Inner');
var eltxt = ele.textContent;
eltxt = eltxt.replace('Hilfe', 'NeuerText');
ele.textContent = eltxt;Siehe:
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/nodeValue
document.getElementById("derText").firstChild.nodeValue = text;war in der alten Dokumentation von Stefan Münz ein gängiger Weg, um den Inhalt eines Textknotens zu ändern. Heute können Sie dies mit der Eigenschaft textContent bequemer erledigen.
Der Code, den Du gepostet hast, bringt bei mir auch nur die Ausgabe, die Du erwartest:
https://jsfiddle.net/Sempervivum/gd4tp1yz/1/
Dass Du eine so lange Ausgabe bekommst, könnte daran liegen, dass Du noch mehr selektierte Optionen auf deiner Seite hast. Mir ist außerdem nicht ganz klar, was Du mit dem zweiten Teil der Ausgabe vor hast: option:selectedspricht alle selektierten Optionen auf der Seite an. Hattest Du u. U. diese vor $("#filter_stunden option:selected").text()); ? Das würde nur die Texte der Optionen ausgeben, die Kindelement von #filter_stunden sind.
https://jsfiddle.net/Sempervivum/gd4tp1yz/4/
Ein wunder Punkt bei Kontaktformularen ist auch die Spamgefahr und wie man Spam abwehrt. Gerade aktuell gibt es dazu hier einen Thread:
https://www.html.de/threads/formular.58281/
Vielleicht könnte man dieses Tutorial um dieses Thema erweitern.
Mit etwas ähnlichem habe ich mich auch vor einiger Zeit beschäftigt. Dabei ging es um das Sammeln von Informationen über Schnapsfläschchen (es gibt nichts, was Leute nicht sammeln). Kein eigenes Projekt, sondern ich habe den Webmaster unterstützt. Wir haben es mit CSV-Dateien gemacht, aber was Du erwähnt hast, mit einer Datenbank wäre natürlich die bessere Lösung. Auf jeden Fall ist es möglich, das selbst zu programmieren, wenn Du dich in PHP und Datenbanken einarbeitest. Allerdings werden die Skripte dir nicht die Arbeit abnehmen können, die Informationen über den Circus zu sammeln und einzugeben. Dass es diese in einer Form gibt, die man maschinell auswerten kann, ist eher unwahrscheinlich.
Für das Einarbeiten in HTML und CSS bist Du hier bei html-seminar.de schon an der richtigen Adresse, denn Du findest hier nicht nur das Forum sondern auch Tutorials zum Lernen
Für PHP gibt es wahrscheinlich auch Tutorials, da kann dir sicher jemand anders eines empfehlen.
So etwas habe ich auch mal vor einiger Zeit gemacht:
<select id="files"></select>
<script>
$("#files").on("change", function () {
var filename = this.options[this.selectedIndex].value;
if (filename.match(/\\$/)) {
// Es handelt sich um ein Verzeichnis
console.log("dir")
path = filename.replace(/\\$/, "/");
$.ajax("getfilenames.php", {
data: {
path: path,
pattern: "*"
},
method: "POST",
success: function (output) {
$("#files").empty().append(output);
}
});
} else {
// Es handelt sich um eine Datei
}
});
</script>getfilenames.php:
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
$path = $_POST['path'];
$pattern = $_POST['pattern'];
$filenames = glob($path . $pattern, GLOB_MARK);
echo '<option value="">Datei wählen</option>';
foreach ($filenames as $file) {
$file3 = utf8_encode($file);
$file2 = str_replace($path, '', $file3);
echo '<option value="' . $file . '">' . $file2 . '</option>';
}
?>Nicht sehr ausgefeilt mit Baumstruktur o. ä. aber erfüllt seinen Zweck.
Das sind 66 Bilder, man kann es aus dem Quellcode ablesen.
Freut mich zu lesen. Für welche Variante hast Du dich denn entschieden?
Das geht viiiieeel einfacher mit Flex:
Dem umgebenden Container ein display;flex geben:
Dies sollte funktionieren:
https://jsfiddle.net/Sempervivum/kmwywx8L/1/
<div id="cbc"></div>
<script>
var lastidx = -1;
for(let i = 1; i <= 100; i++){
var cbh = document.getElementById('cbc');
var cb = document.createElement('input');
cb.type = 'checkbox';
cb.name = 'box'+i;
cb.value = i;
cb.className = 'box';
cb.id = 'box'+i;
cbh.appendChild(cb);
cb.addEventListener("click", function(event) {
if (!event.shiftKey) {
lastidx = i;
} else {
var status = document.getElementById('box' + lastidx).checked;
console.log("status");
if (lastidx < i) {
var from = lastidx;
var to = i;
} else {
var from = i;
var to = lastidx;
}
for (var j = from; j < to; j++) {
document.getElementById('box' + j).checked = status;
}
}
});
}
</script>Auf jedenfall feuert der keyup an die 80 mal. Verstehenicht warum.
Ich habe es nicht bis ins letzte analysiert, aber der Grund ist sicherlich, dass Du den keyup-Handler im keydown-Handler registrierst, d. h. bei jedem keyup wird er von neuem registriert.
Eine moderne Art, so etwas zu machen, ist die Verwendung von CSS-Sprites. Hat den Vorteil, dass es ohne Javascript geht. Aber weil Du schreibst, dass Du durch die Art der Animation eingeschränkt bist und weil ich gerade etwas ähnliches hatte, habe ich schnell eine Lösung mit Javascript ausgearbeitet:
http://webentwicklung.ulrichbangert.de/animation-2.html
Wenn Du die Lösung mit Sprites vorziehst, musst Du deine Einzelbilder zunächst zu einem Sprite zusammen fügen. Dafür gibt es Tools, aber wenn Du mit Bildbearbeitung fit bist, kannst Du es u. U. auch mit deiner Software machen. So etwas habe ich früher auch mal gemacht:
Na, das sieht doch schon ganz gut aus.
Rahmen bekommst Du weg mit border:none
Mit ein paar Zeilen Javascript kannst Du die Größe an den Inhalt anpassen, so dass die Scrollbars verschwinden:
function resizeIFrameToFitContent(iFrame) {
iFrame.height = $(iFrame.contentWindow.document.body).outerHeight(true);
}
var iFrame = document.querySelector('iframe');
iFrame.onload = function() {
resizeIFrameToFitContent(iFrame);
}Ich hatte auf eine Lösung gesetzt welche nur den Textinhalt an dieser Position setzt. Kein Rahmen ....kein scrollen falls die Beschreibung etas länger ist.
Eine bewährte Alternative ist, die Beschreibung mit jQuery-load in einen Container zu laden:
http://api.jquery.com/load/
Weitere Fragen: Wie entstehen denn die HTML-/PHP-Seiten, von denen Du die Links gepostet hast? Du schreibst ja, dass mit dem iFrame die Beschreibung sichtbar wird, nur komplett an der falschen Stelle. D. h. Du hast offenbar Zugriff darauf und kannst Sie ändern?
Was ist das für ein Import-Plugin und was macht es?
Die CSV-Datei bekommst Du offenbar vom Lieferanten. Es würde sich anbieten, diese mit PHP einzulesen und aus den Daten die Poduktseite zu generieren. Programmierst Du den Shop selber oder benutzt Du eine fertige Software?
Ja, ein iFrame muss nicht unbedingt optimal sein. Ich habe ihn nur vorgeschlagen, weil es die einfachste Möglichkeit ist, eine externe HTML-Seite einzubetten.
Die CSV-Datei, bzw. xls Datei welche ich vom Lieferanten bekommen habe beinhaltet alle Produktdaten. Lediglich die Bilder und die Artikelbeschreibung liegen bei denen auf dem Server.
Das mit der CSV-Datei verstehe ich immer noch nicht. Erwartest Du, dass Du diese vom Lieferanten laden kannst? Wie gesagt, wenn ich die URL aufrufe, bekomme ich eine HTML-Seite mit einer lesbaren, strukturierten Beschreibung und keine CSV-Datei.
Verstehe ich das richtig? Der erste Link (Rohrbohrmaschine) gibt an, wie die Seite ohne Artikelbeschreibung aussieht? Und der zweite (Magnetkernbohrmaschine) den Sollzustand, wie es eigentlich aussehen soll?
Du schreibst zwar von CSV, aber wenn ich den Link im Browser aufrufe, kommt eine HTML-Datei, die ganz normal im Browser angezeigt wird. Ein einfaches Verfahren, diese anzuzeigen, ist ein iFrame:
http://wiki.selfhtml.org/wiki/HTML/Fram…_Frametechniken
Ich wollte ein Demo bei jsfiddle machen, aber es funktioniert nicht, weil die URL keine gesicherte Verbindung hat. In einer Testdatei mit http funktioniert es jedoch.
<iframe src="http://web1.stuermer3.stuermer-maschinen.de/index.php?id=4194&tx_produktkatalog_pi1[tx_productkatalog]=59577">
</iframe>Wenn dein Shop eine sichere Verbindung hat, müsste man weiter sehen, ob es mit Ajax funktioniert.
Den Aufwand, es zu verstehen und sich einzuarbeiten, investiert man besser nicht in ein Layout mit float sondern etwas, das klar, verständlich, geradlinig und der neueste Stand der Technik ist: Flexbox.