Question

basically i’m attempting to target elements only within the parent db_update div class of the input field that triggers on blur, however it’s targeting any class with a matching name, which is not what I want. Ignore the AJAX part as it’s irrelevant for now.

I think the problem lies with it targeting the input element on blur, and it’s not able to chain to the parent element successfully.

Basically whichever URL input box i click on is which fields it should fill out, not both.

http://jsfiddle.net/SXWXu/6/

HTML

<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

<br/>
<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

Jquery

$(document).ready(function() {


$('input[class=slide_URL]').on({

   blur: function(){
    var status_message = $('.status_message');
    var query_string = encodeURIComponent($(this).val()); 
    var dataString = 'query_string='+ query_string;

     $.ajax({
      type : 'GET',
      url: '',
      dataType : 'json',

      data:  dataString ,
      error : function(XMLHttpRequest, textStatus, errorThrown) {


          $(this).parent().find('.slide_num').val(140);
            $('.doc_num').val(140);
        $('.filter_num').val(140);

      status_message.removeClass().addClass('failure').text('Request was not sent.').show(200);},

      success : function(data) {


       if (data.error === true)
       {


     status_message.show().removeClass('success').addClass('failure').text(data.msg).stop().fadeOut(3000);


     }
    else {
     status_message.show().removeClass('failure').addClass('success').text(data.msg).stop().fadeOut(3000);




         }
     } 
       });    
 return false; 

   }
 });
 });

Answer 1

Use .closest() to get the .db_update ancestor of the blurred element and then .find() to find the required status_message.

var status_message = $(this).closest('.db_update').find('.status_message');