0

I am attempting to load a .js file hosted online after a jquery click event. First, am I doing this right? Will all the javascript be applied only after a link is clicked?

$(document).ready(function() {
            var clickHandler ="file.js";
    $('a').click(function() {
        $.getScript(clickHandler, function(data, textStatus, jqxhr) {
        console.log(data);
        console.log(textStatus);
        console.log(jqxhr.status);
    });
});

Edit: I just checked the console and it is loading the file but giving me a 403 Forbidden message. Why is this happening? Do I need to have some text in my header to refer to?

Andrew
  • 1
  • 2
  • Why do you need to load a JS file based on an event instead of just loading it on the initial load instead? – Dennis Rongo Nov 12 '12 at 03:39
  • I am using ajax to load a portion of the page and the javascript isn't applied to that portion since it is loaded after the javascript file is already loaded – Andrew Nov 12 '12 at 03:45
  • 2
    Right, I just don't see a reason why you can't preload the script ahead of time...and then just calling a function within that external file when you need it (which is in your click event handler. – Dennis Rongo Nov 12 '12 at 03:50
  • Why is this happening? We cannot tell you, because the HTTP-status comes from the server, but you've posted clientside code. What happens when you try to load the file directly in the browser? – Dr.Molle Nov 12 '12 at 03:54
  • check whether you have given correct file permissions to that .js file – Swarne27 Nov 12 '12 at 04:05
  • Yes I do have file permission. When I post the URL straight into the browser it takes me to the plugin code – Andrew Nov 12 '12 at 04:07
  • @Andrew -- One more additional guess. According to other sources, `$.getScript` is subject to the same origin policy. Are you trying to load `myfile.js` from your website, or from a 3rd party site? – Jeremy J Starcher Nov 12 '12 at 04:28

2 Answers2

2

EDIT 1:

Misread the jQuery code -- this part of the answer doesn't apply:

There are ways to add Javascript file to an existing document, but it isn't as simple as you are trying to do.

This discussion can explain that: How to dynamically insert a <script> tag via jQuery after page load?

The other solution is to put the contents of the Javascript into its own function, include that on the page normally and then run that function in your click handler.

Edit: Expanded answer

Lets say that you have some fairly simple code in your file.js like this:

var el = document.getElementById("fooz");
if (el) {
  el.className += " example";
}

This code will, since it is not wrapped up in a function, will run (or try to run) as soon as it is loaded. It will only run once every time it is loaded.

However, if you wrap it up in a function, like this:

function colorFooz() {
  var el = document.getElementById("fooz");
  if (el) {
    el.className += " example";
  }
}

Then the code will not run until the function is called. It will load and be ready to be called later.

Error 403

The first thing to do is figure out why are getting the error 403.

At this stage, that has nothing to do with Javascript, jQuery or AJAX. Simply the problem by trying to load that Javascript file directly in your browser, by typing something like this utnil your URL:

http://example.com/file.js

Changing the URL to your website and path of course. At this point, you should still be getting the 403 error, but you can now check your server logs to see what error is written there.

I found a page that gives a guide to tracking down 403 errors here: http://www.checkupdown.com/status/E403.html

((PS: If I had to randomly guess at the reason why you are getting the 403 error, I'd say that you don't have the path file file.js correct. Depending on your structure and various includes, it may be calculating the relative path incorrectly.))

Community
  • 1
  • 1
Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
  • Jeremy can you elaborate on the second solution? I am still learning and not sure how to do that – Andrew Nov 12 '12 at 03:41
  • And for the first method, am I not doing the same thing as the top answer? – Andrew Nov 12 '12 at 03:43
  • @Andrew -- That is what you are trying to do, but it doesn't work like you've tried. The link explains more. As for clarifying the second approach, give me a few minutes. – Jeremy J Starcher Nov 12 '12 at 03:45
  • +1 for needing to figure out the cause of the 403 error first. – dana Nov 12 '12 at 04:04
  • Jeremy, thanks for the detailed response. The file I want to load is a jquery plugin. If I simply add the url to the header it executes fine for the main content, just not the HTML that I want to load with ajax. Can I just put an entire plugin into a function? – Andrew Nov 12 '12 at 04:06
  • @Andrew -- I honestly don't know. I'm not the greatest jQuery person. If, however, you edit your question and mention which plug in you are using, someone else may be able to answer you. The plugin might even have a method built-in already to re-run for DOM changes. – Jeremy J Starcher Nov 12 '12 at 04:10
  • @Andrew -- Updated by answer but in short: It sounds like a path issue. – Jeremy J Starcher Nov 12 '12 at 04:13
0

The function you pass to click() is a callback and is only executed when the element is clicked. So yes, you've got that part right.

NoPyGod
  • 4,905
  • 3
  • 44
  • 72