JQuery targeting a class in nested markup

Question

Hi guys this is my markup for my form

I am trying to target the textarea elements using their classes..this part of the form is dynamically created.

<div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                               {{ Form::label('product_name', 'Product Name') }}<span id="error-product_name"></span>
                               <div class="input-group">
                                   {{ Form::select('product_name[]',$products, null, ['class' => 'form-control required products-list product_name', 'placeholder'=>'--Select Product--',
                                    'data-msg-required'=>"Please select a product",'id'=>'product_name']) }}
                                    <i class="input-group-btn">
                                        {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#productModal']) }}
                                    </i>
                               </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                               {{ Form::label('product_category', 'Category') }}<span id="error-product_category"></span>
                               {{ Form::select('product_category[]',[], null, ['class' => 'form-control required categories product_category', 'placeholder'=>'--Select Category--',
                                'data-msg-required'=>"Please select a category",'id'=>'categories']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                               {{ Form::label('qty', 'Quantity') }}<span id="error-qty"></span>
                               <div class="input-group">
                                    {{ Form::text('qty[]', null, ['class' => 'form-control required qty','data-msg-required'=>"Please enter a quantity"]) }}
                                    <i class="input-group-btn">
                                        {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#aqlModal']) }}
                                    </i>
                               </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                               {{ Form::label('unit', 'Unit') }}<span id="error-unit"></span>
                                {{ Form::select('unit[]',[], null, ['class' => 'form-control required unit', 'placeholder'=>'--Select Unit--',
                                    'data-msg-required'=>"Please select a unit"]) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ Form::label('po_no', 'PO Number') }}<span id="error-po_no"></span>
                                {{ Form::text('po_no[]', null, ['class' => 'form-control required po_no','data-msg-required'=>"Please enter the PO Number"]) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('cmf', 'Color/Material/Finish') }}<span id="error-cmf"></span>
                                {{ Form::textarea('cmf[]', null, ['class' => 'form-control cmf','rows'=>'2']) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('shipping_mark', 'Shipping Mark') }}<span id="error-shipping_mark"></span>
                                {{ Form::textarea('shipping_mark[]', null, ['class' => 'form-control shipping_mark','rows'=>'2']) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                             <div class="form-group">
                                {{ Form::label('brand', 'Brand') }}<span id="error-brand"></span>
                                {{ Form::text('brand[]', null, ['class' => 'form-control required brand','data-msg-required'=>"Please enter the product brand"]) }}
                            </div>

                            <div class="form-group">
                                {{ Form::label('tech_specs', 'Technical Specifications/Rating') }}<span id="error-tech_specs"></span>
                                {{ Form::textarea('tech_specs[]', null, ['class' => 'form-control tech_specs','rows'=>'2']) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('additional_info', 'Additional Information') }}<span id="error-additional_info"></span>
                                {{ Form::textarea('additional_info[]', null, ['class' => 'form-control additional_info','rows'=>'2']) }}
                            </div>
                        </div>
                    </div>
              </div>

I am trying to populate all these fields from the json response from my ajax call.. whenever I try to target directly the element using the class.. all appended elements with the same class is populated with same value. I only want the closest elements be populated from my ajax call.

here's my javascript code

$('body').on('change','.product_name', function(){
    var product_id = $(this).find('option:selected').val();
    $.ajax({
        url : selectproduct,
        type: 'POST',
        data:{
          _token : token,
          product_id : product_id
        },
        beforeSend: function(){
          console.log('loading');
        },
        success: function(response){
          console.log(response);
            $(this).next('.row').find('.shipping_mark').val(response.product.shipping_mark);
        }
    });
  });

@pawankumar I also tried did but no luck.. I'm still figuring out the solution for this.. I'm running out of ideas.. — Kim Carlo, Nov 28 '16 at 10:36

score 0 · Answer 1 · edited May 23 '17 at 11:53

this inside ajax success refers to a different object. you need to save the original reference in a variable.

$('body').on('change','.product_name', function(){
    var product_id = $(this).find('option:selected').val();
    var self = this; // save reference in a variable
    $.ajax({
        url : selectproduct,
        type: 'POST',
        data:{
          _token : token,
          product_id : product_id
        },
        beforeSend: function(){
          console.log('loading');
        },
        success: function(response){
          console.log(response);//Use the saved reference in next line
            $(self).next('.row').find('.shipping_mark').val(response.product.shipping_mark);
        }
    });
  });

Refer here for more options on this issue.

JQuery targeting a class in nested markup

1 Answers1