GELÖST: Inserttags innerhalb Javascript

[pyretta]

Hallo,

ich möchte auf unserer Seite ein Tool anbieten, womit der Nutzer Textbausteine zusammenstellen und bspw. als HTML-Code ausgeben kann. Die Textbausteine sollen wegen der leichteren Pflege ganz normale Artikel sein.

Jetzt dachte ich, ich könnte die Artikel ja per Insert-Tag einfügen lassen. Da ich aber auf Javascript zurückgreifen muss, weil die ganze Action clientseitig stattfindet, scheinen diese nicht zu funktionieren.

Bisher habe ich folgenden Code auf jQuery-Basis:

<div id="tool_inhalte">
	<div class="tool_con">
		<div data-artid="123" id="a1">Beispieltext 1</div>
		<div data-artid="456" id="a2">Beispieltext 2</div>  
	</div>
	<div class="tool_con"  >
		<div data-artid="789" id="a3">Beispieltext 3</div> 
	</div>
</div>

<div id="tool_ausgabe">
<!-- hier Artikel einfügen -->
</div>

<script type="text/javascript">
var inserttag_part1 = "{{insert_article::";
var inserttag_part2 = "}}";

 $('.tool_con div').click(function(){
	 var tool_con_id = $(this).attr('id');
	 var art_id = $(this).attr('data-artid'); 
	 tool_ausgabe(art_id, tool_con_id);	
}); 

function tool_ausgabe(art_id, tool_con_id){
	var artikel = "<div id='artid_"+art_id +"'>"+inserttag_part1 + art_id + inserttag_part2+"</div>";
	var this_object = $('#'+tool_con_id);
	if(this_object.hasClass('selected')==true){
		this_object.removeClass('selected');
		$('#artid_'+art_id).remove();
	}else{		
		this_object.addClass('selected');
		$('#tool_ausgabe').append(artikel);
	}
}
</script>

Gibt es da Alternativen zu Inserttags? Bzw. gibt es eine Möglichkeit diese innerhalb von Javascript zu verwenden?

[valentin_]

hallo, php funktioniert serverseitig - deshalb muessten die artikel schon beim laden der seite eingefuegt und dann bei klick sichtbar/unsichtbar geschaltet werden.

such mal nach einer tab erweiterung fuer contao. damit kannst du inhalte "umschalten" und kannst das ganze auch im backend definieren.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Tim G]

Gibt es da Alternativen zu Inserttags? Bzw. gibt es eine Möglichkeit diese innerhalb von Javascript zu verwenden?

Am besten nutzt Du eine moo_ Datei für dein JS. Dann kannst Du eigentlich alles nutzen.
Du kannst in einer JS Datei auch php nutzen, beim parsen der Seite. Viele Templates nutzen das.

var myPhpVar = '<?php echo $myPhpVar; ?>';

Inserttags sollten über <?php echo $this->replaceInsertTags('{{meinInsertTag}}'); ?> ausgeführt werden.
Aber wie gesagt, alles beim parsen des Templates.

Sonst musst du bissel Ajax nehmen oder, wie oben bereits erwähnt, alles schon geladen haben und unsichtbar geschaltet.

[pyretta]

Vielen Dank valentin_ und Tim G für eure schnellen und sehr hilfreichen Antworten.
Werde eure Vorschläge gleich mal umsetzen.

Das mit "$this->replaceInsertTags" war mir neu und ist wirklich ein sehr guter Hinweis.

Vielen Dank.

[pyretta]

Nochmals vielen Dank, es funktioniert fabelhaft!

Habe es so gelöst, wie ihr beiden es vorgeschlagen habt.

Im Template habe ich das so vorbereitet:

