Javascript not applying to page

Question

I have 4 sets of Promoted Links in a table. The idea being the top set show one of the others depending on which tile is clicked.

I have slightly modified THIS SCRIPT to match my needs, but nothing happens.

I have inserted the below into a Script Editor webpart. What am I missing?

EDIT - line 10 - 13 are bothering me...

<script type="text/javascript" src="/Scripts/JQuery/jquery-1.8.1.js"></script>
<script language="javascript">

$(document).ready(function() {

$("div#WebPartWPQ3").hide();
$("div#WebPartWPQ4").hide();
$("div#WebPartWPQ5").hide();
});
    $(function () {
    $("a[id^=Tile_WPQ]").each(function () {
            $(this).click(function () {
                var linkTitle = $(this).find('li[title]').attr('id');
                if (linkTitle == "Tile_WPQ2_1_7")
                {
                    $("div#WebPartWPQ3").show();
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").hide();
                    event.returnValue = false;

                }

                if (linkTitle == "Tile_WPQ2_2_7")

                {
                    $("div#WebPartWPQ3").hide();
                    $("div#WebPartWPQ4").show();
                    $("div#WebPartWPQ5").hide();
                    event.returnValue = false;
                }

                if (linkTitle == "Tile_WPQ2_3_7")

                {
                    $("div#WebPartWPQ3").hide();
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").show();
                    event.returnValue = false;
                }

            });
        });
    });
</script>

Answer 1

This is an example from one of my scripts:

_spBodyOnLoadFunctionNames.push("HideWP");
function HideWP()   
    {   
        //Function body 
    } 

"HideWP" being a wrapping function for the rest of the script..

Try this....

<script language="javascript" type="text/javascript">   
_spBodyOnLoadFunctionNames.push("pageLoad");
  function pageLoad(sender, args)   
    {     
      $("div#WebPartWPQ3").hide();
      $("div#WebPartWPQ4").hide();
      $("div#WebPartWPQ5").hide();

      $(function () {
      $("a[id^=Tile_WPQ]").each(function () {
            $(this).click(function () {
                var linkTitle = $(this).find('li[title]').attr('id');
                if (linkTitle == "Tile_WPQ2_1_7")
                {
                    $("div#WebPartWPQ3").show();
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").hide();
                    event.returnValue = false;

                }

                if (linkTitle == "Tile_WPQ2_2_7")

                {
                    $("div#WebPartWPQ3").hide();
                    $("div#WebPartWPQ4").show();
                    $("div#WebPartWPQ5").hide();
                    event.returnValue = false;
                }

                if (linkTitle == "Tile_WPQ2_3_7")

                {
                    $("div#WebPartWPQ3").hide();
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").show();
                    event.returnValue = false;
                }
          });
        });
      });
    } // End pageLoad  
</script>

Also note that the following would work too, replace
_spBodyOnLoadFunctionNames.push("pageLoad"); with
ExecuteOrDelayUntilScriptLoaded(pageLoad, "sp.js");

Answer 2

I've faced this issue before. You can use:

$(window).load(function() {
  // Your Javascript here
});

It seems that the page is ready before SharePoint load or render all the "SharePoint elements" inside.

Answer 3

Try this:

ExecuteOrDelayUntilScriptLoaded(init,'sp.js');
function init(){
    // JavaScript code here
}

Answer 4

Don´t use jquery´s( document).ready function in SharePoint. Use _spBodyOnLoadFunctionNames or something like that. Because the Rendering of SharePoint-Contents happens most using Javascript also AFTER Body loaded, so in your case, even if document.ready fired adequately, the desired Objects in the dom may not have been rendered already

Finally, as I don´t know how your html is built of, I can´t help you any further.

But hopefully you included the jquery-file in the correct Folder of your SharePoint-Server.

Answer 5

Below is the complete template I use when adding script to my webpages, granted I am throwing this in a CEWP and pointing to the script that way. I don't inject my code into the page itself. Hopefully you can glean something from this....

<SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:FormDigest ID="MyFormDigest" runat="server"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script language="javascript" type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(pageLoad, "sp.js");
  function pageLoad(sender, args)   
    {      // Wrapping function
    } // End wrapping 
</script>