why doesn't this function (showImage() ) work as soon as the div got content?

Expand|Select|Wrap|Line Numbers

 
<body>

<div id="myImages"></div>

<! THIS IS THE DIV MY CONTENT NEEDS TO GO IN-->

<div id="viewImage"></div>
 
<script type="text/javascript">

//ajaxrequest

var imageBankXhr = XHR();
 
imageBankXhr.open('get', 'imagebank.php', false);

imageBankXhr.send(null);
 
var myXmlFeed = imageBankXhr.responseXML;

var imageBank = myXmlFeed.documentElement.childNodes;
 
// here i get the images and properties from an external xml

var aFragment = document.createDocumentFragment();

for (var i=0; i<imageBank.length; i++) {

    var newDiv = document.createElement('div');

    newDiv.className = 'myImage';

    var newImage = document.createElement('img');

    newImage.src = imageBank[i].childNodes[0].childNodes[0].nodeValue;

    newImage.imageid = imageBank[i].attributes[0].nodeValue;

    newImage.caption = imageBank[i].childNodes[1].childNodes[0].nodeValue;

    newDiv.appendChild(newImage);

    aFragment.appendChild(newDiv);

}

document.getElementById('myImages').appendChild(aFragment);
 
// ADD EVENT REFERS TO ATTACHEVENT / ADDEVENTLISTENER

var myImageDivs = document.getElementById('myImages').childNodes;

for (var i=0; i<myImageDivs.length; i++) {

    addEvent(myImageDivs[i].getElementsByTagName('img')[0], 'click', showImage);

}
 
/*

THIS FUNCTION WORKS FINE WHEN I ALERT THE RESULT, IT ONLY 

WORKS ONE TIME, WHEN I USE INNERHTML OR TEXTCONTENT OR 

INNERTEXT... AS SOON AS THE DIV HAS CONTENT IT DOESNT WORK 

ANYMORE (only tested it in ff and safari)

*/

function showImage(e) {
 
    target = e.target || e.srcElement;

    document.getElementById('viewImage').innerHTML = target.caption;
 
}

</script>

</body>

Oct 1 '10 #1

Subscribe Post Reply

2142

kidwon

Try with embedding jquery library and put the part of the code that doesn't work soon enough in $("document").ready()

Expand|Select|Wrap|Line Numbers

<script type="text/javascript" src="path to jquery file"></script>

Expand|Select|Wrap|Line Numbers

$("document").ready( function() { .....your problematic code....});

It loads the content before the DOM is loaded.
You can right it your own but no need when someone have written it already.
You can find the library at http://www.jquery.com
If any problems feel free to ask again and sign up thus you'll post quickly without moderation!

Oct 1 '10 #2

kidwon

Oops now when reading it closely I see that your problem might be a quite different matter...
It's really hard for me to look in other people code but you say that it stops working after content is added to the div. Try removing the content on every iteration but still I'm guessing what's really the problem

Oct 1 '10 #3

Dick Brouwers

Thanks for your reply kidwon. I rewrote the code to this: now it works perfectly, when addNode() is fired, it creates a new div with the content. If there is already a div present in the dom with id: hallo, removeNode() removes it first before a new one is added.

It is the same code, same eventlisteners... So the problem probably exists in the way my clickable images were created (from an external xml file). Or maybe in the for loop that i used to bind them to the click event.

Expand|Select|Wrap|Line Numbers

 
<body>

<div id='klik'></div>

<div id='klik2'></div>
 
<script type="text/javascript">
 
var newImage = document.createElement('img');

newImage.src = 'images/button.png';

newImage.caption = 'this is an image';
 
var klikme = document.getElementById('klik');

klikme.appendChild(newImage);
 
var newImage = document.createElement('img');

newImage.src = 'images/button.png';

newImage.caption = 'this is an image too';
 
var klikme = document.getElementById('klik2');

klikme.appendChild(newImage);
 
addEvent(document.getElementById('klik').childNodes[0], 'click', addNode);

addEvent(document.getElementById('klik2').childNodes[0], 'click', addNode);
 
function addNode(e) {
 
// remove oldNode first

    removeNode();
 
    var newDiv = document.createElement('div');

    var newText = this.caption;
 
    newDiv.id = 'hallo';

    newDiv.innerText = newText;

    newDiv.textContent = newText;

    document.body.appendChild(newDiv);

}
 
function removeNode() {

    if (document.getElementById('hallo') != null) {

        var oldDiv = document.getElementById('hallo');

        oldDiv.parentNode.removeChild(oldDiv);

    }

}
 
</script>

Oct 2 '10 #4

Similar topics

Why does my function only work once?

by: TheKeith | last post by:

I'm writing a javascript function that is supposed to open and close a box by adjusting the height style of a div container, everytime the link is clicked. For some reason though, the function only...

Javascript

Can't get child_window.close() function to work...

by: marcelf3 | last post by:

Hello.. This page opens a window with some information, but everytime the user changes a field in the parent window, the child window needs to be closed. These 2 functions were supposed to do the...

Javascript

db4 dba_replace doesnt seem to work for me

by: google | last post by:

I am trying to write to a dba and the result is creating a database file, but not writing anything to it. The relevant function is being called, and my variables are populated, but the database...

PHP

Can't get function to work in a query

by: Wade | last post by:

I am pretty new to Access, especially writing code, but I found code on the web to do just what I want and it is posted below. It returns a field value from a previous record. I found the code at:...

Microsoft Access / VBA

param in for-each select statement doesnt seem to work

by: xmlhelp | last post by:

stuff.XSL: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="uid"/> <xsl:template match="/"> parameter...

.NET Framework

Calling function in dynamic replaced content

by: deepres | last post by:

Hi, I have the following problem. In my application I'm dynamically replacing some of web-page content. For example, I have something like that: <span id="ui_tr_22_1_treeJ_span" > <div...

Javascript

Copy function doesnt seem to work

by: supriyamk | last post by:

Hi, i am trying to copy files of a certain type into a different directory using perl, The copy function doesnt seem to work. my @dir_list; my $sub_dir; my $file_name1; ...

Perl

Ajax function doesnt seem to work under IE but works in mozilla

by: panos100m | last post by:

Hi on page load a javascript functions (timedCount()) is executed (timer) which executes another javascript function (ajax function:findprov(divtowrite) ) in turn this calls a php file to query a...

Javascript

XMLHttpRequest function not work

by: Kong Chun Ho | last post by:

Hi, i have created a XMLHttpRequest function, but it didn't work, this is my code function CheckAccount (acc) { CreateXMLHttpRequest(); if (ready == 1) { if (!xmlHttp) { ...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing