2

I'm attempting to create a visualforce page that has an updateable column within a pageblocktable. When the column value is updated and the page is rerendered the value displayed is the original value. I suspect it has to do with the viewstate value being displayed instead of the page getting the updated value from the controller.

My desired outcome is a solution where the updated values would be displayed upon pageblock rerender.
However, all suggested solutions are welcome! :)

Here's some example code below:

VF Controller

public with sharing class MyExampleController {
public List<User> users { 
    get { return this.userList; }
}

public MyExampleController() {
    this.userList = [SELECT Title, Name FROM User WHERE Title != null ORDER BY Name LIMIT 10];
}

public Id titleUserId { get; set; }
public String titleValue { get; set; }
public void saveTitle() {
    User userForUpdate = [SELECT Title, Name FROM User WHERE Id = :this.titleUserId];
    if (userForUpdate != null) {
        userForUpdate.Title = this.titleValue;
        update userForUpdate;

        this.userList = [SELECT Title, Name FROM User WHERE Title != null ORDER BY Name LIMIT 10];
    }
}

    private List<User> userList;
}

VF Page

<apex:page controller="MyExampleController"> 
<apex:includeScript value="{!URLFOR($Resource.jquery_common, 'jquery-2.1.4.js')}" />
<script type="text/javascript">
    var lastTitleSelectDiv = null;
    var lastTitleSelectEditContainerDiv = null;

    var j$ = jQuery.noConflict();
    j$(document).ready(function() {
        bindEvents();
    });
</script>
<apex:form >
  <apex:pageBlock id="page_block_to_rerender">
      <apex:pageBlockTable value="{!users}" var="u">
          <apex:column >
              <apex:facet name="header">Name</apex:facet>
              {!u.Name} 
          </apex:column>
          <apex:column style="width:270px"> 
              <apex:facet name="header">Title</apex:facet>
                  <div class="titleSelect">
                  {!u.Title}
                  </div>
                  <apex:outputPanel layout="block" styleClass="titleSelectEditContainer">
                      <div class="titleSelectEdit" id="{!u.Id}" style="display:none;">
                          <input type="text" class="titleSelectValue"/>
                          <apex:commandLink value="Save" id="titleSaveLinkButton" styleClass="btn btnSave" style="text-decoration:none;" />
                          <apex:commandLink value="Cancel" id="titleCanelLinkButton" styleClass="btn btnCanel" style="text-decoration: none;" />
                          <input type="hidden" value="{!u.Title}" class="titleSelectValueHidden" />
                      </div>
                  </apex:outputPanel>
          </apex:column>
      </apex:pageBlockTable> 
  </apex:pageBlock>
  <apex:actionFunction name="saveTitleValue" action="{!saveTitle}" rerender="page_block_to_rerender">
      <apex:param name="p1" value="" assignTo="{!titleUserId}" />
      <apex:param name="p2" value="" assignTo="{!titleValue}" />
  </apex:actionFunction>
</apex:form>
<script>
    function saveTitle(id, value){
        console.log(id);
        console.log(value);
        saveTitleValue(id, value);
    }

    function bindEvents() {
        lastTitleSelectDiv = null;
        lastTitleSelectEditContainerDiv = null;


        // Save button click event binding
        j$(".btnSave").click(function() {
            var titleSelectEditDiv = j$(this).closest(".titleSelectEdit");
            var titleSelectValueInput = titleSelectEditDiv.children("input.titleSelectValue");

            saveTitle(titleSelectEditDiv.attr("id"), titleSelectValueInput.val());
        });

        // Cancel button click event binding
        j$(".btnCancel").click(function(event) {
            event.preventDefault();
            var titleSelectEditContainerDiv = j$(this).closest(".titleSelectEditContainer");
            var titleSelectDiv = titleSelectEditContainerDiv.prev(".titleSelect");

            titleSelectEditContainerDiv.hide();
            titleSelectDiv.show();
        });

        // Div "show/hide" click event binding
        j$("div.titleSelect").click(function() {
            if (lastTitleSelectDiv) {
                lastTitleSelectDiv.show();
            }

            if (lastTitleSelectEditContainerDiv) {
                lastTitleSelectEditContainerDiv.hide();
            }

            var titleSelectDiv = j$(this);

            var titleSelectEditContainerDiv = titleSelectDiv.next();

            var titleSelectEditDiv = titleSelectEditContainerDiv.children().first();

            var titleSelectValueInput = titleSelectEditDiv.children("input.titleSelectValue");
            var titleSelectValueHiddenInput = titleSelectEditDiv.children("input.titleSelectValueHidden");

            titleSelectValueInput.val(titleSelectValueHiddenInput.val());
            titleSelectDiv.hide("slow");
            titleSelectEditDiv.show("slow");

            lastTitleSelectDiv = titleSelectDiv;
            lastTitleSelectEditContainerDiv = titleSelectEditDiv;
        });
    }

    </script>
 </apex:page>
1
  • What kind of profile are you using when testing
    – mdenavac
    Jun 30 '15 at 22:11
1

Add reRender="none" in apex:commandLink which does the save and add oncomplete="bindEvents()" in the apex:actionFunction

1
  • Thank you for your answer. I had already figured it out and added the oncomplete="bindEvents();" to the commandLink. However, I appreciate you taking the time to respond with an answer. Marking this post as the answer. :)
    – Javan
    Jul 4 '15 at 17:15

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.