<div style="display:none;" id="it_art_sammlung">
    <?php 
      echo "<div id='it_artid_182' class='it_article'>" . $this->replaceInsertTags('{{insert_article::182}}') . "</div>";
      echo "<div id='it_artid_183' class='it_article'>" . $this->replaceInsertTags('{{insert_article::183}}') . "</div>";
      echo "<div id='it_artid_184' class='it_article'>" . $this->replaceInsertTags('{{insert_article::184}}') . "</div>";
      echo "<div id='it_artid_185' class='it_article'>" . $this->replaceInsertTags('{{insert_article::185}}') . "</div>";
      echo "<div id='it_artid_186' class='it_article'>" . $this->replaceInsertTags('{{insert_article::186}}') . "</div>";
      echo "<div id='it_artid_187' class='it_article'>" . $this->replaceInsertTags('{{insert_article::187}}') . "</div>";
      echo "<div id='it_artid_188' class='it_article'>" . $this->replaceInsertTags('{{insert_article::188}}') . "</div>";
    ?>  
  </div>

und dann später mein jQuery-Part so angepasst:

<div id="tool_inhalte">
	<div class="tool_con">
		<div data-artid="182" id="a1">Beispieltext 1</div>
		<div data-artid="183" id="a2">Beispieltext 2</div>
		<div data-artid="184" id="a3">Beispieltext 3</div>
		<div data-artid="185" id="a4">Beispieltext 4</div>
		<div data-artid="186" id="a5">Beispieltext 5</div>
		<div data-artid="187" id="a6">Beispieltext 6</div>
		<div data-artid="188" id="a7">Beispieltext 7</div>
	</div>
</div>

<div id="tool_ausgabe">

</div>

<script type="text/javascript">
 jQuery('.tool_con div').click(function(){
	 var tool_con_id = jQuery(this).attr('id');
	 var art_id = jQuery(this).attr('data-artid');  
	 tool_ausgabe(art_id, tool_con_id);	
}); 

function tool_ausgabe(art_id, tool_con_id){
	var artikel_inside = jQuery('#it_artid_'+art_id).html();
	var artikel = "<div id='artid_"+art_id+"'>"+artikel_inside+"</div>";
	var this_object = jQuery('#'+tool_con_id);
	if(this_object.hasClass('selected')==true){
		this_object.removeClass('selected');
		jQuery('#artid_'+art_id).remove();
	}else{		
		this_object.addClass('selected');
		jQuery('#tool_ausgabe').append(artikel);
	}
}
</script>

In der Contao-Version 2.11.x habe ich noch zusätzlich die Erweiterung "jquery" installiert, damit die Einbindung von solchen Scripten reibungslos läuft. Man muss nur dabei beachten, dass man "NoConflict" aktiviert hat und im Script alle "$" durch "jQuery" ersetzt.

[Tim G]

Jup,
ich persönlich hole für sowas jquery immer per inserttag rein in den header.

$GLOBALS['TL_JAVASCRIPT'][] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'; 
$GLOBALS['TL_HEAD'][]         = '<script>$.noConflict();</script>'; 

[valentin_]

gut dass es funktioniert. schau dir bei gelegenheit vielleicht doch noch
https://contao.org/de/extension-list...030039.de.html an. die artikel koennten dann als inhaltselement eingebunden werden - etwas komfortabler und flexibler

Gesendet von meinem GT-I9505 mit Tapatalk 2

[pyretta]

@Tim G: Das ist natürlich auch eine sehr schicke Lösung. Nochmals Danke :-)

@valentin_: Coole Extention, aber leider kann ich sie, wenn ich es denn richtig verstanden habe, in meinem Fall nicht verwenden. Weil ich möchte nicht wie in einem Accordeon zwischen Inhalten umschalten, sondern Textbausteine aus Artikeln nehmen und daraus einen individuellen Text zusammenstellen lassen. Bzw. der Nutzer soll diese Möglichkeit haben. Er wählt dabei aus den Inhalten aus, und unten werden die Textbausteine aneinander gereiht bzw. unter einander ausgegeben. Aber trotzdem Danke für deinen Tipp.