CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3163192
user3163192

Reputation: 111

Edit html div that has been copied into html file with jquery load

So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html

Here's the Header.html

<div id="Header_Wrapper"> 
    <div id="Header_PageLinksWrapper">
        <div class="Header_PageLink">
            <a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>    
        </div>
        <div class="Header_PageLink">
            <a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>    
        </div>
        <div class="Header_PageLink">
            <a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>    
        </div>
    </div>
</div>

The javascript file:

$(document).ready(
    function ()
    {
        $("#Header").load("..\\Templates\\Header.html");

        var filePath = window.location.pathname;
        SetPageLinkColours(filePath);
    }
);


function SetPageLinkColours(aPath)
{
    var firstIndex = aPath.lastIndexOf("/");
    var lastIndex = aPath.indexOf(".html");
    var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);

    var divElement = document.getElementById(id);
    if (divElement == null)
    {
        console.log("Could not find element " + id);
    }
    divElement.style.color = 0xffffff;
}

One of the pages (eg. Games.html)

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Adabelle Combrink - Games</title>

    <link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
    <link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
    <link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>

    <script type="text/javascript" src="..\Scripts\jQuery.js"></script>
    <script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>   
    <header>
        <div id="Header"></div>
    </header>
</body>
</html>

What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header. Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.

Upvotes: 0

Views: 1091

Answers (2)

TiiJ7
TiiJ7

Reputation: 3412

jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.

$(document).ready(
    function ()
    {
        $("#Header").load("..\\Templates\\Header.html", null, function() {
            var filePath = window.location.pathname;
            SetPageLinkColours(filePath);
        });
    }
);

Also your SetPageLinkColours function can be improved with jQuery:

function SetPageLinkColours(aPath)
{
    var firstIndex = aPath.lastIndexOf("/");
    var lastIndex = aPath.indexOf(".html");
    var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);

    var divElement = $("#"+id);
    if (!divElement.length)
    {
        console.log("Could not find element " + id);
    }
    else
    {
        divElement.css('color','white');
    }
}

Upvotes: 2

Vlad Nikitin
Vlad Nikitin

Reputation: 1951

load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/

$(document).ready(
    function ()
    {
        $("#Header").load("..\\Templates\\Header.html", function () {
            var filePath = window.location.pathname;
            SetPageLinkColours(filePath);

        });

    }
);

Upvotes: 1

Related Questions