I have a Tapestry Grid component with three columns. Each cell contains a
select component that I want to submit their id and value via Ajax when the
value changes. The id isn't the client side component id but rather an id that
the server uses to lookup and save the value that has changed.
In order to perform this Ajax request I am using the jQuery/bind mixin. My
grid typically has around 50 rows and as a result the bind mixin ends up
generating a boatload of Javascript like this:
Tapestry.init({
"activate" : [
"card"
],
"jqbind" : [
{
"elementId" : "colourProfileOverride_22",
"zoneUpdate" : "highlight",
"hideTime" : "500",
"callback" : "addContext",
"eventType" : "change",
"preventDefault" : true,
"url" :
"http://localhost:8080/editcube:colourprofileoverridechanged/65/CoNtExT?t:ac=1";,
"zoneId" : "gridZone",
"hideEffect" : "slide",
"contextMarker" : "CoNtExT"
},
{
"elementId" : "convertedManaCostOverride_22",
"zoneUpdate" : "highlight",
"hideTime" : "500",
"callback" : "addContext",
"eventType" : "change",
"preventDefault" : true,
"url" :
"http://localhost:8080/editcube:convertedmanacostoverridechanged/65/CoNtExT?t:ac=1";,
"zoneId" : "gridZone",
"hideEffect" : "slide",
"contextMarker" : "CoNtExT"
},
{
"elementId" : "superTypeOverride_22",
"zoneUpdate" : "highlight",
"hideTime" : "500",
"callback" : "addContext",
"eventType" : "change",
"preventDefault" : true,
"url" :
"http://localhost:8080/editcube:supertypeoverridechanged/65/CoNtExT?t:ac=1";,
"zoneId" : "gridZone",
"hideEffect" : "slide",
"contextMarker" : "CoNtExT"
}
]
});
This is really slowing down my page load time which is a problem in particular
for mobile users. I'm using the bind mixin because it's the only technique
that I could find that can add the new value of the select component as a
context parameter using bind.callback and the addContext function below.
Adding the value to the context is the only way I've found to get this
information back to the server in the Ajax request.
Can anyone advise me on how to either cut down the Javascript generated by the
jquery/bind mixin or describe an alternative approach for submitting Select
values via Ajax such that the request includes the id and value of the select
that has changed? For reference here is a snippet of my grid:
<t:zone t:id="gridZone" id="gridZone">
<script type="text/javascript">
function addContext(event,ui,url) {
url.addContext(event.target.value);
}
</script>
<t:grid id="editCubeGrid" source="cubeCards" row="cubeCard"
model="cubeCardModel" inPlace="true" rowsPerPage="rows" pagerPosition="both"
reorder="colourProfile,convertedManaCost,superTypeCombinationOverride">
<p:colourProfileCell>
<t:select t:id="colourProfileOverride"
t:clientId="colourProfileOverride" class="cubeAjaxUpdate"
t:value="cubeCard.colourCombinationOverride" blankOption="never"
t:mixins="jquery/bind" bind.context="cubeCard.id"
bind.event="ColourProfileOverrideChanged" bind.eventType="change"
bind.zone="gridZone" bind.callback="addContext"/>
</p:colourProfileCell>
<p:convertedManaCostCell>
<t:select t:id="convertedManaCostOverride"
t:clientId="convertedManaCostOverride"
model="literal:0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30"
class="cubeAjaxUpdate" t:value="cubeCard.convertedManaCostOverride"
blankOption="never" t:mixins="jquery/bind" bind.context="cubeCard.id"
bind.event="ConvertedManaCostOverrideChanged" bind.eventType="change"
bind.zone="gridZone" bind.callback="addContext" />
</p:convertedManaCostCell>
<p:superTypeCombinationOverrideCell>
<t:select t:id="superTypeOverride" t:clientId="superTypeOverride"
class="cubeAjaxUpdate" t:value="cubeCard.superTypeCombinationOverride"
blankOption="never" t:mixins="jquery/bind" bind.context="cubeCard.id"
bind.event="SuperTypeOverrideChanged" bind.eventType="change"
bind.zone="gridZone" bind.callback="addContext" />
</p:superTypeCombinationOverrideCell>
</t:grid>
</t:zone>
Much appreciated,
Ben.
