0

I have a 2013 sharepoint site I created a CEWP to read my hmtl page. All the html is rendering ok but I am having some trouble linking jqueryui.css or jqueryui.min.js into my site. It works ok when running the html locally.

Screenshots from SharePoint and Localhost respectively Sharepoint Localhost

This is how I am calling the files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

<link href="jqueryui/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="jqueryui/jquery-ui.min.js" type="text/javascript"></script>

All the code is working fine just can not make the call in SharePoint.

Any advice is greatly apperciated!

EDIT: I ran with F12 debug and I did recieve the follow error "Object doesn't support property or method 'accordion'"

<script type = "text/javascript">
var faqAccordian;
var faqSubAccordian;

var faqNextButton;
var faqSearchInput;

jQuery(document).ready(function() {
faqNextButton = $("#faq_btn_next");
faqSearchInput = $('#faq_search');
var faqAccordionInput = $("#faq_accordion");
var faqSubAccordionInput = $(".faq_subaccordion");

faqAccordian = faqAccordionInput.accordion({
heightStyle: "content",
collapsible: true,
active: false,
create: function(event, ui) {
  $('#faq_loading').hide();
  faqAccordionInput.show();
}
});  

I get error here, however I believe this error is attributed to the jqueryui not loading, from researching the error.

EDIT: Upon more research I believe the issue is Sharepoint makes its own Jquery call, so therefore my Jqueryui is loading up then sharepoint makes its own call to jquery and overwrites my jqueryui. I found a way on how to tell my script to wait ExecuteOrDelayUntilScriptLoaded(MyFunction, "sp.core.js"); but I dont believe I have the semantics correct on where to put the wait.

<script type = "text/javascript">

var faqAccordian;
var faqSubAccordian;

var faqNextButton;
var faqSearchInput;

ExecuteOrDelayUntilScriptLoaded(MyFunction, "sp.core.js");
jQuery(document).ready(function() {
faqNextButton = $("#faq_btn_next");
faqSearchInput = $('#faq_search');
var faqAccordionInput = $("#faq_accordion");
var faqSubAccordionInput = $(".faq_subaccordion");
..... rest of javascript continues here
</script>

https://jsfiddle.net/hfzsxp9b/5/

EDIT: I need to get Jquery to load before Jqueryui Network Load

  • Try using absolute URL’s for your CSS files and the last js file, not relative paths. – mannaggia Jul 24 '18 at 20:00
  • Yeah tried that too, that was my first approach. I was hoping the relative path would help since the files were now stored in within shatepoint. Same results for both – Sudosu0 Jul 24 '18 at 20:05
  • 2
    Do you get any errors with the browser (f12) debugger? – mannaggia Jul 24 '18 at 20:19
  • yes, added error section into post – Sudosu0 Jul 25 '18 at 10:49
  • Also when using jQuery in SharePoint avoid using the dollar sign and type 'jQuery' instead. SharePoint is sometimes using the dollar in its own scripts. – Ciamas Jul 25 '18 at 11:05
0

Try editing the page using SharePoint Designer or Notepad. Place the references directly into the page under <asp:Content contentplaceholderid="PlaceHolderMain" runat="server"> tag.

For example:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <link type="text/css" rel="stylesheet" href="https://<filelink>" /> 
    <!-- other references-->      
</asp:Content>
  • No luck, I think I have another issue. I added the errors in the orginal post – Sudosu0 Jul 25 '18 at 10:49
0

Disable Minimal Download Strategy (MDS) in sharepoint than try once with basic alert jquery & confirm.

  • basic jquery loads ok and MDS is already disabled – Sudosu0 Jul 25 '18 at 10:41
0

I was able to resolve this issue by removing the html call of the jquery-ui.min.js and I used a .getScript from within my javascript code to call the jqueryui.

jQuery(document).ready(function() {
JQuery.getScript('jqueryui/jquery-ui.min.js',function(){
faqNextButton = $("#faq_btn_next");
faqSearchInput = $('#faq_search');
var faqAccordionInput = $("#faq_accordion");
var faqSubAccordionInput = $(".faq_subaccordion");

faqAccordian = faqAccordionInput.accordion({
heightStyle: "content",
collapsible: true,
active: false,
create: function(event, ui) {
  $('#faq_loading').hide();
  faqAccordionInput.show();
}
});
});

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.