Grails如何使AJAX发送从模板中以表格形式编辑的对象

Question

I want to update a field in the edit-form when another field is changed. When the field1 is changed an AJAX-script will call the controller that calculates a new value for field2 and then render the template that updates this field. But the controller needs two values, one is the value of field1 and one is the object that is edited. I need it to make it possible to render the template.

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.availableCert', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {availableCert:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.adjustPrice', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {adjustPrice:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.volumeOffered', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {volumeOffered:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

part of the template:

        <g:select class="availableCert" name="availableCert" from="${offerDetail.availableCert}" value="${offerDetail.choosedCert}" />    
</td>        
<td> FSC: ${offerDetail.priceFSC}</td>
<td> UC: ${offerDetail.priceUC}</td>
<td> CW: ${offerDetail.priceCW}</td>
<td> PEFC: ${offerDetail.pricePEFC}</td>
<td>  
    EndPrice:    ${offerDetail.endPrice}
</td>

So when the controller wants to render this field he needs to have the object ${offerDetail} to make it possible for the template to render it.

I can't see how the javascript can retrieve this object. But it maybe much simpler than I can imagine or?

Controller code:

def updatePrice() {
   def OfferDetail od
    if (params.id != null){
       od = OfferDetail.get(params.id)
   }
    if (params.availableCert != null) {
       od.choosedCert = params.availableCert
   } else if (params.adjustPrice != null) {
       od.priceAdjust = params.adjustPrice.toBigDecimal()
   } else if (params.volumeOffered != null) {
       od.volumeOffered = params.volumeOffered
   } else {}
   render template: "offerDData", model: [offerDetail:od]
}

Answer 1

I think you can streamline your approach with dropdowns and have a single javascript function to handle all dropdown changes eg

<script>
    $(document).ready(function(){
        $( document ).on('change', '.odChange', function ( event ){ 
            $.ajax({
                url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                data: {  updateVal :this.value, 
                         dropDownId: this.id,
                         offerDetailId: od.id
                      },
                type: 'get'
            }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
        });
    });
</script>

<g:select class="odChange" name="availableCert" from="${offerDetail.availableCert}" value="${offerDetail.choosedCert}" />
<g:select class="odChange" name="adjustPrice" from="${offerDetail.adjustPrice}" value="${offerDetail.adjustPrice}" />
<g:select class="odChange" name="volumeOffered" from="${offerDetail.volumeOffered}" value="${offerDetail.volumeOffered}" />

It's worth looking at other options for data binding

Eg for now you could try:

def updatePrice() {
   def od = OfferDetail.get( params.offerDetailId )
   od."${params.dropDownId}" = params.updateVal
   od.save( flush: true, failOnError: true )
   render template: "offerDData", model: [offerDetail:od]
}

Using the above it's important that your gsp field names match up with your domain's field names