Ankündigung

Einklappen
Keine Ankündigung bisher.

Einfache Verwaltung mit js

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Einfache Verwaltung mit js

    Ich möchte auf konzertagentur-koerner.de/index.php/start eine Anwendung bauen, die eine Werkeliste eines auftrags sortieren ("sortable"), Werke löschen und ans Ende der Liste neue Stücke fügen kann.

    Also eine einfache JS-Anwendung.

    Es funktioniert nicht das löschen von Werken die nicht das erste sind.

    Ausserdem kann ich auf ein hinzugefügtes Werk per js nicht zugreifen.

    Im Dom sieht es gut aus, die Elemente passen.

    Habt ihr ein Tips?

  • #2
    Ohne Code? Wie sollen wir da Tipps geben ... und es gibt doch genug JS Plugins die Sowas bereits können, also z.b. Daten in Tabellen darstellen die sortiert werden können und Elemente entfernt werden können.

    Kommentar


    • #3
      Stimmt, ohne Code schwierig. Dein Tipp zu fertigen Js Dateien: Wie soll ich da lernen, wenn ich die Dateien nur anpasse? Jquery ist schon grenzwertig was die Lernkurve betrifft, weil ich die Src Datei mit der Implementierung der Funktionen nicht anfasse.

      Ich kann bei meinem Problem nicht auf ein Listenelement "mitten drin" zugreifen, nur das am Rand. Sobald ich ein neues Ele. hinzufüge, kann ich gar nicht darauf zugreifen wenn es das erste ist.

      Anbei die Liste
      PHP-Code:
      <?php

      $aufId
      $this->input->post('auftragId');
      // echo 'Auftrag Id '. $aufId;

      echo 'Liste

      <ul auftragId ='
      .$aufId.' id=auftragProgramm>';

       foreach (
      $progr as $arr
          echo 
      '<li id='.$arr->werk_id.'>'.$arr->werk.' .. '.$arr->komponist.'    
          <button class=deleAufProgramm > - lösch<button>
          </li>'


      echo 
      '
      </ul>
      <button id=updateAuftragProgramm >absenden</button>'
      ;?>
      JS delete
      Code:
      // delete piece in order from dom
      $('.deleAufProgramm').click(function() {
        id=$('ul li').attr('id');
      		
        // console.log(id );
      		
        // if ( confirm ( 'Eintrag löschen ?') == false) return false;
      		
        // prepare for delete row/list entries
        $('li#'+id).remove();
      });
      Kopiert ein Element aus der keyup-Liste nach oben als letztes Element in die Liste

      Code:
      $('.auftrProgr').click(function(event){
      	// event.preventDefault();
      	// console.log($('li').length );
      	
      	$this=$(this);
      	
      	$('#resList').hide();
      	
      	id= $this.attr('id');
      	
      	  // li = $('<li/>');
      	  
      	  // check if list elements
      	  if ( $('li').length >0) {
      		console.log($this.text());
      		li=$('<li/>');
      		li.append($this.text()+ '<button class="deleAufProgramm"  >lösch</button></li>');	
      	  	
      		li.attr('id',id);
      
      		$('#auftragProgramm li:last').after(li);
      	}
      	else 
      		jQuery('<li/>', {
      		id: id,
      		text:''+ $this.text()
      		
      		}).appendTo('ul');
      
      	// console.log(id);
      	
      });
      Ich habe den Code aus Notepad+ kopiert, kann ich dort etwas einstellen damit er hier im Editor genauso formatiert ist?

      Kommentar


      • #4
        PHP-Code:
        $this->input->post('auftragId'); 
        Was passiert hier?

        PHP-Code:
        echo 'Liste

        <ul auftragId ='
        .$aufId.' id=auftragProgramm>';

         foreach (
        $progr as $arr
            echo 
        '<li id='.$arr->werk_id.'>'.$arr->werk.' .. '.$arr->komponist.'    
            <button class=deleAufProgramm > - lösch<button>
            </li>'


        echo 
        '
        </ul>
        <button id=updateAuftragProgramm >absenden</button>'
        ;?> 
        Muss das sein?

        Ich empfehle dir HTML und PHP so weit es geht zu trennen.

        Dafür kann man die PHP Tags schließen und eröffnen

        PHP-Code:
        <?php
         
        //..
        ?>

        <?php
         
        // ..
        ?>
        Weiteres folgt nacher vllt.
        Spiegel Funktion Live: https://www.youtube.com/watch?v=JI3Df7-KFtw

        Kommentar


        • #5
          So tut mir Leid, wollte unbedingt in der Eile noch den Beitrag fertig haben.

          Lernen tut man in vielen Wegen, auch das anpassen gehört dazu. Analysieren, Verstehen und Anpassen.
          Es kann durch aus sein das man sogar etwas dazu lernt, indem man etwas recherchiert das man zuvor noch nicht kannte.

          Also so wie ich das verstanden habe, möchtest du aus der Liste heraus:

          - Sortieren
          - Löschen
          - Neuer Eintrag ans Ende

          haben können.

          Das löschen sollte ja nicht die Schwierigkeit sein:

          Code:
          $( 'ul li' ).click( function(){
            $(this).remove();
          });

          Für das Sortieren muss erst einmal das Kriterium nachdem sortiert wird feststehen.

          Das neu erstellen sollte:

          Code:
          $( 'ul' ).append( '<li>Inhalt</li>' );
          lösen.

          Im Prinzip nur ein zusammenbauen von mehreren Elementen.

          Oder habe ich dein Ziel falsch verstanden?

          Gruß
          Spiegel Funktion Live: https://www.youtube.com/watch?v=JI3Df7-KFtw

          Kommentar


          • #6
            Passt danke. Ich lade die nächsten Tagen noch ein Beipsiel zum Ausprobieren hoch, dann siehste genau was ich meine. Guter Tip mit dem Trennen php/html.

            Löschen klappt nur, wenn per js nicht aktualisiert wurde, wenn also die "frischen" php Daten vorliegen. Zeige ich dir bald..

            Kommentar

            Lädt...
            X