Popup appearing twice and data not appearing in pop up

Question

I am using, JS, HTML as well as Apex to dynamically create a grid where each row has an edit link. The edit link on click opens up a pop up which is basically an apexform.Now I am facing two issues:

a) When I click save to save the record to the grid, the Edit popup opens up automatically after the record is added to the grid. I feel this could be because the Edit Link is being generated dynamically (but the onclick attribute has been set) so need help in finding out the main reason for it. The function that triggers popup window to open also does a remote action to get the record data. On console an error is displayed stating: Visualforce Remoting Exception: List has no rows for assignment to SObject

b)The data is not being displayed in the Edit popup, neither first time or even when clicked. Previously, I created a function as a pageReference as I just need a global object instance that I can use in the Apexform. It did not work (probably because my edit logic was in JS and I had to call the controller function from JS instead of HTML). Then, I created a remote action and tried returning a list. Below are my code snippets:

VF page: (Edit Popup)

<div class="modal fade" id="EditContact" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h2>Edit Contact</h2>
            </div>
            <div class="modal-body">
                <apex:form >
                    <div class="form-group"> 
                        <label for="firstName">First Name:</label>
                        <apex:inputfield type="text" styleclass="form-control" value="{!sUpdateContact.FirstName}" />
                    </div> 
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                    <apex:inputfield type="text" styleclass="form-control" value="{!sUpdateContact.LastName}" />
                </div>
                <div class="form-group">
                    <label for="company">Company</label>
                    <apex:outputText styleclass="form-control" value="{!sUpdateContact.Account.Name}"></apex:outputText>
                </div>
                <div class="form-group">
                    <label for="title" >Title</label>
                    <apex:inputfield type="text" styleclass="form-control" value="{!sUpdateContact.Title}" />
                </div>
                <div class="form-group">
                    <label for="phone" >Phone</label>
                    <input type="text" placeholder="Phone" class="form-control" id="phone" />
                    <apex:inputfield type="text" styleclass="form-control" value="{!sUpdateContact.Phone}" />
                </div>
                <div class="form-group">
                    <label for="email" >Email</label>
                    <apex:inputfield type="text" styleclass="form-control" value="{!sUpdateContact.Email}" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <apex:commandButton action="{!SaveUpdatedContact}" id="UpdateContactSave" styleclass="btn btn-default" value="Save">  
                    </apex:commandButton> 

Dynamically Create rows in grid (The records selected in search popup are added as rows in the grid)

result.forEach(function(record) {/*10*/
// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var newCell1  = newRow.insertCell(0);
var newCell2  = newRow.insertCell(1);
var newCell3  = newRow.insertCell(2);
var newCell4  = newRow.insertCell(3);
var newCell5  = newRow.insertCell(4);
var newCell6  = newRow.insertCell(5);
var newCell7  = newRow.insertCell(6);
var newCell8  = newRow.insertCell(7);
// Append a text node to the cell
newCell2.innerHTML = 'Delete';
newCell3.innerHTML = mapAttendeeQuery[record.AttendeeId].strName;
newCell4.innerHTML = mapAttendeeQuery[record.AttendeeId].CompanyName;
newCell5.innerHTML = mapAttendeeQuery[record.AttendeeId].strTitle;
newCell6.innerHTML = mapAttendeeQuery[record.AttendeeId].strPhone;
newCell7.innerHTML = mapAttendeeQuery[record.AttendeeId].strEmail;
newCell8.innerHTML = mapAttendeeQuery[record.AttendeeId].strId;

//Set EditLink
TestContactEdit ='';
TestContactEdit = newCell8; 
console.log ('TestContactEdit from newCell8:');
console.log (TestContactEdit);
//Setting EditLink variable properties
EditLink = document.createElement('a');
EditLink.setAttribute('HREF', "javascript:PopEditContact(TestContactEdit)");
EditLink.setAttribute('onclick', PopEditContact(TestContactEdit));
EditLink.innerHTML = "Edit";
newCell1.appendChild(EditLink);

/*10*/})

JS Function when Edit Popup is clicked

function PopEditContact(TestContactEdit){
console.log ('in PopEditContact function the id is:');
console.log (TestContactEdit);
result = Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.EventPortal_Detail.UpdateContactRecord}',
TestContactEdit,
function handleUpdateContactResultresponse(result, event){
if (event.status)
{console.log ('The update contact id is:'); 
 console.log (result);}
});
jQuery("#EditContact").modal();
}  

Controller class: Constructor class

public class UpdateContactInfo
{
public string strId         {get; set;}
public string strName       {get; set;}

**Constructor method**
 public UpdateContactInfo(Contact sUpdateContact){
 this.strId          = sUpdateContact.id;
 this.strName        = sUpdateContact.Name;
   }
 }

**RemoteAction function**
@RemoteAction
public  static list<UpdateContactInfo> UpdateContactRecord(string varAttendeeId){
//public  static id UpdateContactRecord(string varAttendeeId){
   Contact sUpdateContact = new Contact();
   system.debug ('The id is:');
   system.debug(varAttendeeId); 
   sUpdateContact = [select Id, FirstName, LastName, Name, Title, Phone, Email  from Contact where Id=:varAttendeeId LIMIT 1];
   List<UpdateContactInfo> TestContact = new List<UpdateContactInfo>();
   TestContact.add(new UpdateContactInfo(sUpdateContact));
   system.debug ('The name is:');
   system.debug(sUpdateContact.FirstName);
   return TestContact;  
}    

Answer 1

I suspect the problem to be in Dynamically Create rows in grid.

Let us check the code line by line:

1. EditLink.setAttribute('onclick', PopEditContact(TestContactEdit));

This line causes the PopEditContact() function to be called which opens the popup window automatically when rows are being added to the table. Another point is, setAttribute() method's second parameter will be the value returned by PopEditContact() function as it will be called first when this line is executed. Maybe you have to write this as follows:

EditLink.setAttribute('onclick', 'PopEditContact("'+TestContactEdit+'")');

2. TestContactEdit = newCell8;

Here, newCell8 is a DOM object (maybe a td tag here) as you have used insertCell() and assigned it's value to TestContactEdit variable. Because this is a DOM object, the remote action is not passed a valid Id; Instead a HTML DOM string is passed. Replace this line with: TestContactEdit = newCell8.innerHtml;

Please verify this and check after that.