AJAX Content Generation 2

[wellmoon]

Hi,

I'm using AJAX to get a list of filenames from the server and create buttons based on which filenames the script finds, so if it finds one file in the specified directory it will generate and add one button to the page, then the intention is that clicking that button will load some more content.

In FireFox, everything works fine, the new buttons that are generated pick up the stylerules for them and the content loads when they are clicked.

In IE however, the new buttons do not pick up the style rules associated to them and do nothing when clicked. The IE DOM browser shows that the generated buttons do have the correct class and onclick attributes given to them using setAttribute() at creation time so I can't understand why it's not working with IE.

The code I'm using to create the buttons is:

var newbutton = document.createElement("button");
var myonclick = "showContent()";
var newbuttonstyle = "newbutton";
newbutton.setAttribute("onclick", myonclick);
newbutton.setAttribute("class", newbuttonstyle);

Any ideas/suggestions hugely appreciated...

 

[dwarfthrower]

For IE I'd use:

var newbutton = document.createElement("button");
newbutton.attachEvent("onclick", showContent);
newbutton.className = "newbutton";

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[wellmoon]

thanks for the advice dwarfthrower, the className bit worked for setting the class and the buttons now pick up the correct style.

I'm still having trouble with the onclick though, I tried
using newbutton.attachEvent("onclick", showContent(files[x])); but I'm getting a 'type mismatch' error now...

files[x] is an array item that is used in a for loop

 

[dwarfthrower]

You can't pass parameters to the function when you use attachEvent. Is there some property of the button you could use to let you know what parameter to use? (say perhaps it's "name" or "id" attribute) You could use event.srcElement.name or event.srcElement.id to access the parameter.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[wellmoon]

I guess I could set the id to be the parameter instead of the onclick and then use the next function to grab the id instead of just receiving it as a parameter...

Thanks for the advice, shame IE just can't use the setAttribute like FireFox can....

 

[BabyJeffy]

Don't forget that HTML IDs start with an alphabetic character (a-zA-Z). Your page will not validate if you use a number.

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[wellmoon]

thanks babyjeffy, I'll bear that in mind

 

[monksnake]

The following code will work in FF and IE.

newbutton.onclick = function() {functionName()};

<.

 

[wellmoon]

Sorry monksnake, I've tried that and it still doesn't pass the parameter accross. The code works and doesn't generate any errors but any attempts to retieve the parameter in the next function are met with an empty string...

 

[monksnake]

Can you show me the function that you are calling? Because assuming files[x] contains valid data, this should work:

newbutton.onclick = function() {functionName(files[x])};

<.

 

[wellmoon]

ok, the part of the function is:

for (x=0; x < files.length; x++) {
  var newbutton = document.createElement("button");
  var buttonText = document.createTextNode(files[x]);
  newbutton.onclick = function() {newFunction(files[x])};
  newButton.appendChild(buttonText);
  document.body.appendChild(newbutton);
}

newFunction(param) {
  alert(param);
}

but all I get is an empty alert...files[x] definately has valid data in it because FireFox gets it ok, plus I'm using it to set the text of the button, and IE does display this on the button correctly, it's just passing the parameter that is causing the issue

 

[monksnake]

I was told by a little bird what the problem is. When passing files[x] as a parameter, the value of x is lost after we leave the local javascript function, so instead, make a reference to this.innerHTML to grab the value, since I see that files[x] is also the text value of the button.

for (x=0; x < files.length; x++) {
  var newbutton = document.createElement("button");
  var buttonText = document.createTextNode(files[x]);
  newbutton.onclick = function() {newFunction([!]this.innerHTML[/!])};
  newButton.appendChild(buttonText);
  document.body.appendChild(newbutton);
}

newFunction(param) {
  alert(param);
}

<.

 

[monksnake]

I tested that code and it works, here is the code exactly as I have it working:

<html>
<head>

</head>
<body>




</body>
<script type="text/javascript">
var files=["dog", "cat", "squirrel", "skeet"]
for (x=0; x < files.length; x++) {
  var newbutton = document.createElement("button");
  var buttonText = document.createTextNode(files[x]);
  newbutton.onclick = function() {newFunction(this.innerHTML)};
  newbutton.appendChild(buttonText);
  document.body.appendChild(newbutton);
}


function newFunction(param) {
  alert(param);
}

</script>

</html>

<.

 

[wellmoon]

monksnake, you are the king!! It works, thanks for your help on this, very much appreciated

 

[monksnake]

Glad I could help

<.

 

[kaht]

Indeed monksnake, nice solution. *chirp* *chirp*

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]