Can't call inline javascript function from external scripts

Question

I declared a function in a inline script at the beginning of my body tags. Then in an external script. On a form submit. it trigger an anonymous function that handle data from the form and submit a $.ajax method. The external script is called at the end of the file

The problem is that I assigned a function name in my form tag as a 'data-success="functionName"'. It does trigger the function in the external script. But the external scripts doesnt recognize the inline function called in the html file.

Here an 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>

EXTERNAL 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);
})
});

T.J. Crowder · Accepted Answer · 2017-02-23 17:30:40Z

3

Your searchResult is a local within your ready callback, it's not accessible from outside that ready callback.

You could make it global by moving it out:

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

function searchResult(data) {
  alert()
}

...and then it would be accessible to code outside that callback (such as in your other scripts).

But globals are a Bad Thing™. :-) You might look at Webpack, Browserify, or similar packaging/bundling systems that let you write discrete script files with dependencies, but without using globals, by using an import mechanism. (It's even possible to use the new import and export mechanism defined in ES2015+ [aka "ES6"] if you use a transpiler like Babel and one of those bundlers.)

answered Feb 23, 2017 at 17:30

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't call inline javascript function from external scripts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related