Visualforce updated values not being displayed after rerender

Question

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>

Answer 1

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