JQuery empty() und append() in mit einem Event

[soa]

Hallo,

ich habe eine Suche mit einem onClick-Event. Das Event sucht Dten und befüllt verschiedene DIV-Elemente. Führe ich die Suche ein 2. Mal durch, so werden die Ergebnisse an die bestehenden Ergebnisse angehängt.

Dies aus dem Grund, da ich $("#"+id).append('Mein HTML-Code') aufrufe. Ich würde also gern die bestehenden Daten löschen und
im Anschluß neu befüllen.

Ich rufe also vor dem append --> $("slides div".html('') auf oder $("slides div".empty(). Slides ist hierbei das Elternelement. Die Daten werden nun gelöscht, jedoch leider nicht wieder mit dem neuen Content gefüllt.

Meine Frage: Wie bewerkstellige ich es, den neuen Content anzeigen zu lassen, nachdem der Alte gelöscht wurde ?

Danke im Voraus.

 

[tombe]

Zeig uns doch mal wie dein Code oder die Funktion im Ganzen aussieht. Mit der Beschreibung alleine ein bisschen schwierig was zu sagen.

 

[soa]

Danke für die Rückmeldung. Gern. Ich nutze neben JQuery, JFLow als Slider für meine dynamischen Inhalte:

Meine Suchfunktion:

/*
	*
	*/
	function searchData(){
	 
          // Entweder hier leeren oder via Funktionsaufruf  weiter unten
	  $("#slides div").html('')
	
	   var search  = document.getElementById("Suche").value; 
	   var suchart = document.getElementById("Normal").value;
	   
	   var path = getSearchPath()
	   
	   if ( search.length > 2 && path != "" ){
	   
		 try{
		var list = document.jsapf.getSearchResults(path, search , "Normal") 
	  }
	  catch ( e){ alert( e )   }
	   }
	   else{
	     alert( "Suchbegriff muss mindestens 3 Zeichen lang sein.")
	   }
		setReultOutput ( list )
	
	}

// vor dem Befüllen, den Cntainer leeren
	function clearResult( ){
	
	  $("#slides div").empty()

	}

Die Funktion setResultOutput() ruft dann für jeden einzelnen Treffer die Funktion zum Ausgeben des Inhalts:

function readArticle( article , id ){

    if ( article == null )
	  return 

	      article = article.replace( "{" , "" );
	      article = article.replace( "}" , "" )


		var array = article.split( "),") ;

		 link = array[0].replace( "(" , "" )
		 autor = array[1].replace( "(" , "" )
		 beschreibung = array[2].replace( "(" , "" )
		 kategorie = array[3].replace( "(" , "" )
		 produkt = array[4].replace( "(" , "" )
		 betreff = array[5].replace( "(" , "" )


	       $("#"+id).append('<div class="artikel">\
									<tr>\
									<td width="170">\
										<p><strong>Produkt :</strong>'+produkt+'</p>\
									</td>\
									<td width="300" align="right">\
									 <p><strong>Kategorie :</strong>'+kategorie+'</p>\
									 </tr>\
									 <tr>\
									<td width="170">\
                					    '+betreff+'\
                     				</td>\
									</tr>\
									<tr>\
									<td>\
										<p>'+beschreibung+'</p>\
									</td>\
									</tr><tr>\
									<td>\
										<p><a href="'+link+'">Zum Artikel</a></p>\
									</td>\
									</tr><tr>\
									<td width="170">\
										<p>Autor : '+autor+'</p>\
									</td>\
									</tr>\
								   </div>')
	} // end of function

Ausgabe erfolgt in :

<div class="jflow-content-slider">
		  <div id="slides">  <!-- Hier der Content der Suche -->

            <div id="seite1" class="slide-wrapper"> 1</div>

			<div id="seite2" class="slide-wrapper"> 2</div>

			<div id="seite3" class="slide-wrapper"> 3</div>

			<div id="seite4" class="slide-wrapper"> 4</div>

     </div>
</div>
…

Ich hoffe, dass es so verständlich ist. Vielen Dank.

Hallo zusammen,

ich habe die Ausgabe soweit hinbekommen und irgendwie ein Verständnisproblem mit meiner Navigation. Ich bekomme eine bestimmte Anzahl von Seiten geliefert und möchte meine Navigation auf die Seitenzahl anpassen.

Ich bearbeite also mein HTML-Code:

<div id="myController">
		 <span  class="jFlowPrev">Prev</span>
          <span id="1"class="jFlowControl">1</span>
          <span id="2"class="jFlowControl">2</span>
          <span id="3"class="jFlowControl">3</span>
          <span id="4"class="jFlowControl">4</span>
          <span id="5"class="jFlowControl">5</span>
<span class="jFlowPrev">Next</span>
		</div>

beispielsweise mit dieser Methode, um die Anzahl der Seiten anzupassen:

function createNavigation( pages ){

   $("#myController").empty();
		  
		   navi = '<span class="jFlowPrev">Prev</span>'
		   
           for ( var i = 1; i <= pages ; i++){
  			navi += '<span class="jFlowControl">'+i+'</span>'
  			
  			}
		   navi += '<span class="jFlowNext">Next</span>'
		   
		$("#myController").html( navi );
		   
}

Die Anpassung erfolgt zwar, jedoch wird kein Event mehr ausgelöst, wenn ich auf die Span-Felder klicke. Warum nicht.
JS hat irgendwie den Focus verloren.

Möglicherweise muss ich hier mit der on() Funktion arbeiten, damit trotz der dynamischen HTML-Code Generierung das Event ausgelöst wird. Ich weiss leider nicht wie. Hat jemand einen Rat ?

Danke

 

[Yaslaw]

Willst du nicht am Ende der Befehlszeilen jeweils ein ; setzen? Ich sehe gerade 3 Fehlende

 

[soa]

Hallo,

normalerweise programmiere ich kein JS. Das ist sicherlich nicht einheitlich, da hast du Recht. Nur, auch, wenn die Syntax von JS ein Semikolon verlangt, funktioniert der Code auch ohne. Meine JS-Konsole im IE und Firefox hat mir hier keine Fehler geworfen. Das wäre bei Java oder PHP natürlich anders. Ich werde das aus stilistischen Gründen mal anpassen, danke.

Zu meinem Problem mit der Navigation: Hättest Du hier einen Hinweis, aus welchem Grund meine Slider-Navigation nach der Generierung nicht funktioniert. Danke im Voraus.