|
|||
![]()
Hallo,
Ich schreibe gerade an einem Texteditor, Datenstruktur ist recht einfach: Sections haben sog. CPs (cherrypicks = (Überschrift+Text)). Sections/CP's -> (1 : n) CP's (Überschrift/Text) -> (1:1) Um ein CP zu erzeugen möchte ich einen grünen "+" Button verwenden. der befindet sich im Sections-Button. (welcher ist: Accordion-Feld mit der Sections-Überschrift). Kann ich den grünen Button getrennt von dem äusseren Sections-Button steuern? Wenn ich die Töcher - li a (.panel) der Section-Button verstecke mit $('.panel').hide(); kann ich später das Akkordion nicht wieder öffnen (ohne zu Aktualiseren!!), Link: http://science-travel-com.stackstaging.com/cpicks/ Ich weiss das ist sehr umfangreich, also wenn sich das jemand anschauen mag: Vielen Dank! |
Sponsored Links |
|
|||
![]() Zitat:
Dies ist der Code für den "+" - Button: Code:
$('.plus').on('click',function(){ $('.newCP').show(); // öffnet den Eingabebereich für ein neues CP $('.sectionInput').hide(); // Eigabe new sections wird geschlossen $('.cherryPick').hide(); // Update CP Eingabe wird geschlossen // $('.panel').hide(1000); schliesst alle panel- Schwesterknoten // können nicht wieder geöffnet werden!! $('.labelTextareas').show(); //geöffnet weil mit $('.cherryPick').hide(); $('.myTextareas').show(); // geschlossen //newCpId ist die id von Section Feld (.accordion), parent of "+"-Button, für AJAX (unten) newCpId = $(this).parent(this).attr('id'); // hier werden im label.headline Bereich angezeigt zu welcher Section // nun die Eingabefelder gehören: $('label.headline').before(' for <b>' + $(this).siblings('span').text() + '</b>, '); }); //Ajax für die Eigabe der newCP Daten in die db $('#newCP').on('click', function() { $.ajax({ type:"POST", url:"actions.php?action=newCP", data: "section_id=" + newCpId + "&newCpHeadline=" + $('#newCpHeadline').val() + "&newCpArea=" + $('#area').val(), success:function(result) { alert(result); } }); }); $('.panel').hide(1000); würde ganz gut funktionieren. Ich schliesse alle Accordione (Sections), wenn sie geöffnet sind (die zu sind bleiben zu) und es öffnen sich die Felder für die Eigabe den neuen CP. Jetzt sind aber alle Akkordione blockiert ohne Refresh, und den will ich ja grade mit AJAX vermeiden. Hier ist der Code der die Akkordion-Felder (Sections) öffnet und schliesst: Code:
$('.accordion').on('click',function() { var $this = $(this).toggleClass('active'); var panel = $this.next().toggleClass('show'); }); HTML-Code:
div.accordion { background-color: #eee; color: #444; cursor: pointer; padding:18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.8s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; overflow: hidden; transition: 0.8s ease-in-out; opacity: 0; max-height:0; } .panel.show { opacity: 1; max-height:3000px; } .panel.hide { opacity: 0; height: 0; } /* headlines */ .panel { padding:0; } .panel ul { margin:0; padding:0; list-style-type: none; width:100%; /* border:1px solid red; */ } .panel ul li { padding:0; margin:0; } .panel ul li a { padding:15px; text-decoration:none; display:block; color:black; /* border:1px solid green; */ } .panel ul li a:hover { background-color:#3D4849; color:#ffffff !important; } ![]() Geändert von Iago2 (17.04.2020 um 13:06 Uhr) |
|
|||
![]()
Gut, eine Lösung wäre diese:
Code:
$('.plus').on('click',function(e){ //...... e.stopPropagation(); |
|
|||
![]()
Jetzt hatte ich eine lange Antwort getippt, aber leider wurde sie nicht abgeschickt. I hate when this happens.
Kurzfassung (Sorry wenn das jetzt etwas unhöflich rüberkommt, aber die lange Version ist weg ![]() Das was du hier vor hast kann so nicht funktionieren: Code:
$('.plus').on('click',function(){ // some code ... $('#newCP').on('click', function() { Sprich du klickst einmal auf plus und definierst einen ajax call. Du klickst nochmal auf '.plus' und hast nun zwei Ajax calls. usw. Trenne die Funktionen und verwende data Attribute um Werte zu speichern: Code:
$('.plus').on('click', function() { // some magic $('#someElement').data('cp-id', newCPid); // setzen des data Attributes mit zweitem Parameter }) Code:
$('#newCP').on('click', function() { var cpID = $('#someElement').data('cp-id'); // auslesen des attributes mit einem Parameter }) Erstelle dir eine Funktion für "alle Panels schließen", eine für "öffne Panel mit dieser ID", und was du sonst noch so brauchst. dann rufst du die Funktionen einfach auf wenn du sie brauchst. zb so: Code:
$('.plus').on('click', function() { // same magic as before... closePanelsExcept( ... id vom Panel das offen bleiben soll ... ); }); Geändert von cloned (21.04.2020 um 08:26 Uhr) |
|
|||
![]() Zitat:
Die Funktionen sind aber schon unabhängig. Ich habe diese id newCpId ja global definiert, d.h. bei Bedarf greift $('#newCP') if diese Variable zurück. |
|
|||
![]()
Dann formatiere doch bitte deinen Code so dass man ihn auch lesen kann.
Und auf meine Fragen was du jetzt eigentlich erreichen willst bist du auch nicht eingegangen? Welche Accordions? Warum/Wo/Wie/Wann soll sich da was tun? |
|
|||
![]() Zitat:
Den button im button ist eher eine Nebenfrage. (auch eine Design-Frage natürlich) Ich merke eben, dass wenn die Dinge komplexer werden, es sich dann plötzlich neue Fragen auftun, die auch voneinander abhängig sind. Mit diesem "+"-Button kommen viele Aufgabenstellungen zusammen. Wo ich jetzt hinkomme ist, die Überlegung AJAX nur im "Hintergrund" laufen zu lassen, im Vordergrund kann man dann Elemente erzeugen, verändern verschieben usw., da fehlt mir eben noch sehr die Erfahrung mit JS/JQuery. Also die Kommunikation mit der Datenbank nur wenn wirklich notwenig. |
|
|||
![]()
ok, das ist mir klar. Das ist auch vollkommen in Ordnung, aber ich meinte eigentlich folgendes:
WAS soll im Detail passieren wenn du auf den "plus" knopf drückst. Welche Accordions sollen zugehen? Welche sollen aufgehen? Welche Werte sollen WO zwischengespeichert werden / Wenn Ajax dann aktiviert wird, welche Werte sind dann wichtig? Und WIE sollen die Accordions wieder geöffnet/geschlossen werden können? Durch einen klick auf plus? Durch einen anderen Klick? Erst nach ajax response? Solche Sachen interessieren für die Beantwortung deiner Frage. |
Sponsored Links |
|
|||
![]() Zitat:
2.) in dem <label> für headline wird der Section title ausgegeben 3.) der Sections-Accordion Button, in den der "+"-Button eingebettet ist, soll nicht ausgeführt werden (habe ich erreicht mit: e.stopPropagation(); ) 4.) die Akkordione sollen werde auf noch zugehen, wer braucht so einen Schnick Schanck! Zitat:
newCpId ist die ID, des Akkordion-Feldes (section Feldes), Einträge aus der Datenbank auch modifiziert preID ist die ID von neuen Einträgen, die erstmal nur zur Laufzeit bestehen, ich kann die dann die Einträge mit AJAX in der db speichern, das ist aber nicht notwenig. (Ich denke im muss preID hochzählen wenn ich nicht nur einen neuen Eintrag pro Session machen möchte) Un dass ich nicht schon wieder eine neue Frage stelle, hat's hier heute morgen Gott sei Dank gefunkt: Wie ich die dynamisch generierten Einträge auch mit der gleichen Funktion ansprechen, wie die aus den Datenbank: Code:
$('.panel').on('click','li a.cp_header',function() { id = $(this).attr("data-textId"); $('.newCP').hide(); $('.updateCP').show(); $('.sectionInput').hide(); $('#cp_headline').val($(this).html()); $('.labelTextareas').hide().filter('[for="'+id+'"]').show(); $('.myTextareas').hide().filter('[id="'+id+'"]').show(); $('#updateCP').html('Update text'); }); Geändert von Iago2 (22.04.2020 um 12:06 Uhr) |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 13:32 |
Eigener Facebook Share Button | Wolowizard | Offtopic | 1 | 14.09.2011 23:18 |
FF Problem: button mit image | darolla | CSS | 6 | 02.04.2007 08:49 |
Button - Rahmen | dieter99 | CSS | 1 | 06.12.2006 10:13 |
input und button + hack | GN | CSS | 3 | 03.08.2006 14:30 |