can JavaScript reload just a single html element not the whole page?

namelis · 02-20-2013, 07:32 AM

god i hate typing posts in forums i always spend a good bit of time while typing them thinking about how to ask my question more then half the time this causes me to come up with my own solution to my problem that's actually a good thing as far as im concerned what is not is that because of this if i manage to finish my question it always takes me long enough to type them they time out and i loose everything i typed when i go to preview my post (what bugs me the most is that the message was lost but the tags and title were remembered) and since i never remember to copy or exactly what i typed it its now gone so now instead of a detailed well though out problem with just enough code to provide an example of why i have the problem so the thread will be more useful to others in the future and since i don't feel like typing it again you just get this summary of it ok my rants done now here is my problem

so i have an array of variables each of which contains a "string"
i also have a single other variable
i am using document.write() with this other variable inside <p></p>
i am changing the value of that other variable to = a different string from the array onclick of an image i tested it with alert()
because document.write() only writes once on load the fact that i changed the value of the variable being written means nothing unless i can make <p></p> reload
is this possible with JavaScript if so how?
if its not i can get the same effect with divisions and changing the display using CSS and JavaScript but i want to do it this way if its possible

Philip M · 02-20-2013, 08:09 AM

Quote:

Originally Posted by namelis

is this possible with JavaScript if so how?

if its not i can get the same effect with divisions and changing the display using CSS and JavaScript but i want to do it this way if its possible

Yes, with AJAX.

But changing the display using CSS and Javascript is preferred IMO.

This is a game that United have to win if they are to have any chance tonight - Commentator Radio 5 Live

namelis · 02-20-2013, 08:17 AM

thanks il just do that then rather then spend time learning about ajax iv heard of it but i know absolutely nothing about it

namelis · 02-21-2013, 09:15 AM

ok so i figured out how to do what i originally wanted to do i ended up here because of advice i received in a different post http://javascriptexample.net/badjs.phpwhere i learned that document.write() is not a good thing to use in that situation so what works is this

Code:

var countReplacements = 1;


function changeDiscription (newDiscription){
	var ptag, pTagNew, newId, pTagReplacemente, replaceText;
	replaceDiscription = document.createTextNode(newDiscription);
	ptag = document.getElementById(countReplacements);
	pTagNew = document.createElement("p");
	newId = countReplacements + 1;
	pTagNew.id = newId;
	ptag.parentNode.replaceChild(pTagNew,ptag);
	countReplacements = countReplacements + 1;
	pTagReplacemente = document.getElementById(countReplacements);
	pTagReplacemente.appendChild(replaceDiscription);
}

its still not perfect but it works so long as you only have to change one thing on the page and you dont use a number for an id on anything else i can probably polish it up some so instead of using id i use name and then throw in an if to test if i am using one of 2 names and just switch them every time i replace it that doesn't work with id's and adding the counter was the way i thought of first to fix the problem

Old Pedant · 02-21-2013, 11:47 PM

Works, but seems clumsy, to me.

(And have to point out that the correct spelling is dEscription. Sorry.)

I'm still not sure what you are trying to do, but maybe something like this:

Code:

<html>
<head>
<style type="text/css">
div#holder {
    position: relative;
    left: 30%; top: 100px;
}
div#holder div {
    display: none;
    position: relative;
    top: 0px; left: 0px;
    vertical-align: top;
    text-align: left;
    font-family: verdana;
    font-size: medium;
    font-weight: bold;
}
div#holder div span {
    font-size: large;
}
div#holder div img {
    float: left;
    margin-right: 20px;
}
select {
    font-size: medium;
    font-weight: bold;
}
</style>
<script type="text/javascript">
function showProduct(select)
{
    var which = select.selectedIndex;
    for ( var i = 0; i < 9999; ++i )
    {
        var div = document.getElementById("Tab"+i);
        if ( div == null ) return;
        div.style.display = ( which == i ) ? "block" : "none";
    }
}
</script>
</head>
<body>
<div id="holder">
<form>
    Pick one: <select onchange="showProduct(this)">
    <option> Product 0 </option>
    <option> Product 1 </option>
    <option> Product 2 </option>
    </select>
</form>
<div id="Tab0" class="products" style="display: block;">
    <img src="http://www.clearviewArts.com/thumbnails/OldBlueEyes.jpg" alt="Cats"/>
    <span>Title: Old Blue Eyes</span><br/>
    Medium: Pastel
