使用原型js，如何在用户单击链接时打开对话框窗口并显示动态内容

Question

I have a table with several rows and columns. The user clicks on given text and dialog should open with dynamic content.

eg

<tr> 
  <td>
    <strong>item1</strong>
  </td>
</tr>
<tr> 
 <td>
    <strong>item2</strong>
 </td>
</tr>

The user clicks on item1 or item2 and a javascript window is open with relevant text.

I can do this using prototypejs and window.js which seems to work, but doesnt look like clean javascript.

<td>
  <a href='javascript:openModalDialog("<?php echo item1Id?>")'><strong>item1</strong></a>
</td>

<td>
 <a href='javascript:openModalDialog("<?php echo item2Id?>")'><strong>item2</strong></a>
</td>

I want to use unobstructive javascript using event listeners

$$('.myClass').invoke('observe', 'click', function(event){
    openModalDialog("dynamic content")  ;   
});


<span class="myClass"><span style="display:none"><?php echo item1Id?></span>item1</span>

<span class="myClass"><span style="display:none"><?php echo item2Id?></span>item2</span>

I dont want to display item1Id, item2Id, has PHP will replace it with dynamic content which needs to be displayed in the popup window when the user clicks item1 or item2.

Am I on the right tracks?

How to access item1Id, or item2Id content within the onclick and pass it to openModalDialog?

---

I'm not too sure span inside another span is the best way but only way i can think of it working.

What I need is how to access the dynamic content inside the handler.

For example

On page load

<span class="myClass"><span style="display:none"><?php echo item1Id?></span>item1</span>
<span class="myClass"><span style="display:none"><?php echo item2Id?></span>item2</span>

may become something like

<span class="myClass"><span style="display:none">This is dynamic content generated by php </span>item1</span>
<span class="myClass"><span style="display:none">some more different content </span>item2</span>

So in the handler when the user click item1 I need the content "This is dynamic content generated by php" so I can pass it to openModalDialog function. How can I access the content, this is different for each row.

Any ideas?

When I do console.log(this) i get

Answer 1

To me it seems you are on the right track. As for how to access the item1Id or item2Id, you can see this demo: http://jsfiddle.net/yg7XX/

I've commented it nicely, hoping it might help. Btw, I haven't worked with prototype ever before. My solution was just a guess resulting due to working with jQuery, and the guess worked! :)