AJAX expert needed.

[CANEHDN]

Unfortunately I will not be able to provide links for this. I have a table that is displayed on the page. A user can press a button to added information to the database which in turn adds a new row to the table. I'm using AJAX to create the row without having to refresh. This works perfectly, finally.

col4.innerHTML = "<a href='../actions/administrators_edit_form.php?adminID=" + adminID + "&keepThis=true&TB_iframe=true&modal=true' class='thickbox'><img src='../images/edit.gif' border='0'></a>&nbsp;<a href='../actions/administrators_delete.php?adminID=" + adminID + "&rw=" + rowCount + "&keepThis=true&TB_iframe=true&modal=true&width=250&height=75' class='thickbox'><img src='../images/cross.gif' border='0'></a>";

This is what one of the rows looks like. The class attribute works fine when the page loads but doesn't seem to work when I add the rows with AJAX. I use it to open a fancy popup box if the user clicks the image.

Here is the code that I use to create the row and the columns.

var newRow = parent.document.getElementById("theTable").insertRow(rowCount);
newRow.style.backgroundColor=rowColor;

var col1 = newRow.insertCell(0);
col1.setAttribute("align", "center");

I hope you can understand this. Any help would be much appreciated.

[Me1000]

Originally Posted by CANEHDN

Unfortunately I will not be able to provide links for this. I have a table that is displayed on the page. A user can press a button to added information to the database which in turn adds a new row to the table. I'm using AJAX to create the row without having to refresh. This works perfectly, finally.



This is what one of the rows looks like. The class attribute works fine when the page loads but doesn't seem to work when I add the rows with AJAX. I use it to open a fancy popup box if the user clicks the image.

Here is the code that I use to create the row and the columns.



I hope you can understand this. Any help would be much appreciated.

I wont pretend to be a javascript expert, because I am not anywhere near close to one. However....

Let me make sure I understand your problem first. Thickbox isnt working on the new rows that are generated using the javascript? The class attribute is used by thickbox to figure out which links thickbox gets applied to. Am I right?

The problem could be a result of the code that thickbox uses to initialize itself when the page loads.

This is the function that is being called I am talking about...

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
  $(domChunk).click(function(){
  var t = this.title || this.name || null;
  var a = this.href || this.alt;
  var g = this.rel || false;
  tb_show(t,a,g);
  this.blur();
  return false;
  });
}

This is the actual call of the function, along with other calls...

$(document).ready(function(){   
  tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
  imgLoader = new Image();// preload image
  imgLoader.src = tb_pathToImage;
});

you might need to recall the tb_init() function after you generate the new row...

I think that would probably fix it, assuming I understood your problem correctly.

[CANEHDN]

You understand it exactly. I will try to call that that function again once I close the popup, tomorrow. Hopefully it works. Thanks for the help.

[Me1000]

Alright, then I would just copy this into your javascript, right after the new table row is created...

tb_init('a.thickbox, area.thickbox, input.thickbox');

Best of luck with this.

[angelneo]

Erm...

Did you use setAttribute in this manner for your new row

newrow.setAttribute('class', 'thickbox');

Add this line in as well

newrow.className = 'thickbox';
newrow.setAttribute('class', 'thickbox');

Some browsers do not register style changes with setAttribute


For adding events such as onclick, use attachEvent for IE and addEventListener for the rest

[CANEHDN]

I've both suggestions and still have the same issue. I even tried calling the function on an onClick event in the image and link. Any more suggestions? I'm sure this can be done.


I'm such a dingle berry. You were right. I forgot to add parent. I hate working on problems and once you come close to getting it, you forget the basic stuff. Since I've added this, it works.

parent.tb_init('a.thickbox, area.thickbox, input.thickbox');

Thanks a ton for you help. Here have a jolly rancher.