jqueryui not rendering on sharepoint 2013 page

Question

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

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

Answer 1

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>

Answer 2

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

Answer 3

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();
}
});
});