Tags aus der Tabelle in Schleife ausgeben (ohne TagsCloud)

[jenda]

Hallo,

ich würde gerne die verwendete News-Tags aus der Tabelle in einer jQuery-Template ausgeben. Das heißt, ich möchte nicht die mit der Erweiterung gelieferte Template Tagscloud verwenden. Weiß bitte jemand, wie ich es machen kann? Für jede Hilfe wäre ich sehr dankbar.

Liebe Grüße,
Jan

[Spooky]

Das Modul Tag Cloud gibt ja bereits nichts anderes als eine Liste aus.

[jenda]

Danke für den Hinweis. Wie ich in der Beitragsüberschrift schreibe, will ich es umsetzen, ohne das Tagcloud-Modul zu verwenden. Ich möchte die PHP-Anweisung, die mir die nötigen Daten aus der Datenbank liefert, in eine jQuery-Vorlage eintragen. Das geht aber leider mit dem php-Code aus dem Tagcloud-Modul nicht.

[Spooky]

Danke für den Hinweis. Wie ich in der Beitragsüberschrift schreibe, will ich es umsetzen, ohne das Tagcloud-Modul zu verwenden. Ich möchte die PHP-Anweisung, die mir die nötigen Daten aus der Datenbank liefert, in eine jQuery-Vorlage eintragen. Das geht aber leider mit dem php-Code aus dem Tagcloud-Modul nicht.

Verstehe nicht genau was du vorhast. Angenommen du hättest die "PHP-Anweisung" dafür, wo genau setzt du diese dann hin? Zeig mal ein Beispiel.

[jenda]

Ich möchte einfach alle eingetragenen Schlagwörter in einer Schleife in einer jQuery-Vorlage ausgeben lassen, die für die Filterfunktion von der jQuery-Bibliothek Isotop zuständig ist. Das brauche ich dynamisch, damit diese automatisch in der jQuery-Vorlage auftauchen, sobald diese eingetragen werden.

// beim Start filtrieren
$container.isotope({ filter: '.hotels, .gebaeude, .event, .gastro, .smart, .business, .bueros HIERHER SOLLTE DER PHP-CODE KOMMEN' });

[Spooky]

Du könntest dir ein eigenes mod_tagcloud Template machen und einfach folgendes hinein schreiben:

<script>
var tags = [<?php echo implode( ',', array_map(function($v){return $v['tag_name'];}, $this->tags); ); ?>];
</script>

Im später eingebundenen jQuery Template kannst du mit dem JavaSCript Array "tags" machen was du willst (zB wieder zu einem string imploden und dort einfügen wo du es brauchst).

[jenda]

Danke. Man kann auch direkt in der jQuery-Template PHP schreiben, dafür benötige keine neue mod_tacloud-Template, oder?

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo $GLOBALS['TL_ASSETS']['JQUERY_UI']; ?>/jquery-ui.min.js"></script>
<script src="tl_files/inolares/js/isotope.min.js"></script>
<script>
  // init Isotope
var $container = $('#projektcontainer').isotope({
  // options
  	masonry: {
      columnWidth: '.layout_latest'
    }
});

// beim Start filtrieren
$container.isotope({ filter: '.hotels, .gebaeude, .event, .gastro, .smart, .business, .bueros' });    
// beim Klicken filtrieren
$('.projektfilter').on( 'click', 'li,h2', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});
</script>

[Spooky]

Naja, es ist sinnvoller das existierende Modul zu benutzen, da du in deinem eigenen Template dann nicht das halbe Modul vermeintlich nach programmieren musst. Wozu doppelte Arbeit?

[jenda]

Die tags_cloud-Template ist auf der Seite in der rechten Spalte im Einsatz, ich wollte eigentlich nur erzielen, dass die tags auch in die jQuery-Template dynamisch ausgegeben werden. Ich stehe mir gerade auf der Leitung, aber ist es dann wirklich nötig den javascript in das tags_cloud-Template einzutragen?

Gerne kannst du dir das anschauen (noch ist es eine Entwicklungsversion) www

[Spooky]

Die tags_cloud-Template ist auf der Seite in der rechten Spalte im Einsatz, ich wollte eigentlich nur erzielen, dass die tags auch in die jQuery-Template dynamisch ausgegeben werden. Ich stehe mir gerade auf der Leitung, aber ist es dann wirklich nötig den javascript in das tags_cloud-Template einzutragen?

