Rerender divs and bootstrap

Question

I'm trying to Rerender three of four columns, but because I can't use styleclass in divs and not reRender by styleClass but only Id, I don't know how can I achieve that.

I tried to put apex:pageBlock to wrap those divs with unique Id, but it ruins the bootstrap styled columns.

Anyone know how can I wrap those columns without ruins the bootstrap styling with some apex tag? or another idea...

Example :

<div class="row" dir="rtl" >
        <div class="col-md-4 form-group">
            <label class="control-label right-side" for="Product Items">Product Items:</label>
            <apex:selectList styleClass="form-control" size="1" value="{!productItemSelected}" id="selectedProductItemListId">
                <apex:selectOptions value="{!prdt222}" id="selectOptionsProductItemId"/>
                <apex:actionSupport action="{!checkProductPrice}" event="onchange" **reRender="????"** />
            </apex:selectList>
        </div>
            <div class="col-md-2 form-group">
                <label class="control-label text-center" for="Product Items">Price:</label>
                <apex:input value="{!productItemPrice}" size="2" styleClass="form-control" ></apex:input>
            </div>

            <div class="col-md-4 form-group">
                <label class="control-label" for="Product Items">Comments:</label>
                <apex:inputTextarea value="{!productItemComments}" styleClass="form-control">  </apex:inputTextarea>

            </div>


            <div class="col-md-1 form-group"> 
                <label class="control-label" for="Product Items">Quantity:</label>
                <apex:input size="2" value="{!productItemQuantity}" styleClass="form-control" ></apex:input>

            </div>
</div>

I want to rerender the 3 last col divs, How can I do it from the actionSupport rerender, without giving to each input a different id?

Thanks!

Answer 1

You can use apex:outputPanel to create div and then reRender it.

<apex:outputPanel layout="block" id="div1> </apex:outputPanel>

layout="block" will give you a div which you can use. You can add custom CSS class in styleclass attribute.