Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by namelis View Post
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    namelis (02-21-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks il just do that then rather then spend time learning about ajax iv heard of it but i know absolutely nothing about it

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

    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
    (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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •