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>