SharePoint 2013 server issues with custom jquery coding

Jun 19, 2014 at 2:03 AM

I'm in love with the responsive sharepoint and i have issues to implement custom coding to the publishing site with responsive component.

Either i use design manager or WSP solution to apply responsive design. I'd like to use some Jquery effect (e.g. Jquery UI / Owl Carousel), once i follow the step for the corresponding instruction, however once i put those coding at Content Editor Web Part (with hyperlink to a configure file instead of direct coding to avoid SharePoint to alter the code), the custom coding simply not work, however, if I open the direct link or include it using page viewer webpart, it works without issue. The major issue is page viewer webpart auto height is not work when the page itself is dynamic.

Sample structure as below

  • URL: http://sample/sites/abc/home.aspx
  • Jquery UI
    /sites/abc/style library/script/jquery.ui (put all files under this directory)
  • Script file to include Jquery UI coding
    /sites/abc/style library/script/jqeurysample.html
    • include all js / css required
  • Add CEWP and include the link to /sites/abc/style library/script/jquerysample.html
Load homepage with JS error
Load direct page jquerysample.html, work without issue.

What I believe is there should be some code conflict as responsive masterpage do got lots of css/js but it's quite difficult to know how to debug / resolve in this case. Could anyone share your thought or suggestion to resolve the issue. Thanks.
Jun 25, 2014 at 12:25 AM
Your CEWP is just trying to help load the js and css? Have you tried the script editor webpart? It seems to add less code and allows more flexibility when adding js.

Also, are the links in your jquerysample.html relative? When they are loaded by your content page, can you see in fiddler or your dev toolbar if the extra js and css are in fact being loaded?

I would be using the console in Firebug myself to determine what is and is not being loaded and what scripts are and are not being fired.