Naja, du willst, dass die tags auch im JavaScript verfügbar sind. Und damit das der Fall ist, kannst du das Tag Cloud Modul dazu benutzen, JavaScript Code zu erzeugen, dass dir die Tags als JavaScript array bereitstellt. Dasselbe würdest du ja im Endeffekt auch in deiner ursprünglichen Idee machen.


Nachdem du aber sowieso die Tags schon auf der Seite per HTML ausgeben lässt (über das reguläre Tag Cloud Template) könntest du dir die Tags in deinem jQuery Template auch einfach so in ein array holen lassen:

var tags = [];
$("ul.cloud li").each( function() { tags.push( $(this).text() ); } ); 

Insgesamt:

<script>
  // init Isotope
var $container = $('#projektcontainer').isotope({
  // options
      masonry: {
      columnWidth: '.layout_latest'
    }
});

// beim Start filtrieren
var tags = [];
$("ul.cloud li").each( function() { tags.push( $(this).text() ); } );
$container.isotope({ filter: '.hotels, .gebaeude, .event, .gastro, .smart, .business, .bueros, .' + tags.join(', .') });    
// beim Klicken filtrieren
$('.projektfilter').on( 'click', 'li,h2', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});
</script> 

Das sollte man aber vielleicht noch in ein $(document).ready wrappen.

[jenda]

Super, vielen Dank. Das ist sehr lieb von dir.

[jenda]

Irgendwo sind die Einführungszeichen falsch. Ich kriege folgende Fehlermeldung, wenn ich den ersten Code in die Tagcloud-Template eintrage (eigentlich warnt mich schon der Editor, dass etwas nicht in Ordnung ist)

Parse error: syntax error, unexpected ';' in /homepages/18/d42828063/htdocs/subdomains/inolares-neu/templates/mod_tagcloud_projekte-als-navi.html5 on line 40

Und noch etwas: die Tags sollten in den Klammern stehen, nicht außerhalb, und zwar in folgendem Format .tagname Ich denke, dass es auch noch nicht richtig ist. Könntest du mir da bitte schnell helfen?

Vielen Dank. Liebe Grüße,
Jan

[Spooky]

Ja, der von mir gepostete Code ist ungetestet. Poste mal das ganze mod_tagcloud_projekte-als-navi.html5 Template. (Wieso hast du das jetzt doch wieder in einem mod_tagcloud Template..?)

[jenda]

Die in der rechten Spalte Navigation wird mittels dieser tagcloud-Vorlage generiert, wohingegen die j_isotope-Tamplate dann für die Filterung und Boxeinordnung sorgt.

<!-- indexer::stop -->
<div class="projektfilter ce_accordion <?php echo $this->class; ?> block tagcloud"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php if (strlen($this->empty_url) && $this->selectedtags > 0): ?>
<div class="reset"><a href="<?php echo $this->empty_url; ?>"><?php echo $this->lngEmpty; ?></a></div>
<?php endif; ?>
<?php if (count($this->relatedtags)): ?>

<h3><span id="related" class="toggle-button <?php echo (($this->expandedRelated) ? "" : "yes"); ?> off" onclick="TagCloudRequest.toggleTagCloud($(this), '<?php echo $this->pageID; ?>')"><?php echo $this->strRelatedTags; ?></span></h3>
<ul class="related"<?php echo (($this->topten && !$this->expandedRelated) ? ' style="display: none;"' : ''); ?>>
<?php foreach ($this->relatedtags as $tag): ?>
    <li><?php if (strlen($this->jumpTo)): ?><a href="<?php echo $tag['tag_url']; ?>" title="<?php echo $tag['tag_name'] . ' (' . $tag['tag_count'] . ')'; ?>"><span class="reltext"><?php endif; ?>+<?php echo $tag['tag_name']; ?><?php if (strlen($this->jumpTo)): ?></span><span class="relcount"><?php echo $tag['tag_count']; ?></span></a><?php endif; ?></li>
<?php endforeach; ?>
</ul>
<div style="clear: both;"></div>
<?php endif; ?>

