By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

Dynamicly Changing Content

P: n/a
Hi,

I wanted to dynamically update pieces of my page in the following
fashion. Look at the following html code:

<span id='person_23_name'> Mike </span>
<span id='person_28_name'> Siah </span>
<span id='person_23_name'> Mike </span>

Now, I want to update the name of person #23 (person_24_name)
throughout my page. How do I do it?

Here are a few ideas I had:

1. I realize that id has to be unique, except I don't know any other
way to search for elements but using getElementById. I'd get it, and
I'd change it's innerText or innerHTML.

2. One idea I had was to use a custom attribute for my span, something
like: <span key='person_23_name'> Mike </span> except there is no way
to query all common attributes.

3. I thought about using a separate xml tag for marking my data,
something <person type='name' num='23'> Mike </person>. And then
retrieve my data with getElementByTagName, except it doesn't work on a
standard xhtml document. Should I convert my document to xml, or I
could use some sort of external xslt file to define those tags? Please
point me to the right direction here.
One question I have: is there a difference between span and div in this
situation?

Thanks,
Sia

Feb 7 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Is there anyway to tie the content of my spans to a certain memory
location, to just update that memory location and the content to be
updated automatically?

Feb 7 '06 #2

P: n/a

Try using classes instead

<div id="names">
.....
<span class='person_23_name'> Mike </span>
<span class='person_28_name'> Siah </span>
<span class='person_23_name'> Mike </span>
<span class='person_28_name'> Siah </span>
.....
</div>

var Mike=[], Siah=[]; // to use your own global arrays

function getWho(who, whoclass) {

oSpans=document.getElementById('names').getElement sByTagName('span');
for (i=0;i<oSpans.length;i++)
if (oSpans[i].className=whoclass)

window[who][window[who].length]=oSpans[i];
} // ends getWho
someeventhandlerorsuch="getWho('Mike','person_23_n ame')"
// or

someeventhandlerorsuch="getWho('WHOEVER','WHATEVER CLASSNAME')"

at the end the Mike/Siah/WHOEVER array will be populated
only with the Span elements with same class and same will apply to
any other
so, then you can just address the array with a FOR loop
to affect only those specific nodes passed as pointers by oSpan[i]

Danny
Feb 7 '06 #3

P: n/a
Siah wrote:
Is there anyway to tie the content of my spans to a certain memory
location, to just update that memory location and the content to be
updated automatically?

The following example sifts through all the elements onload and uses the
class name to identify elements to remember. An object keeps references
to a key (derived from one of the strings in the class anem) and array
of elements related to the key.

Lightly commented, no feature detection so will likely fail in some
older browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
.bright {color: red; font-weight: bold;}
.dull {color: #667799; font-weight: bold;}
.blueDiv {color: #222233; font-family: arial, sans-serif;}
</style>

<script type="text/javascript">

var objTextKey = {};

// Add a property to objTextKey named the special class name
// with a value of an array of elements with that class name
function setupObj()
{
var selObj = document.forms['updatePerson'].elements['currentName'];
selObj.options.length = 0;

// IE before 6 won't do getElementsByTagName('*')
// See CLJ archives for solutions
var allEls = document.getElementsByTagName('*');
var el, elClassName, i = allEls.length;
var re = new RegExp('\\b' + 'da-' + '\\w+\\b');
var o;

while (i--){
el = allEls[i];
elClassName = (o = el.className)
&& (o = o.match(re))
&& o[0];

if (elClassName && elClassName != ''){

if (!objTextKey[elClassName]){
objTextKey[elClassName] = [el];
addOpt(selObj, textCont(el), elClassName);

} else {
objTextKey[elClassName].push(el);
}
}
}
}

// Add an option to selObj with text optText and value optValue
function addOpt(selObj, optText, optValue)
{
selObj.options[selObj.options.length] =
new Option(optText, optValue);
}

// Change select object option with text oldText to newText
function modOptText(selObj, oldText, newText)
{
var opts = selObj.options;
for (var i=0, len=opts.length; i<len; ++i){
if (opts[i].text == oldText) {
opts[i].text = newText;
return;
}
}
}

function updateName(f)
{
var selObj = f.elements['currentName'];
var curKey = selObj.options[selObj.selectedIndex].value;
var curName = selObj.options[selObj.selectedIndex].text;
var newName = f.elements['newName'].value;

// Check that some text was entered
if ('' == newName) {
alert('Please enter some text in the new name field');
return;
}

// Updtate the text in the document
var elArray = objTextKey[curKey];
for (var i=0, len=elArray.length; i<len; ++i){
elArray[i].innerHTML = newName;
}

// Update the text in the select object
modOptText(selObj, curName, newName);
}

// Provide minimal textContent/innerText support
// See CLJ archives for better emulation
function textCont(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
}


</script>
</head>
<body onload="setupObj();">

<div class="blueDiv">
<p>There once was a man called <span class="da-Pers23 dull">Mike</span>
who had a friend called <span class="da-Pers21 dull">Dave</span>.</p>

<p>One day <span class="da-Pers23 bright">Mike</span> went for a walk
and ran into <span class="da-Pers21 bright">Dave</span>.</p>
</div>
<form name="updatePerson" onsubmit="updateName(this);return false;">
<label for="currentName">Select an existing name
<select name="currentName" id="currentName"
style="width: 8em;">
<option>
</select></label>
<label for="newName">Enter new name
<input type="text" name="newName" id="newName"></label>
<input type="button" value="Update name"
onclick="updateName(this.form);">
</form>
fmConvertUPC()

</body>
</html>


--
Rob
Feb 7 '06 #4

P: n/a
Thanks Rob for your time. Your example was very clear.
I'll go after it and get it to work,
Regards,
Sia

Feb 7 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.