JavaScript jQuery - DOM-Navigation(children) und Validation

[Stex]

Moin,

ich versuche im Moment, ein System von Prototype auf jQuery umzustellen. Insgesamt ist jQuery wirklich hübsch und schnell, aber die Umstellung ist gewöhnungsbedürftig.

Ich hätte zwei Fragen, die für Leute, die jQuery regelmäßig nutzen relativ einfach zu beantworten sein dürften (zumindest die erste):

1. Mit Prototype konnte ich einfach auf alle "indirekten" Kinder zugreifen (also z.B. von "start_element" auf "found_child"):

<div id="start_element"><div><div class="found_child"></div></div></div>

Das ging ganz einfach mit $('start_element').down('.found_child'), bei jQuery kann ich mit .children() aber scheinbar nur direkte Kinder erreichen. Habe ich da etwas grundlegendes übersehen?

2. Diese Frage bezieht sich auf https://docs.jquery.com/Plugins/Validation/

Options-Dokumentation: https://docs.jquery.com/Plugins/Validation/validate#options

$j('#notification_form').validate({
  ignore:  ':hidden', 
  rules: {skin_template_content: 
                {remote: {
                   type: 'post', 
                    data:  {
                       content: 'content',
                       subject: 'subject'}, 
                     url:  '/admin/skins/check_template_correctness/32'}}}})

Ich versuche, eine remote-validation hinzuzufügen (also ein Ajax-Request, der true/false zurückliefert und auf den diese validation wartet). Allerdings wird weder ein Fehler ausgegeben (auch mit debug:true nicht) noch wird der Request ausgeführt, die Regel wird einfach übergangen. Andere Regeln werden hingegen genutzt.

Ich habe zu Testzwecken die Parameter durch feste Werte ersetzt.

Sieht da jemand direkt den Fehler?

Vielen Dank schonmal im Voraus!

 

[chrissel]

Zum 1.:

// normalerweise so
$('#start_element .found_child');
// solltest du allerdings .found_child in einem bereits vorliegenden Element (z.B. zwischengespeichert in einer Variable  startElem  ) haben, dann so
$('.found_child', startElem);
// bzw 
startElem.find('.found_child');

.find() sollte .children() sein, nur nicht die direkten Kinder finden.
Die Dokumentation ist eigentlich super, passend zu deinem Problem: https://api.jquery.com/category/traversing/

 

[Stex]

Hm, ich bin fest davon ausgegangen, dass das über children() gehen würde und habe dabei die find()-Methode komplett übergangen (und trotzdem ewig gegoogled, allerdings ohne wirklich passende Begriffe).

Danke!

Edit: Läuft jetzt alles wunderbar und gefühlt dreimal so schnell wie mit Prototype

 

[chrissel]

Hm.. hatte nun mal Zeit mir dein zweites Problem anzuschauen.
Ich sehe da auf Anhieb keinen Fehler, außer: du benutzt $j(...) [warum j? Hast du jQuery vorher als $j definiert um Kollisionen vorzubeugen?] und am Ende ist kein Semikolon, beim Übertragen hierhin vergessen?
Am besten wäre da eine kleine Beispieldatei wo dein Problem ist.. dann kann man mal mit Firebug gucken. Falls du Firebug nicht kennst, ist wohl DAS Firefox-Addon für Webseitenentwicklung auf Client-Seite

 

[Stex]

Ohne Firebug wäre ich schon verloren gewesen, als ich mit Ajax angefangen habe, das ist immer das erste, was an addons installiert wird

Das Semikolon war in der Tat nicht da, aber da es sich nur um eine einzige Script-Zeile handelt, wurde das ignoriert.

Firebug gibt da keine Fehler/Warnungen zurück, auch wenn das Validation-Skript sich im Debug-Mode befindet.

$j hatte ich als

var $j = jQuery.noConflict();

definiert.

Ich habe mal eine Beispieldatei angehängt (diesmal nur mit jQuery()). Die Regel wird scheinbar komplett ignoriert, selbst das "required" wird nicht überprüft.

Nutze ich hingegen die classNames der Elemente (also z.B. class="required" bei der textarea) kann ich das Formular ohne value nicht abschicken.

Edit: Das hatte ich im ersten Post ganz vergessen: https://docs.jquery.com/Plugins/Validation/Methods/remote

 

[Stex]

Ich habe es jetzt anderweitig gelöst:

jQuery.validator.addMethod('templateCorrectness',  function(value, element) {
  var result = false;
  jQuery.ajax({
    url:  '/admin/skins/check_template_correctness/32', 
    type: 'post', 
    async:  false, 
    cache: false, 
    data: {
      content: 'foo',
      subject: 'bar'
    }, 
    success:  function(mes) {
       result = (mes == 'true')}}); 
  return result;},  'Your  template did not render correctly.');

Wenn ich jetzt meinem Feld die Klasse "templateCorrectness" gebe, wird das alles wie gewünscht validiert. Warum das andere nicht ging weiß ich allerdings immer noch nicht.