Javascript - Changing Object data source

Question

I'm not sure if this is possible or not.

I wanted to make a same header and footer but with different content pages. My current course only covers HTML, JS, CSS, and JQuery.

Here is my current body, simplified:

<div id="header">
   <ul>
      <li><a href="#" onclick="contentOne()">Content One</a></li>
      <li><a href="#" onclick="contentTwo()">Content Two</a></li>
   </ul>
</div>

<div id="contents">
   <object id="change" data="contentOne.html" type="text/html" height="100%" width="100%">
   </object>
</div>
<div id="footer">
   <p>The footer</p>
</div>

Inside the head are something like this:

<head>
   <script>
      function contentOne(){
         document.getElementById("change").data = "contentOne.html";
      }

      function contentTwo(){
         document.getElementById("change").data = "contentTwo.html";
      }
   </script>
</head>

The problem is, that I can't get the content to change. It looks like it would work but, for example, clicking on ContentTwo, doesn't load contentTwo. The page remains the same.

@Teemu I couldn't get the content to change. It looks like it would work but, for example, clicking on ContentTwo, doesn't load contentTwo. The page remains the same — OrewaAfif
– OrewaAfif, Commented Dec 16, 2015 at 16:09

KAD · Accepted Answer · 2015-12-16 16:09:15Z

3

You shall use setAttribute for native JS or .prop for jquery:

 function contentOne(){
        // native
        var element =  document.getElementById("change");
        element.setAttribute("data", "contentOne.html");

        // jquery
        $("#change").prop("data","contentOne.html");
      }

Make sure you properly close the attribute values, height="100% width="100%> is wrong, also the object element shall be closed with </object> :

 <object id="change" data="contentOne.html"  
     type="text/html" height="100%" width="100%"></object>

edited Dec 16, 2015 at 16:09

answered Dec 16, 2015 at 16:01

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Thorpe Over a year ago

The data attribute is exposed as the data property on object elements. Reference.

OrewaAfif Over a year ago

Tested it using the setAttribute and holy crap it worked! I wonder why it didn't work previously? Can't I just change it directly with .data = "contentOne.html"

James Thorpe Over a year ago

@OrewaAfif What browser are you using? As per my link above, the specification mandates that setting the data property should be identical to setting the data attribute. The browser you're using might be buggy and need a bug report filing.

Collectives™ on Stack Overflow

Javascript - Changing Object data source

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related