Help with javascript and CGridview

Yii 1.1 General Discussion
1

Hi all,

I have a problem with some functionality on one of my pages.

I have a CGridview filled with some data from a MySQL database. When I click the ‘edit’ button ( 1. in the picture)at the end of the table, the div with the gridview closes (is hidden) and another div with a form to edit the data is shown (is unhidden). This is done using javascript.

When I first load a page, this works fine, but after I filter the data ( 2. in the picture) or when I go to a different page of results (3. in the picture), this suddenly stops working. The Edit button doesn’t do anything anymore after I do any of these actions…

Any idea what causes this? And how I would go about fixing it?

Thank you.

1273

problem.jpg

2

Could you explain how your hidding/unhidding js works ?(post some code =) )

3

Yeah sure:

This bit adds a clickevent to the table in the gridview when the page loads:




function run(e) {

  var tabel;

  tabel = document.getElementsByClassName("items")[0];

  if (tabel === undefined) {

    alert("not found");

    return;

  }

  tabel.addEventListener("click", tabelclick, false);

}

window.addEventListener("load", run, false);

This bit defines the clickevent. It says to call upon the function ‘showDetails’ when an image is clicked inside the gridview (the edit button is the only image inside the gridview). It also fills the edit form with data taken from the table.




function tabelclick(e) {

  var elem, rij, kid, kid2, kid3, kid4, kid5;

  elem = e.target;

  if (elem.tagName === "img" || elem.tagName === "IMG") {

    rij = elem.parentNode.parentNode.parentNode;

	kid = rij.childNodes[0].textContent;

	kid2 = rij.childNodes[1].textContent;

	kid3 = rij.childNodes[2].textContent;

	kid4 = rij.childNodes[3].textContent;

	kid5 = rij.childNodes[4].textContent;

    	

		document.getElementById('naam').value = kid;

		document.getElementById('achternaam').value = kid2;

		document.getElementById('datum').value = kid3;

		document.getElementById('tijd').value = kid4;

		document.getElementById('aanwezig').value = kid5;

		;

	showDetails();

	

  }

}

This bit hides the div with id ‘grid’ and shows the div with id ‘showid’


function showDetails()

{

document.getElementById('showid').style.display='';

document.getElementById('grid').style.display='none';

}
4

Problem is that on filer/sort the complete gridview is replaced… so the click event is not added to the new table

so you will need to use jQuery and the live or delegate event so that the click event is binded for future tables