<?php if ($this->topten): ?>
<h3><span id="topten" class="toggle-button <?php echo (($this->expandedTopTen) ? "" : "yes"); ?> off" onclick="TagCloudRequest.toggleTagCloud($(this), '<?php echo $this->pageID; ?>')"><?php echo $this->strTopTenTags; ?></span></h3>
<ul class="cloud"<?php echo ((!$this->expandedTopTen) ? ' style="display: none;"' : ''); ?>>
<?php foreach ($this->toptentags as $tag): ?>
    <li class="<?php echo $tag['tag_class']; ?>"><?php if (strlen($this->jumpTo)): ?><a href="<?php echo $tag['tag_url']; ?>" title="<?php echo $tag['tag_name'] . ' (' . $tag['tag_count'] . ')'; ?>"><?php endif; ?><?php echo $tag['tag_name']; ?><?php if (strlen($this->jumpTo)): ?></a><?php endif; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

<?php if (($this->topten) || (count($this->relatedtags))): ?>
<h3><span id="alltags" class="toggle-button <?php echo (($this->expandedAll) ? "" : "yes"); ?> off" onclick="TagCloudRequest.toggleTagCloud($(this), '<?php echo $this->pageID; ?>')"><?php echo $this->strAllTags; ?> (<?php echo $this->tagcount; ?>)</span></h3>
<?php endif; ?>
<div class="toggler"></div>
<div class="accordion">
<ul class="cloud"<?php echo (($this->topten && !$this->expandedAll) ? ' style="display: none;"' : ''); ?>>
<?php foreach ($this->tags as $tag): ?>
    <li data-filter=".<?php echo standardize($tag['tag_name']); ?>, .<?php echo standardize($tag['tag_name']); ?>-box" class="liste" class="liste"><?php echo $tag['tag_name']; ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<!-- indexer::continue -->

Ich denke, dass ich es missverstanden habe. Ich soll eigentlich nur etwas in die j_isotope-Template eintragen, oder?

[Spooky]

Achso, ja, ich meinte einfach diesen von dir geposteten code

<script>
  // init Isotope
var $container = $('#projektcontainer').isotope({
  // options
      masonry: {
      columnWidth: '.layout_latest'
    }
});

// beim Start filtrieren
$container.isotope({ filter: '.hotels, .gebaeude, .event, .gastro, .smart, .business, .bueros' });    
// beim Klicken filtrieren
$('.projektfilter').on( 'click', 'li,h2', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});
</script> 

mit dem von mir geposteten ersetzen, in welchem Template der auch immer steht (j_isotope?).

[jenda]

Danke, leider werden keine Tages übermittelt. Ich gehe davon aus, dass die Variable nicht weiß, aus welchem Tag genau sie sich die Daten holen soll. Außerdem bin ich mir nicht sicher, ob die Anweisung fürs Hinzufügen der Tags nicht auch in den Klammern stehen soll. Was denkst du?

[Spooky]

Ich weiß leider nicht was dein JavaSCript code überhaupt macht. Darüberhinaus sieht der Code auf der Website nicht so aus, wie ich ihn gepostet habe, da steht gerade nur

$container.isotope({filter: tags.join(',')}); 

statt

$container.isotope({ filter: '.hotels, .gebaeude, .event, .gastro, .smart, .business, .bueros, .' + tags.join(', .') }); 

// edit: achso, du hast dir das schon ein wenig abgewandelt

im "tags" array steht nun zB folgendes drin:

[ ".business-und-lifestyle", ".buero", ".buerogebaeude", ".einrichtung", ".entrauchungsanlagen", ".gebaeude", ".gebaeudetechnik", ".hotels", ".kaelteversorgung", ".loading-dock", ".lueftungsanlage", ".multimedia" ] 

[jenda]

Ich habe es schon gelöst:

var $container=$('#projektcontainer').isotope({masonry: {columnWidth: '.layout_latest'}});var tags=[];$("ul.cloud li").each( function(){tags.push( $(this).data('filter2') );});$container.isotope({filter: tags.join(',')});$('.projektfilter').on( 'click','li,h2',function(){var filterValue=$(this).attr('data-filter');$container.isotope({filter: filterValue});}); 

Dazu habe ich noch eine Zweite data-filter2 in der Navigation (Tagscloud-Tampate) eingerichtet, damit nur die echten Tags geliefert werden. Ansonsten habe ich auch die Datenerfassung in der Variable von dir auf den entsprechenden HTML-Tag in der rechten Spalte eingeschränkt.

Ich danke dir vielmals für die Hilfe. Ich hoffe, dass es vielen anderen auch helfen wird.