5

In my master page, I have attached jQuery along with my own custom.js. I use the javascript in that file to run fixes on my pages such as style adjustments.

Now, when I run simple functions on my sharepoint pages, they never run on the outputted markup unless I use _spBodyOnLoadFunctionNames.push on the function. Alerts WILL fire, however. So, I tried using jquery's document.ready instead, but it NEVER fires. Neither does ExecuteOrDelayUntilScriptLoaded ever fire.

For example, if I put this in my custom.js file:

$(document).ready(function(){
alert("bob");
});

It never fires. But if I just put 

alert("bob");

It will fire just fine.

However, if I use _spBodyOnLoadFunctionNames.push to run my jquery functions, they DO work, so it isn't that jquery isn't getting loaded.

Am I missing something? Why won't document.ready work?

|improve this question
  • 2
    Sry, I just don't get the point why you don't want to use _spBodyOnLoadFunctionNames instead of document.ready? Apart from that, here's an article describing the reason of using document.ready or the sharepoint onload-function: stephanrocks.com/2011/10/05/… hope it helps. – Dominik Dec 17 '12 at 8:56
  • (Sry, couldn't edit my previous comment): And have you tried to check your script(s) with firebug / Chrome developer tools? Their console would show errors for loading, referencing and script-logic errors. This is the first thing I do when adding javascript to... everything. Helps a lot ;) – Dominik Dec 17 '12 at 9:03
  • Dominik, I wasn't trying to replace it, I just wanted to know why it didn't work (yes, I checked with Firebug). Thanks for the link to the article. – bgmCoder Dec 17 '12 at 15:53
  • SCRIPT438: Object doesn't support property or method 'ready' am getting the error liek ths, in my f12 dev console. am using the sputility.js file and spservices.js file and my document.ready function is not firing when newform.aspx loads . and when i removed these refercences for spuitlity.js and prototype.js file it works , document.ready fires correctly. – SaMolPP Oct 27 '15 at 14:22
7

First it can be a conflict in jQuery. I always use "jQuery()" instead of "$()" with SharePoint and jQuery.noConflict and make sure there is only 1 version of jQuery being loaded.

Second the sequence of loading your script is important. Make sure it loads after jQuery is loaded. A good way to make sure is to load jQuery and your custom script using ScriptLink and load your custom script using attribute LoadAfterUI="true" this way jQuery will be loaded right away and your custom script after the UI is completely loaded.

|improve this answer
  • 1
    I placed the script calls in ScriptLink tags and it made the difference. I set jquery's LoadAfterUI to false and custom.js to true, now the document.ready works just fine even without the spBodyOnLoadFunctionNames call! Thank you! – bgmCoder Dec 17 '12 at 15:29
  • Ah, at the bottom of that page you linked to, there is this: var $1_7_2=jQuery.noConflict(true);, which allows you to define your own name for jquery, complete with noConflict built right in! Great! – bgmCoder Dec 17 '12 at 16:07
  • Hmm.. I thought that was a good idea about using the var $1_7_2=jQuery.noConflict(true); - but it seems to break a certain webpart I am using that uses 1.5.2 of jQuery in its own configuration. – bgmCoder Dec 18 '12 at 21:14
1

I have tried to create the situation you have and found the custom javascript is working fine.

I don't know how you are doing those things but I am putting here solution according to my guess.

If you are adding jQuery in HEAD secion of HTML then make sure your jQuery javascript file appears first and then your custom javascript file. Take a look at html code by viewing the page source in browser.

If everything is fine, then try to explain how you are adding the jQuery and cstom.js.

Amit

|improve this answer
  • If I loaded my script before I loaded jquery, then my jquery functions wouldn't work at all, no? – bgmCoder Dec 17 '12 at 15:00
  • yes it would not work. Your jQuery file should be loaded first then you custom javascript file becuase $ is pointing to jQuery code. Also LoadAfterUI="true" can also fix if you are using ScriptLink to put the javascript reference in HEAD secion of HTML – Amit Bhagat Dec 18 '12 at 3:03
1

When using jQuery or general javascript for that matter, in a ASP.NET masterpage, it's very important that you know where to put it to make sure it takes effect.

If the javascript is placed in the header it is not always certain that the script will be read in time for the element to get affected by it. This can be solved by moving the javascript down beneath the HTML which it should have an effect on.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.