zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden eigener texteditor, button im button problematisch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.04.2020, 21:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.04.2020, 09:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kannst du den relevanten HTML Code hier posten? So, dass ein minimales Beispiel ersichtlich ist, wo dein Problem nachvollzogen werden kann?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.04.2020, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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!

Geändert von Iago2 (17.04.2020 um 14:06 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2020, 13:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.04.2020, 09:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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

Geändert von cloned (21.04.2020 um 09:26 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 20.04.2020, 21:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.04.2020, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 21.04.2020, 18:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 22.04.2020, 10:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.04.2020, 12:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Iago2 (22.04.2020 um 13:06 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Eigener Facebook Share Button Wolowizard Offtopic 1 15.09.2011 00:18
FF Problem: button mit image darolla CSS 6 02.04.2007 09:49
Button - Rahmen dieter99 CSS 1 06.12.2006 11:13
input und button + hack GN CSS 3 03.08.2006 15:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:57 Uhr.