JavaScript - Changing Content Within An Element

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks.

I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed.
Code:

<div class="scroll-pane" id="scrollbox">
	WORDPRESS BLOG		     
</div>

My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code.

Code:

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('scrollbox');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues.

Is this possible by editing the above code? If not what do I need?

Thanks in advance for any help!

Hi all,

I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div.
This php content is again using the same method to get php content from a further page.
The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section.
Does anyone know why this is? Is there a workaround or solution to this problem?

It might be easier to understand looking at the code, so Background info:

Javascript file: scripts.js
client.php ----> loads data from: display_client.php
display_client.php ----> loads data from: display_brand.php

Code:
client.php http://pastebin.com/4EFn9YRf
display_client.php http://pastebin.com/BGZAKre2
display_brand.php http://pastebin.com/0a4Pg3gg
scripts.js http://pastebin.com/er4dkmPc

Thanks!

Hi,

(new to javascript)

Code:

digAudio = document.createElement("audio");	
	digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
	digAudio.id = "diggingAudio";
	newAudio = document.getElementById("diggingAudio"); //returns null

the audio element is added (I can play the audio) but I can't get it by its id ?

thank you

I have the following code

Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a></td>
</div>

what i want to do is this:
Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td>
</div>

how can i go about achieving this?

Alright, this is going to sound strange, but bear with me here...

Code:

<input type="text" name="_F0827U" size="015" maxlength="015"> &nbsp; <input type="submit" class="cmdkey" name="_K040827" value="...">

Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation). Is it posable, using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals, say using an onClick() event on either of the elements?

Hi,
Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated.

As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it.

I know the first part works. The second part (after "else" ) is where I am having the problem.
Code:

<td>
<script type="text/javascript">
if ([fieldXX]==1)   
 {
 document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>"); 
 } 
