Impossible d'appeler la fonction javascript en ligne à partir de scripts externes

Question

J'ai déclaré une fonction dans un script en ligne au début de mes balises body. Puis dans un script externe. Sur un formulaire soumettre. il déclenche une fonction anonyme qui gère les données du formulaire et soumet une méthode $ .ajax. Le script externe est appelé à la fin du fichier

Le problème est que j'ai affecté un nom de fonction dans ma balise de formulaire en tant que 'data-success = "functionName"'. Cela déclenche la fonction dans le script externe. Mais les scripts externes ne reconnaissent pas la fonction inline appelée dans le fichier html.

Voici un exemple. https://jsfiddle.net/vsbmn8w1/?utm_source=website&utm_medium=embed&utm_campaign=vsbmn8w1

HTML

<script> 
    $(document).ready(function() { 

    // The Inline function that dont get called externally 
    function searchResult(data) { 
     alert() 
    } 
}); 
</script> 

<!-- Trigger On Submit --> 
<form method="post" class="async-form" data-success="searchResult"> 
    <button type="submit">submit</button> 
</form> 

EXTERNE SCRIPT

$(document).ready(function() { 
    $(document).on("submit", "form.async-form", function(event) { 
    // Declare form in a variable 
    var $this = $(this); 

    // Prevent Page reloading 
    event.preventDefault(); 

    // Collect Form parameters 
    var action = $this.prop('action'); 
    var method = $this.prop('method'); 
    var form = $this.serialize(); 

    // Default request object 
    var request = { 
    url: action, 
    type: method, 
    data: form 
    }; 

    // Adding parameter to the object if data exist 
    if (typeof $this.data('success') != 'undefined') { 
    request['success'] = $this.data('success'); 
    } 
    if (typeof $this.data('error') != 'undefined') { 
    request['error'] = $this.data('error'); 
    } 
    if (typeof $this.data('beforeSend') != 'undefined') { 
    request['beforeSend'] = $this.data('beforeSend'); 
    } 
    if (typeof $this.data('complete') != 'undefined') { 
    request['complete'] = $this.data('complete'); 
    } 

    // Finally make the ajax request 
    $.ajax(request); 
}) 
}); 

Answer 1

Votre searchResult est un local dans votre rappel ready, ce n'est pas accessible depuis l'extérieur que le rappel ready.

Vous pouvez la rendre globale en le déplaçant sur:

$(document).ready(function() { 
    // ...anything that needs to wait goes here... 
}); 

function searchResult(data) { 
    alert() 
} 

... et il serait accessible à code externe à ce rappel (comme dans vos autres scripts).

Mais les globales sont une mauvaise chose ™. :-) Vous pouvez regarder Webpack, Browserify, ou des systèmes d'empaquetage/groupage similaires qui vous permettent d'écrire des fichiers de script discrets avec des dépendances, mais sans utiliser de globals, en utilisant un mécanisme d'importation. (Il est même possible d'utiliser le nouveau mécanisme import et export défini dans ES2015 + [alias "ES6"] si vous utilisez un transpileur comme Babel et l'un de ces bundlers.)