Zum Inhalt springen

TCA userfunc und jQuery nutzen

Erstellt am 12. Mai 2014 · 4 Antworten · letzte Antwort am 17. Dezember 2016

Tags: TCA, JavaScript & AJAX, TYPO3 6.x, Frage

ironpfu ·

Hallo zusammen,
Ich arbeite gerade an einer Extension (Extbase/fluid) und
ich nutze in der TCA eine eigene userfunc um das Eingabefeld entsprechend anzupassen.
Soweit so einfach.

Nun benötige ich jQuery um Benutzereingabe besser verarbeiten zu können.
Ich habe festgestellt, dass hier in einem eigenen Frame "alt_doc" gerendert wird, welche standardmäßig jQuery einbinden sollte:

<!-- TYPO3 Script ID: typo3/alt_doc.php -->

-->
/*]]>*/
</style>

<script src="contrib/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
var TYPO3 = TYPO3 || {}; TYPO3.jQuery = jQuery.noConflict(true);
/*]]>*/

Wenn ich nun in meiner userfunc folgenden Code aufrufe:

 <script type="text/javascript">
			$(function () {
				$(".map").maphilight();
				
				$("map[name=body_Map] area").click(function () {
	    			alert($(this).attr("part")); 
					$( "input[name=\"' . $PA['itemFormElName'] . '\"]" ).val($(this).attr("part"));
				});
			});
		</script>

Kommt es zu folgender Fehlermeldung:

TypeError: $ is undefined

Nun habe ich folgende Lösungen versucht:
Eigenes jQuery direkt im code einzubinden (sehr unsauber)
Das Problem dabei ist, dass nun alles Läuft aber die Typo3 Funktionen gestört/beeinträchtigt werden (wie zB. das Speichern)

<script  type="text/javascript" src="'.t3lib_extMgm::extRelPath('pmt').'Resources/Public/BodyMap/jquery-2.1.1.min.js"></script>

Zweiter Lösungsversuch:
jQuery im header einzubinden, welches ebenfalls zu einem Konflikt mit der Standardeinbindung führt.

# include own JS
$renderer = t3lib_div::makeInstance('t3lib_PageRenderer');
$renderer->addJsFile(t3lib_extMgm::extRelPath('pmt').'Resources/Public/BodyMap/jquery-1.9.0.js');

Hat hier jemand Erfahrung bzw. einen Tipp, wich ich jQuery in einer TCA userfunc nutzen kann?

jenses ·

jQuery läuft (wie man auch sehr schön in dem von dir geposteten Codeschnipsel sehen kann) im noConflict-Mode.
Schon mal was davon gehört?

Ersetze in deinem Code alle Vorkommen von "$" durch "jQuery", und alles wird gut.

ironpfu ·

Danke für deine Antwort. Das mit dem noConflict war mir nicht bewusst. Leider löst dies aber auch nicht mein Problem:

TypeError: jQuery is undefined

Wie bereits beschrieben wird jQuery eingebuden, steht aber aus einem mir unerklärlichen Grund in der userFunc nicht zur Verfügung. Andere Idee?

P.S.: Ich denke es liegt daran, dass die jQuery im Header geladen wird und das javascript aus der userfunc irgendwie zu früh geladen wird?

jenses · · Beste Antwort

Ich sehe gerade, daß es "TYPO3.jQuery" statt "jQuery" heißen muß.

Ansonsten könntest du dein Script noch kapseln mit z.B. window.onload=function(){SomeJavaScriptCode};

matthias_k ·

Entweder:
mal schauen was :

JQUERY_NAMESPACE_DEFAULT_NOCONFLICT

macht ;-)
https://typo3.org/api/typo3cms/class_t_y_p_o3_1_1_c_m_s_1_1_core_1_1_page_1_1_page_renderer.html#a5aadc370a25af51f60339039da973b90
denn das schlimme ist ja beim "jQuery.noConflict(true);" das true, was jQuery komplett "entfernt".
oder... am anfang von deinem js jQuery wieder zurückmappen...

var jQuery = TYPO3.jQuery;
// nu is jQuery wieder am Start
jQuery(document).ready(function () {
    jQuery('#whatever').....
});

was man nur machen sollte, wenn man jQuery Sachen einbindet, denen man das nicht anders beibringen kann oder will.

oder du packst es in einen wrapper, wenn du das nur so am rande brauchst:

// wrapper begin
(function ($) {
    // nu haste wieder $ wie gewohnt...
    $(document).ready(function () {
        $('#whatever').....
    });
    // uuuuuund ende...
}(TYPO3.jQuery));
// wrapper ende