3

I'm using JS function to get a contact record and another function to update the record after hitting save. getRemoteContact() works beautifully, but saveRemoteContact() only works at random. I've tried to observe it closely to notice a pattern, but I couldn't make it out. Note that I'm using a form inside a modal to update the record. The modals are Bootstrap in case it's important.

JS:

<script type="text/javascript">
function saveRemoteContact(id) {
    contactName = document.getElementById("{!$Component.abc.newContactName}").value;
    contactAddress = document.getElementById("{!$Component.abc.newContactAddress}").value;
    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.test4_controller.saveContact}',
        id, contactName, contactAddress,
        function(){}, 
        {escape: true}
    );
}
</script> 


<script type="text/javascript">
function getRemoteContact(contactId) {
    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.test4_controller.getContact}',
        contactId, 
        function(result, event){
            document.getElementById("{!$Component.abc.newContactName}").value = result.Name;
            document.getElementById("{!$Component.abc.newContactAddress}").value = result.Address__c;
        }, 
        {escape: true}
    );
}
</script> 

Apex:

@RemoteAction
global static Contact__c getContact(String id) {

    contact = [SELECT Id, Name, Address__c
               FROM Contact__c WHERE Id = :id ];

    return contact;
}

@RemoteAction
global static pageReference saveContact(String id, String name, String address) {

    Contact__c updatedContact = [ SELECT Id, Name, Address__c
                              FROM Contact__c
                              WHERE Id = :id ];

    updatedContact.Name = name;
    updatedContact.Address__c = address;
    update updatedContact;
    return null;
}

Markup:

<a href="#" onclick="getRemoteContact('a08i0000023d9l9ABA')">Get contact</a>
<a href="#editContact" data-toggle="modal" >Open modal</a>

<apex:form id="abc" styleClass="form-horizontal">
    <div id="editContact" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <apex:inputField id="newContactName" value="{!contact.Name}"/>
        <apex:inputText id="newContactAddress" value="{!contact.Address__c}" />
        <apex:commandButton value="Save" onclick="saveRemoteContact('a08i0000023d9l9ABA')"/>

    </div>
</apex:form>

What foolish mistake am I making?

  • That's a tough one giving the erratic behavior. It's not an answer, but have you tried using a traditional action method to perform the save instead? Seems like you're doubling up on things by using the visualforce forms, commandButton, and inputs, but using javascript to pass data back and forth – Ralph Callaway Apr 25 '13 at 2:18
  • Is the ID being passed in correctly every time? Or is it a case of the apex method not even being called reliably? – Matt Lacey Apr 26 '13 at 7:34
  • The apex method was being called intermittently. @Ralph: I suppose that could work, but I was really shooting for an all-remoting solution here; use of VF tags was probably a mistake. All in all, I'm pretty sure the problem was related to form post interfering with the onclick event. My solution is below. – geeljire Apr 29 '13 at 2:23
3

As I was using a Bootstrap modal, clicking the commandButton was triggering a form submit refresh which was interfering with the execution of saveRemoteContact().

Prevent the refresh by returning false and hide the modal using the standard Bootstrap method (which will require use of HTML tags):

<button class="btn" data-dismiss="modal" aria-hidden="true" onclick="saveRemoteContact('a08i0000023d9l9ABA'); return false;">Save</button>

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.