Est-ce une manière correcte d'appeler une fonction javascript?

Question

Est-ce la manière correcte d'appeler ma fonction javascript avec jquery? J'ai passé les 5 dernières heures à essayer de comprendre pourquoi cela ne fonctionnera pas.

<form class="rpt" id="rpt" action=""> 

---

$(function() { 
    $("#rpt").submit(doSave); 
}); 
</script> 

---

Voici le petit bout de code dans le javascript éditeur WYSIWYG. J'utilise toujours la même balise de formulaire dans mon code HTML.

 // Save 
     case "Save": 
      WYSIWYG.updateTextArea(n); 
      var form = WYSIWYG_Core.findParentNode("FORM", this.getEditor(n)); 
      if(form == null) { 
       alert("Can not submit the content, because no form element found."); 
       return; 
      } 
      form.submit(); 
     break; 

Answer 1

Il est encore plus simple que cela:

$("#rpt").submit(doSave); 

Si cela ne fonctionne pas, il est parce que vous travaillez avec un ensemble JQuery, même si vous êtes intéressé à soumettre l'élément de formulaire. Si oui, essayez de convaincre JQuery que c'est seulement un seul élément:

$("#rpt").eq(0).submit(doSave); 

Answer 2

Depuis « rpt » est le nom de la classe et le nom de la forme, vous pouvez utiliser « » ou "#" et cela fonctionnera en supposant que "doSave" est le nom d'une fonction à utiliser comme callback. Ainsi, il peut être appelé comme ceci:

$(".rpt").submit(doSave); 
function doSave(){ 
    //do something 
} 

ou vous pouvez avoir la fonction elle-même peut être le paramètre:

$(".rpt").submit(function(){ 
    //do something here 
}); 

EDIT: Si vous ne voulez pas la forme de publication. Ajouter un "return false".

$("#rpt").submit(doSave); 
function doSave(){ 
    //do something 
    alert("form submit fired"); 
    return false; 
} 

Answer 3

Il existe deux variantes de la fonction submit. Si vous appelez $('#rpt').submit(); vous déclenchez l'événement "submit" du formulaire. Si vous appelez $('#rpt').submit(myFunctionName); Vous liez myFunctionName à l'événement "submit" du formulaire. Ce ne sera pas être lancé lorsque la page se charge, mais seulement lorsque vous essayez de soumettre le formulaire. En tant que tel, ce code:

<form id="rpt" method="GET" action="http://www.google.com/search"> 
Search: <input type="text" name="q"> <input type="submit" value="Go"> 
</form> 

Et ce Javascript:

function myFunctionName() { 
    alert('The form is being submitted!'); 
    return false; // cancel the event (ie, the form will not be sent) 
} 
$(function() { 
    $('#rpt').submit(myFunctionName); 
}); 

appellera la fonction myFunctionNameque lorsque le formulaire est soumis (soit manuellement en appuyant sur le bouton « Go » ou en appuyant sur entrez lorsque le champ de texte est mis au point). Here is a sample of it at work. Si vous voulez exécuter une fonction particulière lorsque la page se charge, tout ce que vous avez à faire est de passer quelque chose à la fonction $(document).ready(); ou $() pour faire court:

function onLoadDoThis() { 
    alert('Page is loaded!'); 
} 
$(document).ready(onLoadDoThis); // $(onLoadDoThis); is the same thing 

Et here is an example of this. Espérons que cela défriché trucs ...

EDIT

Ok, donc je fouetta un exemple concret de ce que vous essayez de faire. Au début, j'étais ennuyé que vous ne puissiez pas faire fonctionner cela, mais il y avait en fait un certain nombre de limitations que vous avez à contourner à cause de la merditude de cet éditeur.Quoi qu'il en soit, sur l'explication:

Le premier problème est que la bibliothèque remplace l'utilisation de $ pour sa propre petite fonction. Donc, l'awesomeness jQuery n'est pas possible de la façon habituelle. Heureusement, jQuery is awesome et vous pouvez contourner cela en faisant quelque chose comme ceci:

