Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing data on an object 1

Status
Not open for further replies.
pahiker

pahiker

Programmer
Aug 31, 2012
45
US
I'm trying to change the data reference onap an object, but it's not working. Any idea what's wrong with the code?

<HEAD>
<script type="text/javascript">
function setContent(btn) {
alert("made it");
document.getElementById("Content").data = "Home/AboutUs.html";
return;
}
</script>
</HEAD>


<BODY>
<div>
<IMG src="images/Friends.gif" class="hdr" style="top:10px; left:10px;" alt='friends'>
<IMG src="images/Baseball.png" class="hdr" style="top:80px; left:50px;" alt='baseball'>

<IMG src="images/Bowling.png" class="hdr" style="top:80px; right:45px;" alt='bowling'>
<IMG src="images/Fishing.png" class="hdr" style="top:10px; right:10px;" alt='logo'>

<H1>Friends to Friends</H1>
<H2 id="Chapter"></H2>
</div>

<div class="main">
<div class="left">
<object id="Content" data="" width="100%" style="visibility:visible"></object>
</div>

<div class="right">
<button id="Home" class="HomeButton" onclick="setButton('Home')">Home</button>
<button id="SwPa" class="SwPaButton" onclick="setButton('SwPa')">Southwest Pa</button>
<button id="NwPa" class="NwPaButton" onclick="setButton('NwPa')">Northwest Pa</button>

<br clear=all>

<button id="link1" class="HomeButton" onclick="setContent('link1')"></button>
<button id="link2" class="HomeButton" onclick="setContent('link2')"></button>
<button id="link3" class="HomeButton" onclick="setContent('link3')"></button>
<button id="link4" class="HomeButton" onclick="setContent('link4')"></button>
<button id="link5" class="HomeButton" onclick="setContent('link5')"></button>
<button id="link6" class="HomeButton" onclick="setContent('link6')"></button>
</div>
</main>

</BODY>
</HTML>

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Sort by date Sort by votes
Chrome seems to have a bug about this, where it does not reload the object when its data property is changed. Firefox and IE9 do it correctly for me.

Just for clarification, is the AboutUs.html page inside a folder called "Home" which the page this code is in, is not inside of? That is the calling page is outside the "Home" folder?





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Upvote 0 Downvote
<quote>
Chrome seems to have a bug about this, where it does not reload the object when its data property is changed. Firefox and IE9 do it correctly for me.</quote>

Could not get it to work in chrome or safari either.


<quote>Just for clarification, is the AboutUs.html page inside a folder called "Home" which the page this code is in, is not inside of? That is the calling page is outside the "Home" folder?
</quote>

The main code is in the root directory, the AboutUs.html is in the Home folder, which is also at the root directory.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Upvote 0 Downvote
So the path is correct. There's not much more to say.

You could try to wrap a div around the object and then simply recreate the object each time rather than only changing its data property.

HTML: 
<div id="Content">
<object data="" width="100%" style="visibility:visible; border:1px solid gray;" type="text/html">Loading...</object>
</div>

Code: 
document.getElementById("Content").innerHTML = '<object data="Home/AboutUs.html" width="100%" style="visibility:visible; border:1px solid gray;" type="text/html">Loading...</object>';


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Upvote 0 Downvote
That worked 90% - thanks.

The only part not working is that the height of the div is not adjusting to fit the content now. Any ideas on that?

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Upvote 0 Downvote
I think its more the object tag not adjusting. You could try to give the object tag a specified height.

Other than that, perhaps you should look into Server Side Includes, for what you are attempting to do.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Upvote 0 Downvote
I found something that will work, as well as adjust the height, based on your idea of deleting the object and replacing it, but I'm not sure how to code it up. The only examples I can see use the <p> element, and add text. Any idea how I would add the vsrious options onto the object tag?

var objTag = document.getElementById("Content");
if (objTag != null)
{
alert(objTag.data);
objTag.parentNode.removeChild(objTag);
}

var newP = document.createElement("p");
var txt = 'Kilroy was here.';
var newT = document.createTextNode(txt);
newP.appendChild(newT);
var theBody = document.getElementsByTagName('div')[2];
theBody.appendChild(newP);


I assume I can just replace the "p" with "object", but I can't see how to add the data= and width= options. Any ideas?

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Upvote 0 Downvote
Not sure that will work to get the height to adjust, but for the properties, just reference them form the created object:

Code: 
var newP = document.createElement("p");
newP.width='100%';
newP.data = 'Home/AboutUs.html';
var theBody = document.getElementsByTagName('div')[2];
theBody.appendChild(newP);

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Upvote 0 Downvote
Yes! That worked. Thanks for being so helpful to a newbie. All I have to world out is the sizing. The problem with a fixed size is that the number of pixels varies between browsers.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
380
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
281
rogerte
rogerte
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
275
Rayj0000
Rayj0000
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
291
JScannell
JScannell
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
716
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top