You need to sign in to do that
Don't have an account?
gazzer82
Get/Set value of field in PageBlockTable
I have a pageBlockTable in a visualforce page, in the table i am allowing users via JQuery .sortable to rearrange the order of the rows.
No, i want to store this sorting on page save, so i have created a new parameter on the product in Salesforce called sort_order that is a number field.
I would like to update the field, which is in the table and will eventually be hidden each time the rows are dragged, so that on save everything is stored.
I have the following code, which i am trying to get to loop through the table and update the fields appropriatley, but i can't work out the JQuery syntax for setting the value of the field.
Here is the code that creates the table:
<apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">
<apex:variable value="{!1}" var="index">
<apex:pageblockTable value="{!shoppingCart}" var="s" id="shopping_cart" rowClasses="cartRow">
<tr data-SFid="{!index}">
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Description.Label}">
<apex:inputField id="item_description" value="{!s.Description}" required="false"/>
</apex:column>
<apex:column headerValue="Current ID">
<apex:inputField id="Current_ID" value="{!s.Sort_Order__c}" style="width:70px" required="false" onkeyup="refreshTotals();"/>
</apex:column>
<apex:column headerValue="Updated ID" value="{!index}" />
<apex:column >
<apex:commandLink value="Remove" action="{!removeFromShoppingCart}" reRender="selected,searchResults" immediate="true">
<!-- this param is how we send an argument to the controller, so it knows which row we clicked 'remove' on -->
<apex:param value="{!s.PriceBookEntryId}" assignTo="{!toUnselect}" name="toUnselect"/>
</apex:commandLink>
<apex:variable value="{!index+1}" var="index">
</apex:variable>
</apex:column>
<apex:column headerValue="{!$ObjectType.Product2.LabelPlural}" value="{!s.PriceBookEntry.Product2.Name}"/>
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Quantity.Label}">
<apex:inputField value="{!s.Quantity}" style="width:70px" required="true" onkeyup="refreshTotals();"/>
</apex:column>
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.UnitPrice.Label}">
<apex:inputField value="{!s.UnitPrice}" style="width:70px" required="true" onkeyup="refreshTotals();"/>
</apex:column>
</tr>
</apex:pageblockTable>
</apex:variable>
It is the "Current ID" editable field, with the ID of Current_ID that i want to update.
And this is as far as i have gotten with the update script, i have it looping through the rows with the "Selected" id, but i'm not sure how to update/access the value.
$( "[id$=shopping_cart] tbody" ).sortable({
update: function(event, ui) {
//init();
i = 0;
$("[id$=shopping_cart] tbody tr.cartRow").each(function() {
$this = $(this)
var value = $(this).find('Current_ID');
var value2 = $(value).find('value');
console.log("Checking Row " + i);
console.log(value);
console.log(value2).value;
i++;
});
})
Help greatly appreciated as i am way more an ObjectiveC person than i am a Javascript/JQuery person!
Thanks
Gareth
No, i want to store this sorting on page save, so i have created a new parameter on the product in Salesforce called sort_order that is a number field.
I would like to update the field, which is in the table and will eventually be hidden each time the rows are dragged, so that on save everything is stored.
I have the following code, which i am trying to get to loop through the table and update the fields appropriatley, but i can't work out the JQuery syntax for setting the value of the field.
Here is the code that creates the table:
<apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">
<apex:variable value="{!1}" var="index">
<apex:pageblockTable value="{!shoppingCart}" var="s" id="shopping_cart" rowClasses="cartRow">
<tr data-SFid="{!index}">
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Description.Label}">
<apex:inputField id="item_description" value="{!s.Description}" required="false"/>
</apex:column>
<apex:column headerValue="Current ID">
<apex:inputField id="Current_ID" value="{!s.Sort_Order__c}" style="width:70px" required="false" onkeyup="refreshTotals();"/>
</apex:column>
<apex:column headerValue="Updated ID" value="{!index}" />
<apex:column >
<apex:commandLink value="Remove" action="{!removeFromShoppingCart}" reRender="selected,searchResults" immediate="true">
<!-- this param is how we send an argument to the controller, so it knows which row we clicked 'remove' on -->
<apex:param value="{!s.PriceBookEntryId}" assignTo="{!toUnselect}" name="toUnselect"/>
</apex:commandLink>
<apex:variable value="{!index+1}" var="index">
</apex:variable>
</apex:column>
<apex:column headerValue="{!$ObjectType.Product2.LabelPlural}" value="{!s.PriceBookEntry.Product2.Name}"/>
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Quantity.Label}">
<apex:inputField value="{!s.Quantity}" style="width:70px" required="true" onkeyup="refreshTotals();"/>
</apex:column>
<apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.UnitPrice.Label}">
<apex:inputField value="{!s.UnitPrice}" style="width:70px" required="true" onkeyup="refreshTotals();"/>
</apex:column>
</tr>
</apex:pageblockTable>
</apex:variable>
It is the "Current ID" editable field, with the ID of Current_ID that i want to update.
And this is as far as i have gotten with the update script, i have it looping through the rows with the "Selected" id, but i'm not sure how to update/access the value.
$( "[id$=shopping_cart] tbody" ).sortable({
update: function(event, ui) {
//init();
i = 0;
$("[id$=shopping_cart] tbody tr.cartRow").each(function() {
$this = $(this)
var value = $(this).find('Current_ID');
var value2 = $(value).find('value');
console.log("Checking Row " + i);
console.log(value);
console.log(value2).value;
i++;
});
})
Help greatly appreciated as i am way more an ObjectiveC person than i am a Javascript/JQuery person!
Thanks
Gareth
See the blog below, it has Sample code for JQuery Sortable and VisualForce along with more information,
<apex:page controller="ProductSort" showheader="true">
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </apex:includescript>
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></apex:includescript>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css"></apex:stylesheet>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
<apex:sectionheader id="sechead" subtitle="Sorting" title="Products"></apex:sectionheader>
<apex:pageblock title="Sortable Products">
<ul id="sortable">
<apex:repeat id="list" value="{!p}" var="prod">
<li class="ui-state-default" id="{!prod.Id}"><span class="ui-icon ui-icon-arrowthick-2-n-s" id="{!prod.Id}"></span>{!prod.Name}</li>
</apex:repeat>
</ul>
</apex:pageblock>
</apex:page>
http://www.codemeonce.com/2012/02/jquery-sortable-and-visualforce.html
Regards,
Ashish