$j = jQuery.noConflict(); 

Maintenant, au lieu de faire $(...); que vous devez faire $j(...);. Si vous n'êtes pas au courant, il est probable que vous essayiez d'écrire du code jQuery et que rien ne se passait.

Le prochain obstacle vous avez probablement HAVING est que pour la plupart événements, quand vous faites quelque chose comme $(selector).myevent(aFunction); on suppose que faire $(selector).myevent(); se déclenche ledit événement. Cependant, this is not true of the submit event. À moins que l'action de formulaire soit déclenchée par un utilisateur le code que vous liez à l'envoi d'un formulaire ne sera pas appelé lorsque le formulaire est soumis par le code. Donc, même si la ligne dans le code source de l'éditeur form.submit(); renvoie simplement l'événement de soumission natif du formulaire, même si vous liez un événement à cet événement avec Javascript, il ne sera pas appelé dans cette circonstance parce que l'utilisateur n'a pas ne déclenche pas l'événement submit, le code l'a fait.

En raison de cette limitation, il devient de plus en plus difficile d'obtenir ce que vous voulez sans modifier le code source de l'éditeur. Vous voyez, l'éditeur joint son truc "créer tout le bord du tableau de bord" à l'événement de chargement de la fenêtre. Cet événement se déclenche après l'événement DOM de jQuery, car tout le point de jQuery est prêt à tirer le plus tôt possible et pas une seconde plus tard, alors que window.load prend son temps doux. Nous devons donc abandonner le code de liaison jQuery (grimace) et utiliser le code de liaison de l'éditeur pour attacher un événement directement après sa propre fonction "créer le tableau de bord". À ce stade, le tableau de bord a déjà été créé afin que nous puissions accéder au bouton Enregistrer et le faire faire ce que nous voulons - seulement après avoir supprimé son événement d'origine d'appeler la fonction 'Enregistrer' que vous avez trouvé dans le code source.

A la fin de la journée, le code finit par ressembler à ceci:

$j = jQuery.noConflict(); // give up ownership of $ to WYSIWYG 

WYSIWYG.attach('textarea1', full); // first attach the event to create this widget 

WYSIWYG_Core.addEvent(window, "load", function() { 
    // and now override the Save button 
    // the removeAttr('onclick') is crucial to stop it 
    // from doing what it normally does (Which is submit the form) 
    $j('#Save').removeAttr('onclick').click(function() { 
     var form = $j('#myform'); 
     var data = form.serialize(); 
     var type = form.attr('method'); 
     var url = form.attr('action'); 
     $j.ajax({ 
      url: url, 
      type: type, 
      data: data, 
      dataType: 'json', 
      success: function(d) { 
       if(d.success == 1) { 
        $j('#notice').html('Everything went alright! High fives.'); 
       } else { 
        $j('#notice').html('Something went wrong. Eep.'); 
       } 
      } 
     });   
    }); 
}); 

Alors que my_handler.php est un script très simple qui renvoie simplement une chaîne JSON:

<?php 
// process your stuff here, set success as 1 or 0 
$success = 1; 
print json_encode(array('success' => $success)); 
?> 

And here is an example of it in action.

Personnellement, je n'aime vraiment pas cet éditeur en particulier et je vous suggère de vérifier quelque chose d'autre.

De toute façon, cependant, j'espère que cela a aidé.

Answer 4

Il est possible que la fonction doSave doive être définie plus tôt dans la source que le code qui la lie à l'événement submit ...

Ce code ne fonctionne pas

// doSave is undefined at this point 
$("#rpt").submit(doSave); 

// Now we've defined doSave, but it's too late. 
function doSave(){ 
    //do something 
    alert("form submit fired"); 
    return false; 
} 

Je crois que ce code devrait fonctionner:

$("#rpt").submit(function(){ 
    alert("submitted"); 
    return false;  
}); 

Ou si vous devez définir doSave séparément, essayez ceci:

// First define doSave 
function doSave(){ 
    //do something 
    alert("form submit fired"); 
    return false; 
} 

// Then bind it 
$("#rpt").submit(doSave);