AJAX Content Generation

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);

Code (markup):

Any ideas/suggestions hugely appreciated...

 

With the library prototype.js (cross browser compatible) you can use:
- For replacing setAttribute("onclick", myonclick) -> observe() function. It's a extension for the Event object. Use: observe(element, name, observer, useCapture)
- For replacing setAttribute("class", newbuttonstyle) -> addClassName() function. Use: addClassName( element, className)

 

thanks ajsa52 but I want to do it without using a js library...