[JS] Ketchup-Plugin funktioniert nicht

**Mazl** · 17.06.2010 09:56

Hallo,

ich habe vor kurzem das Ketchup-Plugin (http://demos.usejquery.com/ketchup-plugin/) gefunden, welches ich unbedingt einsetzen möchte, jedoch funktioniert es bei mir nicht.. Ich habe danach einfach einmal alle Dateien aus der .rar-Datei auf meinen Space gepackt um zu schauen, ob es bei der Example-Datei funktioniert, aber auch da kann ich das Formular einfach anschicken, ohne dass es ausgefüllt ist..

Jemand eine Idee, wieso es nicht funktioniert? :( Die Verweise zu den css/js Dateien sind richtig gesetzt.. :(

<!DOCTYPE html>
<html lang="en">
<head>
<meta **********="content-type" content="text/html; charset=UTF-8" />

<title>Ketchup Plugin</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>

<h2>Outcome (Try to submit the form)</h2>
<form action="index.html" id="example1">
<div>
<label for="ex1_username">Username</label>
<input type="text" id="ex1_username" class="validate(required, username)" />
</div>
<div>
<label for="ex1_password">Password</label>
<input type="password" id="ex1_password" class="validate(required)" />
</div>
<div>
<label for="ex1_password_conf">Password Confirmation</label>
<input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
</div>
<div>
<label for="ex1_roles">Speciality</label>
<p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
<p><input type="checkbox" name="role" value="js" /> JavaScript</p>
<p><input type="checkbox" name="role" value="rails" /> Rails</p>
<p><input type="checkbox" name="role" value="php" /> PHP</p>
<p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
<p><input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" /> Other</p>
<div class="clear"></div>
</div>
<div>
<label for="ex1_about">About you</label>
<textarea id="ex1_about" rows="1" class="validate(rangelength(10,140))"></textarea>
</div>
<div class="submit">
<input type="submit" value="(Try to) Submit" />
</div>
</form>

</body>
</html>

Grüße
Marcel

/edit: Problem gelöst (21.06.2010)!

**netzgeek** · 17.06.2010 10:00

das wird vermutlich an dem konflickt zwischen mootools und jquery liegen

füge diesen code mal in den head bereich ganz oben ein deiner index.php deines templates und schaue ob es dann funktioniert

http://www.seobasis.de/mootools-und-...-15-entfernen/

EDIT: Achso habe nicht komplett zuende gelesen, du musst die Funktion natürlich noch aufrufen
In den Head Bereich

Code:

<scrip t>
$(document).ready(function() {
  $('#example1').ketchup();
});
</script>

Kurze Erklärung: Wenn das Dokument geladen ist, nehme die ID #example1 und führe ketchup aus

**Mazl** · 17.06.2010 10:24

Hi,

ich versuche ja erstmal das ganze ohne Joomla! ans laufen zu bekommen, wenn es dann ohne Joomla! läuft versuche ichs umzusetzen.

Ich habe jetzt mal deinen Rat befolgt, leider immernoch kein Erfolg.. :(

Der Code sieht jetzt so aus:

<!DOCTYPE html>
<html lang="en">
<head>
<meta **********="content-type" content="text/html; charset=UTF-8" />

<title>Ketchup Plugin</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<scrip t>
$(document).ready(function() {
$('#example1').ketchup();
});
</script>
</head>

<body>

<h2>Outcome (Try to submit the form)</h2>
<form action="index.html" id="example1">
<div>
<label for="ex1_username">Username</label>
<input type="text" id="ex1_username" class="validate(required, username)" />
</div>
<div>
<label for="ex1_password">Password</label>
<input type="password" id="ex1_password" class="validate(required)" />
</div>
<div>
<label for="ex1_password_conf">Password Confirmation</label>
<input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
</div>
<div>
<label for="ex1_roles">Speciality</label>
<p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
<p><input type="checkbox" name="role" value="js" /> JavaScript</p>
<p><input type="checkbox" name="role" value="rails" /> Rails</p>
<p><input type="checkbox" name="role" value="php" /> PHP</p>
<p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
<p><input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" /> Other</p>
<div class="clear"></div>
</div>
<div>
<label for="ex1_about">About you</label>
<textarea id="ex1_about" rows="1" class="validate(rangelength(10,140))"></textarea>
</div>
<div class="submit">
<input type="submit" value="(Try to) Submit" />
</div>
</form>

</body>
</html>

/edit: Musste hier im Forum im scrip t-Tag ein Leerzeichen machen, weil es sonst nicht angezeigt wird, ist im Quellcode natürlich nicht.

**bembelimen** · 17.06.2010 15:22

Warum zur Hölle wird immer versucht JQuery in Joomla! einzubauen? Das macht sowas von keinen Sinn, da Mootools das alles auch kann.

Formulare validieren nebenbei auch...

**Mazl** · 18.06.2010 07:44

Zitat von bembelimen

Warum zur Hölle wird immer versucht JQuery in Joomla! einzubauen? Das macht sowas von keinen Sinn, da Mootools das alles auch kann.

Formulare validieren nebenbei auch...

Naja, weil das Ketchup-Plugin genau so ist, wie ich es benötige. Ich wiederhole es aber nochmal: Das Problem ist nicht, dass es in Joomla nicht läuft, ich teste es gerade ohne Joomla mit den Beispieldateien und es funktioniert einfach nicht.. Sobald ich es halt ans laufen bekommen habe möchte ich es in Joomla! einbauen, aber so weit bin ich ja noch garnicht..

Irgendwer noch eine Idee, wieso es nicht funktioniert?

**Mazl** · 21.06.2010 09:24

Ich habe es hinbekommen, danke euch für die Hilfestellung. :) Das ganze musste einfach unter das Formular und nicht in den Header, eigentlich auch logisch wenn man es mal bedenkt. :D

Ist also erledigt und funktioniert auch in Joomla! ohne Probleme!

Thema: [JS] Ketchup-Plugin funktioniert nicht

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

[JS] Ketchup-Plugin funktioniert nicht

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen