Zum Inhalt springen

Jquery in Extension einbinden und nutzen

Erstellt am 27. März 2012 · 4 Antworten · letzte Antwort am 29. März 2012

Tags: Frage

auxiliumseeker ·

Hallo zusammen,

zurzeit versuche ich mich an Jquery, das ich gerne in einer Extension nutzen möchte.

Ich habe nun analog zu einem Beispiel aus dem Internet, versucht Jquery einzubinden und zu nutzen.

die Einbindung war zwar erfolgreich, allerdings sehe ich keine Reaktion.

hat jemand vllt eine idee, was hier falsch läuft:

hier die einfache main methode

function main($content, $conf) {
		$this->conf = $conf;
		$this->pi_setPiVarDefaults();
		$this->pi_loadLL();
		
		
		$js =  '
 $(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});';
  
				
		
		
		
		//load jquery
		$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = '<script type="text/javascript" src="' . $GLOBALS['TSFE']->baseUrl . 'typo3conf/ext/testextension/res/jquery-1.7.2.min.js" language="JavaScript"></script>';
		
		//load css
		$GLOBALS['TSFE']->additionalHeaderData[$this->extKey] = '<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>';
		
		//set javascript
		$GLOBALS['TSFE']->setJS($this->extKey, $js);
		
		
		$content='
	<input id="tags" />';
	
		return $this->pi_wrapInBaseClass($content);
	}
}
king.​darki ·

Hallo,

bekommst du denn Inhalt auf deiner Seite angezeigt?
Kannst du mal deinen HTML-Quellcode zeigen, der dir ausgegeben wird?

Grüße Patrick

auxiliumseeker ·

Also anbei habe ich mal die wichtigsten Codestellen rauskopiert.

<script type="text/javascript" src="typo3conf/ext/t3blog/static/js/globalFuncs.js"></script>
<script type="text/javascript" src="http://typo3dev.uni-trier.de/entwicklung4/typo3conf/ext/testdaniel/res/jquery-1.7.2.min.js" language="JavaScript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
	/*<![CDATA[*/
<!--
		// JS function for mouse-over
	function over(name,imgObj)	{	//
		if (version == "n3" && document[name]) {document[name].src = eval(name+"_h.src");}
		else if (document.getElementById && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_h.src");}
		else if (imgObj)	{imgObj.src = eval(name+"_h.src");}
	}
		// JS function for mouse-out
	function out(name,imgObj)	{	//
		if (version == "n3" && document[name]) {document[name].src = eval(name+"_n.src");}
		else if (document.getElementById && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_n.src");}
		else if (imgObj)	{imgObj.src = eval(name+"_n.src");}
	}

 $(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags,
			minChars:1
		});
	});

// -->
	/*]]>*/


	<div id="contentContainer">
					<div id="content" class="clearfix">

						
						<!--TYPO3SEARCH_begin--><div id="c82765" class="csc-default"><div class="tx-extensiontest-pi3">
		
	<input id="autocomplete" />
	</div>
	</div><!--TYPO3SEARCH_end-->
					</div> 
</script>
king.​darki ·

Und wenn du jetzt z. B. ein P in dein Feld eingibst, passiert gar nichts?

In welchem Browser testest du denn? Benutz mal Google Chrome oder Firefox mit Firebug und schau, ob du Javascript-Fehler angezeigt bekommst.

Denn dein Quellcode schaut soweit in Ordnung aus...

Grüße Patrick

auxiliumseeker ·

habe das problem nun gelöst, indem ich noch die jquery-ui. js eingebunden habe.

Das Problem war nämlich, dass er vorher die methode autocomplete nicht finden konnte....

Dazu ist mir noch ein anderes problem aufgefallen:

Wenn ich nun umlaute in folgender form in meinem javascript code habe, wie bekommt man es dann hin, dass jquery nun auch auf die Eingabe "ä" reagiert, statt auf &auml;.

Hat da jemand eine Idee?

 $(function() {
		var availableTags = [
			"&auml;ndern",
"&Ouml;l"
		];
		$( "#tags" ).autocomplete({
			source: availableTags,
			minChars:1
		});
	});