1

I need to display a table of rows with each row having an anchor which on clicking opens a dialog (div content) based on the anchor tag clicked. As these anchors are generated dynamically, I need to find a way of identifying the anchor tag that was clicked and open up the corresponding dialog.

XHTML code below:

<ui:repeat var="vDetailTO" value="#{vAdmBean.displayVDetailTOList}" varStatus="vCounter"> 
 <tr>
   <td align="left">
     <h:outputText value="#{vDetailTO.userId}" />
   </td>
  <td align="left">
  <a id="dialogLink-#{vCounter.index}" href="#" owNumber="#vendorCounter.index}">+</a>
  <div id="aNodeSearch-popupLink-#{vCounter.index}"  title="Node"        
      style="display:none;">
      The content is actually big. So, just typing this text here.
      Note that this is the div tag that needs to open based on the anchor tag clicked
      as the content varies for each anchor tag 
   </div>
   </tr>
  </ui:repeat>

JS Code

   $("#aNodeSearch-popupLink-"+$("#frmNode\\:hdnRecordIndex").val()).click(function() {
       var rowNumber = $(this).attr('rowNumber');
       $("#frmNode\\:hdnRecordIndex").attr("value", rowNumber);
           $("#aNodeSearch-popup-"+rowNumber).dialog("open");
       });

    $("#aNodeSearch-popup-"+$("#frmNode\\:hdnRecordIndex").val()).dialog(
    {
    autoOpen : false,
    modal : false,
    resizable : false,
    height : 500,
    width : 750,
    buttons : {
    "Submit" : function() {
       var selNodes = "";
    var rowNumber = $("#frmNode\\:hdnRecordIndex").val();
    var availNodes = "aNodeAvailListId-" + rowNumber;  

        $('#' + availNodes + ' input:checkbox:checked').each(
                function() {
                    selNodes += $(this).val() + ",";
                });

        $("#frmNode\\:hdnArticleNodeIds").attr("value",
                selNodes);

        frmNode["frmNode:btnRefresh"]
                .click();

        $(this).dialog("close");
    }
    }
       });

When the anchor in the first row is clicked, the dialog opens fine and am able to do the needful. However, when I click the subsequent row, there is nothing that happens and even Firefox web console does not show a problem. But if I hardcode the code in js with 

  aNodeSearch-popupLink-1.click and 
  aNodeSearch-popupLink-2.click and so on as shown below..

am able to view the dialog boxes as required.

  $("#aNodeSearch-popupLink-1").click(function() {

$("#aNodeSearch-popup-1").dialog("open");
   });

  $("#aNodeSearch-popup-1").dialog(
  {
     ........   
   });

Any ideas on how I can handle this scenario of identifying the clicked anchor tag and open their corresponding dialogs ?

user2253556
  • 67
  • 2
  • 12

1 Answers1

0

You should use event delegation, and identify your link inside the handler :

//you should add a common class to your a nodes, if you want to distinguish
//them from other links
$('#myTable').on('click', 'a.specialLink', function(){
    // you can check the anchor's id here :
    var id = this.id;

    // and do whatever you see fit with it
});

With this pattern, any new <a class="specialLink"> node that you add to your table will be handled automatically.

Community
  • 1
  • 1
LeGEC
  • 46,477
  • 5
  • 57
  • 104
  • Thanks mate...am able to identify the clicked anchor tags...Not sure if the same question can be updated but I need to open the corresponding div tag as dialog. When I click the first anchor tag, the dialog opens fine. When I click on the second anchor tag, the firefox web console shows me an error : Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' ....any ideas ?? – user2253556 Apr 08 '13 at 12:05
  • `.dialog('open')` should be called on a node where the dialog is already initialized. You should call `.dialog({ ...options... })` on the newly created dialogs. – LeGEC Apr 08 '13 at 13:05
  • If all the dialogs are `copy/paste` from each other, you should consider having only *one* `div #aNodeSearch-popup`, and have your javascript load the correct data on open - check the `open` callback for `$.dialog()` – LeGEC Apr 08 '13 at 13:08
  • Got the answer from this post http://stackoverflow.com/questions/13520139/jquery-ui-dialog-cannot-call-methods-on-dialog-prior-to-initialization Thanks LeGEC again for your help – user2253556 Apr 08 '13 at 13:27