0

I have to show the selected row in an alert. Can someone please help me?

Below is the page code snippet.

<tbody>
            <apex:repeat value="{!contactList}" var="contact" id="loop">
                <tr>
                    <td><input id="selecting" class="checkcell" type="radio" onclick="handleClick(this)"/></td>
                    <td style="font-family:  Times New Roman;font-weight:bold;"><div id="PlanName" >{!contact.Name}</div></td>
                    <td style="font-family:  Times New Roman;font-weight:bold;">{!contact.Parent_Account_Plan_abv__r.Name}</td>
                    <td style="font-family:  Times New Roman;font-weight:bold;">{!contact.Account_vod__r.Name}</td>
                    <td style="font-family:  Times New Roman;font-weight:bold;">{!contact.Status__c}</td>
                    <td style="font-family:  Times New Roman;font-weight:bold;">{!contact.Type__c}</td>

                </tr>
            </apex:repeat>
        </tbody>

Under script tag I am trying it this way.

         j$('[id$=selecting]').change(function() {
           j$('[id$=selecting]').not(this).prop('checked', false); 
           var val = j$('[id$=selecting]').val();
            handleClick(val);
            alert('Hi!'+val); 

        });

      function handleClick(el) {
      var parent = el.parentNode,
          cells = parent.querySelectorAll("td");
      console.log(cells[0].innerText);
      console.log(cells[1].innerText);
      console.log(cells[2].innerText);
      console.log(cells[3].innerText);
      console.log(cells[4].innerText);
                }

It gives me printed "Hi!on". I need to show the whole record selected here.

  • Sorry since I am operating from my smartphone, having edit issues. – Testing_SFDC Jun 8 '18 at 4:16
1

To get the "entire record", you could either go up one node and query for them:

function handleClick(el) {
  var parent = el.parentNode.parentNode,
      cells = parent.querySelectorAll("td");
  console.log(cells[0].innerText);
  console.log(cells[1].innerText);
  console.log(cells[2].innerText);
  console.log(cells[3].innerText);
  console.log(cells[4].innerText);
}

Alternatively, you could consider using data attributes:

<input ... data-contact-name="{!HTMLENCODE(contact.Name)}" ...

Which you can then access in your code:

function handleClick(el) {
  console.log(el.dataset.contactName);
  ...

If you need to have the radio group work correctly without code, you will want to give them a name:

<input name="selecting" class="checkcell" type="radio" onclick="selected(this)"/>

This eliminates the need to use the unchecking trick for the other radios.

  • I have put your code in the script tag. But I am not getting the desired output. I am missing something as I get your solution must be the right one. Can you please help? I have updated my question. – Testing_SFDC Jun 8 '18 at 8:09
  • 1
    @Testing_SFDC just take the bits inside the function and put them in your click handler. I wrote this just generically. – sfdcfox Jun 8 '18 at 8:14
  • Yes I am trying that out. Please find my updated code in the question. – Testing_SFDC Jun 8 '18 at 8:31
  • @Testing_SFDC Your onclick code is "selected". – sfdcfox Jun 8 '18 at 8:42
  • 1
    @Testing_SFDC Thinking on it, I think it should have been parent = el.parentNode.parentNode instead. – sfdcfox Jun 8 '18 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.