else
 {  
    var id = 'hide-buy-btn';
    var item = document.getElementById(id); 
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<div id="hide-buy-btn" class="hidden">
x
xother button code
x						
</div>
</td>

Hi all


Not sure how to tackle this.
I haven't done any DOM manipulation
and this is a tag within a tag.

Another thing is submit is Ajax and therefore can be hit many times ---
so I guess I need to also check if element already exists.

The result comes back from PHP and I think wipes out
anything in the result area.

I want to create this:
Code:

<span id="loading"><img src="loading.gif" /></span>

Code:

<div id="results">which should populate here</div>

<script type="text/javascript">
function loading(){

?

</script>


<input type="button" name="submit" id="submit" onclick="loading();"/>

How do I begin this?

Help appreciated.

LT

oh this is my Ajax just in case what i'm trying to do should be done from here.

Code:

<script type="text/javascript">
$(document).ready(function() {
    
    $('#submit').click(function(){
     
     //Get the values
     var amount     = $('#amount').val();
     var from       = $('#from').val();
     var to         = $('#to').val();
     
     var params = "amount=" + amount + "&from=" + from + "&to=" + to;
     
     $.ajax({
       type: "POST",
       url: "change.php",
       data: params,
       success: function(data){
            $('#results').html(data).fadeIn("slow");
       }
     });
    });
});
</script>

greetings everyone!

this is my first time trying to join this javascript
community.

Well then, now I'm telling about my miss-understanding
of this keywords of javascript here...

here's the html
Code:

<fieldset > <legend>Attachment</legend>
            <table id="attachment" style="height: 50px;" width="200" border="0">
                <th width="19%">Title</th>
                <th width="26%">File</th>
                <th width="41%">Description</th>
                <th width="6%">Upload</th>
                <th width="6%">More File</th>
                <tr>
                    <td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
                    <td><input name="filepath" type="file" size="33"></td>
                    <td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
                    <td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
                    <td><div align="center">
                            <input onclick="addMoreFile()" type="button" value="+">
                        </div></td>
                </tr>
            </table>
            <!-- end Attachment --> </fieldset>

the aim is that the upload button would eventually changed into image
and then changed back to a link.
That one is already done here's the javascript

Code:

var attRow;

function upload(obj){

	// obtain the table pointer
	var attTable = document.getElementById('attachment');
	
	// post file into the jsp file
	
	// changing the image
	// get parent pointer of this element
	var par = obj.parentNode;
	
	var loImage = document.createElement('img');
	loImage.setAttribute('src', 'images/loading1.gif');
	
	par.innerHTML = '';
	par.appendChild(loImage);
		
	// create the removal link
	var text = document.createTextNode('remove');
	
	var liRem = document.createElement('a');
	liRem.setAttribute('href','javascript:removeFile(this)');
	liRem.appendChild(text);
	
	par.innerHTML = '';
	par.appendChild(liRem);
	
}

function removeFile(obj){
	
	// post fileid 
	
	// change the image
	
}

function addMoreFile(){
	
	// create fully file upload row
	// consist of two text elements, file element, and 1 button.  
	var nFileTitle = document.createElement('input');
	nFileTitle.setAttribute('name','title');
	nFileTitle.setAttribute('type','text');
	nFileTitle.setAttribute('size', '33');
	nFileTitle.setAttribute('value','- none -');
	nFileTitle.setAttribute('maxlength','50');
	
	var nFilePath = document.createElement('input');
	nFilePath.setAttribute('name', 'filepath');
	nFilePath.setAttribute('type', 'file');
	nFilePath.setAttribute('size', '33');
	
	var nDesc = document.createElement('input');
	nDesc.setAttribute('name', 'description');
	nDesc.setAttribute('type', 'text');
	nDesc.setAttribute('value','- none -');
	nDesc.setAttribute('size', '60');
	nDesc.setAttribute('maxlength', '200');
	
	
	var nUpButton = document.createElement('input');
	nUpButton.setAttribute('name', 'upload');
	nUpButton.setAttribute('type', 'button');
	nUpButton.setAttribute('value', ' Upload ');
	nUpButton.setAttribute('onclick', 'upload(this)');
	
	// empty element
	var ksg = document.createTextNode(' ');
	
	// obtain the table pointer
	var attTable = document.getElementById('attachment');
	attRow = attTable.rows.length;
	alert(attRow);
	
	var nextRow = attTable.insertRow(attRow);
	var ceL = nextRow.insertCell(0);
	
	ceL.appendChild(nFileTitle);
	
	ceL = nextRow.insertCell(1);
	
	ceL.appendChild(nFilePath);
	
	ceL = nextRow.insertCell(2);
	
	ceL.appendChild(nDesc);
	
	ceL = nextRow.insertCell(3);
	
	ceL.appendChild(nUpButton);
	
	ceL = nextRow.insertCell(4);
	
	ceL.appendChild(ksg);
	
}

the problem arise when I try to use the removeFile() function using this keywords.
into these;

Code:

function removeFile(obj){
	
	// post fileid 
	
	// change the image back
	// get parent pointer of this element
	var par = obj.parentNode;
	
	var loImage = document.createElement('img');
	loImage.setAttribute('src', 'images/loading1.gif');

	
}

I try to apply the same approach as the upload() function.
But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed?

Hi

I have DropdwonList with elements, 1,2,3 and 4.. and I have another DropdownList with options Normal, Standard, Emegency, and Expendited.

Can you help me with a code, so that when I select "1" option on the first dropdown, the "Emegency" option on the second dropdown is set/selected.

Thanks in advance

hi All,

I want to add UL item to Li in java script dynamically .so that i can build submenu dynamically.can any one help me.

HI
I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id.
How can I do so?

Thanks

Hi all i have the following code.

Code:

$(document).ready(function(){
		$("ul, li, a, p, img").hover(
			function(){
				var origBorder = $(this).css("border");
				var elementID = $(this).attr("id");
				$(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red");
			}, 
			function(){
				$(this).css("border", "none").css("z-index", "1");	
			}
		);
	});

it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over?

I am using a jQuery slider for a website but the W3C comes up with invalid because:

document type does not allow element "div" here
.before('<div id="buttons">')

Code:

<script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager:  '#buttons'
});
});
</script>

Any help with this would be appreciated thanks.