0

http://jsfiddle.net/xEpGg/740/

If I call it directly right after my script using:

$.custom.test();

It works as expected. However, if I put it anywhere in the HTML, it won't fire. I defined my object in jQuery, shouldn't that be accessible everywhere within the page?

Tony
  • 9,672
  • 3
  • 47
  • 75
codenamezero
  • 2,724
  • 29
  • 64
  • You should probably be testing on your actual page. It doesn't work because you have jsFiddle running your code on `window.onload`, so any code embedded in the `` has already tried to run by the time `$.custom` is defined. [no wrap (head)](http://jsfiddle.net/xEpGg/747/) –  Aug 03 '12 at 13:19
  • 1
    Yep, your jsfiddle example is 'broken' - this one is working http://jsfiddle.net/xEpGg/746/ – WTK Aug 03 '12 at 13:21
  • 2
    Your title is a triple negative... – chrisfrancis27 Aug 03 '12 at 13:23
  • I did tested on my actual page, is has the exact same behavior like jsFiddler. Which is why I'm lost... – codenamezero Aug 03 '12 at 13:59

3 Answers3

1

See the solution here: you need to define the custom function before you can use it. Like this:

  <script>

        $.custom = {
              test : function() { alert("wtf"); }
        };

    </script>

    <div id="helloworld" style="border:solid; border-width:5px;">
        BLAH
    </div>
    <script>
        $.custom.test();
    </script>

​

frenchie
  • 51,731
  • 109
  • 304
  • 510
  • That was the initial way I did, of course it will work, but I can't declare everything in the same page. My JS function will have its own file for code maintainability. I am currently importing it at the top of my jsp page. Your solution work for sure, but not what I'm looking for. – codenamezero Aug 03 '12 at 14:02
  • Well then you just put the script tag with the file you want and it'll work; like this: . In other words, replace the $.custom with the link to your .js file; that's how it's done. And yes, the setTimeout method also works but it's sort of a hack. If you build a habit of writing your code with enough of these type of hacks, then your code will become less maintainable and eventually will become buggy for some weird and not so obvious reason. Happy coding. – frenchie Aug 03 '12 at 19:05
1

In case you cannot define the function in the way @frenchie suggested try:

    setTimeout(function(){$.custom.test();}, 0);

Why is setTimeout(fn, 0) sometimes useful?

And why the heck would you want to assign anything to the jQuery global?

Community
  • 1
  • 1
Michał Miszczyszyn
  • 11,835
  • 2
  • 35
  • 53
  • It's not too uncommon to borrow the global jQuery as a namespace. Obviously care needs to be taken –  Aug 03 '12 at 13:33
  • Thanks, this is what I needed. As my contents are dynamically loaded, I can't have it as "no wrap (head)", I needed it to work with the onLoad behavior. – codenamezero Aug 03 '12 at 14:10
0

You are adding your script to the page after it's loaded, but invoce $.custom.test() before it's loaded..

enter image description here

Change this option to no wrap (head) and it will work fine..

Łukasz W.
  • 9,538
  • 5
  • 38
  • 63
  • I'm sure his problem isn't that he can't make his function work in jsfiddle; his function doesn't work in HIS page because he's not defining it at the right place. – frenchie Aug 03 '12 at 13:30
  • Sure.. so just move function definition above it's invocation.. idea is the same! – Łukasz W. Aug 03 '12 at 13:47
  • My function definition of my real page (not jsfiddler) is already above invocation... It still doesn't answer my question, I do need it to get trigger when is onLoad. – codenamezero Aug 03 '12 at 14:07