zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Steuerung von Textareafeldern über ID fehlerhaft

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2020, 13:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard Steuerung von Textareafeldern über ID fehlerhaft

Hallo,

Ich lese Überschriften und Text aus einer JSON-Datei aus. Die Überschriften hab ich in einer Liste (linke Box). Die Textaraes hab ich zunächst mit display:none in einer rechten Box.
Die IDs der <li><a> Elemente (links) und der <textarea> (rechts) stimmen überein.

Jetzt versuche ich beides zusammenzubringen, sodass ich mit onclick links, ein Textfeld öffnen kann (selbe ID) Hier ist meine Ansatz, der noch dfhlerhaft ist.
Weiss jemand hier weiter? Vielen Dank.

Code:
$('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	       
	        if($('.myTextareas').attr('idTextarea').val() == id) {
	            
	            $('.myTextareas').toggleClass('.showTextarea');
	        }
	        
	        
	        $(id).val('');		     
	      
	  });
die Textareas erzeuge ich so:
PHP-Code:
  if($k == 'text')  {

echo 
" <textarea class='form-control myTextareas' idTextarea='text".$j.$i."' rows='3'>".$v."</textarea>";

$i++;
                    } 
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.04.2020, 14:29
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

Wie schaut dein html aus? PHP code ist für dein Problem irrelevant, der wird nicht vom JS fr die Ausführung verwendet.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.04.2020, 00:42
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
Wie schaut dein html aus? PHP code ist für dein Problem irrelevant, der wird nicht vom JS fr die Ausführung verwendet.
Bingo!
PHP macht mir in der Regel auch keine Kopfschmerzen!

JS Console error: Uncaught TypeError: Cannot read property 'val' of undefined

Ja gut, JQuery weiss ja gar nicht, welches der $('.myTextareas') gemeint ist.

HTML-Code:
	<body>
	    <div class="container border border-primary">
	     <div class="row"> 
	     
	      <div class="col-sm-8">
        <h1>Cherry Picks 2.0</h1>
            </div>
            </div>
        
          <div class="row">
           <div class="col-sm-4 sections-box">
         
                
<?php     showSections($obj);     ?>


      </div>
                
            <div class="col-sm-8 border border-primary">
                <form>
                     <div class="form-group">
    <label for="Textarea1">Example textarea</label>
    

        
        <?php showTextarea($obj); ?>
        
    
  </div>
             <button class="btn btn-primary update" type="submit">Enter text</button>        
                    
                </form>
                
            </div>
          </div> 
        </div>
  
  <!-- JQuery -->    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>		
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
		
	
		<script type="text/javascript">
		
	  $('.accordion').click(function() {
         
         var $this = $(this).toggleClass('active');
         var $panel = $this.next().toggleClass('show');
        // $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
       
	      
	  });
		
		 $('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	       
	        if($('.myTextareas').attr('idTextarea').val() == id) {
	            
	            $('.myTextareas').toggleClass('.showTextarea');
	        }
	        
	        
	        $(id).val('');
		     
		
	      
	  });
		
		
		
		$.ajax ({
			
		
			
			});
	
	</script>
		
		
		
		
	</body>

Geändert von Iago2 (08.04.2020 um 01:02 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2020, 02:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Ok, also der Code funktioniert, ich habe das Attribut data-textareaId anstatt idTextarea.

Der nächste Schritt ist dann toggleClass anstatt css anzuwenden.


Code:
 $('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	    
	       $('.myTextareas').each(function() {
	           
	           if($(this).attr("data-textareaId") == id) {
	           
	                $(this).css("display","block");
	                $('.myTextareas').not(this).css("display","none");
	           }
	           
	       });
Mit Zitat antworten
  #5 (permalink)  
Alt 08.04.2020, 09:47
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

Du brauchst hier kein .each(), du kannst es auch folgendermaßen schreiben:

Code:
$('.headlines').on('click', function() {
  const id = $(this).data('textId');
  $('.myTextareas').hide().filter('[data-textareaId="'+id+'"]').show();
});
Ungetestet, aber so sollte es funktionieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.04.2020, 01:41
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
Du brauchst hier kein .each(), du kannst es auch folgendermaßen schreiben:

Code:
$('.headlines').on('click', function() {
  const id = $(this).data('textId');
  $('.myTextareas').hide().filter('[data-textareaId="'+id+'"]').show();
});
Ungetestet, aber so sollte es funktionieren.
O.k., danke, macht Sinn! Ich hab an toggleClass gedacht, damit ich CSS-Effekte einbauen kann. Ich versuche das mal nachzubauen auf Grund der Funktion, die ich für das Akkordion habe.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.04.2020, 09:19
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

.toggleClass ist sehr praktisch und soll auch verwendet werden. Für einfaches ein- ausblenden hat jQuery aber auch show()/hide() bzw slideIn()/slideOut()/slideToggle() anzubieten.
Mit Zitat antworten
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
Accordion / Felder Anordnung, Steuerung funktioniert nicht Iago2 Javascript & Ajax 27 15.02.2020 15:03
Brauche Hilfe bei Steuerung Synonym123 CSS 6 14.02.2012 21:20
IE7: input-text nach zurückscrollen fehlerhaft angezeigt eastsound01 CSS 0 10.12.2008 15:26
mit height - angabe darstellung in ie Internetexplorer fehlerhaft verschoben mail CSS 5 19.04.2007 16:53
Quelltext fehlerhaft? Knuddelkamel CSS 13 27.10.2004 01:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:55 Uhr.