{"id":1349,"date":"2022-08-30T15:15:47","date_gmt":"2022-08-30T15:15:47","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/13\/unsuccessfully-calling-a-function-defined-in-js-file-2-from-a-function-in-js-file-1-after-the-page-has-loaded-on-click-event-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:15:47","modified_gmt":"2022-08-30T15:15:47","slug":"unsuccessfully-calling-a-function-defined-in-js-file-2-from-a-function-in-js-file-1-after-the-page-has-loaded-on-click-event-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/unsuccessfully-calling-a-function-defined-in-js-file-2-from-a-function-in-js-file-1-after-the-page-has-loaded-on-click-event-collection-of-common-programming-errors\/","title":{"rendered":"Unsuccessfully calling a function defined in JS file 2 from a function in JS file 1 AFTER the page has loaded\/on-click event-Collection of common programming errors"},"content":{"rendered":"

I have two Javascript files, that I will significantly streamline to simplify the issue in hand.<\/p>\n

form.js<\/code><\/p>\n

function open_action_dialog(){\n   \/\/ code to open the dialog..\n\n   \/\/ If [Return] is pressed when focus is on the #action field, call the action confirmation function defined in the second javascript file.\n   $('#action').keypress(function(e){\n      var fn_name = \"action_confirm\";\n      if(e.which == 13)\n         window[fn_name]();\n   });\n}\n<\/code><\/pre>\n
blog.form.js<\/code><\/p>\n
$(function (){\n   $(\"#dialog_action_open\").click(function() { \n       open_action_dialog(); \n   });\n\n   function action_confirm(){\n     alert('action confirmed');\n     return;\n   }\n});\n<\/code><\/pre>\n
So on my page I have a button with id dialog_action_open<\/code> when clicked opens the action dialog; this is a function from the second file successfully calling a function from the first file.<\/p>\n
Inside the dialog, there’s an input text field with id action<\/code> where I’ve set it so that if the user presses [Return]<\/code> when their cursor is focused on the field, it should call the action_confirm()<\/code> function defined in the second file. It does pickup the keypress event, but does not call the function from the second file; inside Google’s code inspector, the error is:<\/p>\n
\n
Uncaught TypeError: Property ‘action_confirm’ of object [object Window] is not a function<\/p>\n<\/blockquote>\n
So, my question is what do I need to do to be able to successfully call the function from the second file from inside a function in the first file? Keeping in mind, I’m aware you can’t immediately call a function defined later. But, even though my action_confirm() function is defined after the function calling it from the first file, isn’t this technicality moot considering the call is occurring AFTER the page has loaded, and more specifically AFTER a click event on the page?<\/p>\n
I would appreciate being enlightened.<\/p>\n
Many thanks.<\/p>\n
    \n
  1. \n
    Because the function you’re trying to call is wrapped in another function, it’s invisible to the function in your other JS.<\/p>\n
    You could remove $(function (){<\/code> (and it’s closing });<\/code> )<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-13 09:48:47. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I have two Javascript files, that I will significantly streamline to simplify the issue in hand. form.js function open_action_dialog(){ \/\/ code to open the dialog.. \/\/ If [Return] is pressed when focus is on the #action field, call the action confirmation function defined in the second javascript file. $(‘#action’).keypress(function(e){ var fn_name = “action_confirm”; if(e.which == […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1349","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1349\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}