</div>
<div id="Tab1" class="products">
    <img src="http://www.clearviewArts.com/thumbnails/Shasta.jpg" alt="Cats"/>
    <span>Title: Shasta</span><br/>
    Medium: Pastel
</div>
<div id="Tab2" class="products">
    <img src="http://www.clearviewArts.com/thumbnails/SignatureCalico.jpg" alt="Cats"/>
    <span>Title: Kalico Kat</span><br/>
    Medium: Colored Pencil
</div>
</div>
</body>
</html>

Old Pedant · 02-21-2013, 11:49 PM

Or possibly this:

Code:

<html>
<head>
<style type="text/css">
div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
div.tabBody { position: absolute; top: 0px; left: 0px; 
              width: 100%; height: 100%;
              z-index: 1; 
              background-color: yellow; border: solid brown 2px; 
              padding: 20px; 
            }
div.tabHead { position: absolute; top: -20px; left: 10px; 
              width: 100px; height: 22px;
              z-index: 2;
              text-align: center; 
              background-color: lightyellow; border: solid brown 2px; border-bottom: none;
            }
</style>
<script type="text/javascript">
function front(which)
{
    for ( var t = 1; t < 9999; ++t )
    {
        var dv = document.getElementById("TABBODY"+t);
        if ( dv == null ) return;
        dv.style.zIndex = t == which ? 5 : 1;
        var tab = document.getElementById("TAB"+t);
        tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
        tab.style.zIndex = t == which ? 7 : 1;
    }
}
</script>
<body onload="front(1);">
Stuff at the top of the page.
<br/><br/>
<div id="ALL">
    <div id="TAB1" class="tabHead" onclick="front(1);">One</div>
    <div id="TAB2" class="tabHead" onclick="front(2);" style="left: 140px;">Two</div>
    <div id="TAB3" class="tabHead" onclick="front(3);" style="left: 260px;">Three</div>
    <div id="TABBODY1" class="tabBody">
        This is body 1
    </div>
    <div id="TABBODY2" class="tabBody">
        2 2  second 2 2 
    </div>
    <div id="TABBODY3" class="tabBody">
        Third one
    </div>
</div>
</body>
</html>

Those are both pretty old. I'd do them a little differently, today. But they show the concept.

Why change the content of something instead of just SWITCHING which content is being displayed???

namelis · 02-23-2013, 01:43 PM

yeah i just had a why am i being such an idiot moment where i realised all i need is this
function changeDiscription (newdiscription){
document.getElementById('discriptionPlaceholder').firstChild.nodeValue = newDiscription ;
}
all i wanted to do was change the text displayed in a p tag i tryed document.write() at first so i got to thinking about reloading the tag but that seamed like more trouble then it was worth then found out i could just replace the tag rather then reloading it but that maid keeping track of the id a pain but just now i thought it why am i replacing this there is nothing wrong with it i just need to change the text node in it and since that's the only child it has its the first child so all i need to do is change the value of that

Quote:

Why change the content of something instead of just SWITCHING which content is being displayed???

mostly laziness im making this for my dads site and i dont want him to come to me every time he wants to add something but he can handle uploading one file resizing and renaming pictures then uploading them so im going to get everything working then switch over to an external javascript then write a small program for him that reads that .js file tells him what is there. then asks if he wants to change any thing? if he does it will alter the value stored in that part of the array in the .js file then it will asks if he wants to add anything new? if he does it will add the 15 new values he gives it in to the array in the .js file for him then i can make him lots of the same page and all i have to change is the value of 15 numbers on each rather then the value of 30 numbers on each actually there will be 2 more to determine weather or not to display a previous or next page link based on the size of the array so by changing content rather changing weather not im displaying it since i was planning to do 100 pages to start him off that's 1500 extra tedious boring edits i get to skip which is the part of programming i hate figuring out how to make something work i enjoy but once i have it working the way i want i find stuff like data entry so what i wrote is actually useful boring

Quote:

(And have to point out that the correct spelling is dEscription. Sorry.)

yeah i know i have bad spelling but at least i have consistently bad spelling so i will spell it wrong the same way every time and as long as all my variables are spelled the same they will work it occasionally causes me problems when i spell one of the reserved words wrong but thats why i use a editor that colors my code so i know i messed up right away