XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   eigener texteditor, button im button problematisch (http://xhtmlforum.de/showthread.php?t=74078)

Iago2 16.04.2020 20:14

eigener texteditor, button im button problematisch
 
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!

cloned 17.04.2020 08:22

Kannst du den relevanten HTML Code hier posten? So, dass ein minimales Beispiel ersichtlich ist, wo dein Problem nachvollzogen werden kann?

Iago2 17.04.2020 12:52

Zitat:

Zitat von cloned (Beitrag 554202)
Kannst du den relevanten HTML Code hier posten? So, dass ein minimales Beispiel ersichtlich ist, wo dein Problem nachvollzogen werden kann?

Ja klar, ich versuch das so kompakt wie möglich zu machen!

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('&nbsp;for&nbsp;<b>' +
      $(this).siblings('span').text() + '</b>,&nbsp;');             

            });
         
          //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');
             
          });

Die CSS sind:

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;
       
    }

Merci! :)

Iago2 18.04.2020 12:25

Gut, eine Lösung wäre diese:

Code:

$('.plus').on('click',function(e){
//......

 e.stopPropagation();

Dann kann ich aber die offenen Panels nicht alle schlissen, was designtechnisch ganz nett wäre.

cloned 20.04.2020 08:12

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 :D )

Das was du hier vor hast kann so nicht funktionieren:

Code:

$('.plus').on('click',function(){
  // some code ...
          $('#newCP').on('click', function() {

Damit definierst du jedesmal, wenn du auf plus klickst eine neue Funktion für '#newCP'
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
})

Dann definierst du deine ajax-funktion einmal:

Code:

$('#newCP').on('click', function() {
  var cpID = $('#someElement').data('cp-id'); // auslesen des attributes mit einem Parameter
})

Auch ist mir nicht klar was du mit den panels meinst? Die dinger die auf und zu gehen?

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 ... );
});


Iago2 20.04.2020 20:37

Zitat:

Damit definierst du jedesmal, wenn du auf plus klickst eine neue Funktion für '#newCP'
Danke cloned für die Antwort!
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.

cloned 21.04.2020 08:28

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?

Iago2 21.04.2020 17:55

Zitat:

Und auf meine Fragen was du jetzt eigentlich erreichen willst bist du auch nicht eingegangen?
Was ich mir erst als Aufgabe gestellt habe, ohne reload der kompletten Seite zu arbeiten, sondern nur mit AJAX.
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.

cloned 22.04.2020 09:07

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.

Iago2 22.04.2020 11:03

Zitat:

WAS soll im Detail passieren wenn du auf den "plus" knopf drückst
1.) Ein neuer CP-Eintrag (für eine Section) soll erstellt werden. -> auf der rechten Seite öffnen sich leere Felder für headline + text.
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:

Welche Werte sollen WO zwischengespeichert werden
In id, wird der Wert von Attribut data-textId von <a> gespeichert, die ID des CP-Eintrages aus der Datenbank etwas modifiziert.

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');
           
                 
            });

P.S. die preIDs haben den Nachteil, dass ich dann vom neuen Eintrag kein Update machen kann. d.h. ich muss die neuen Einträge in der Datenbank speichern und zumindest die ID zurückholen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020