jquery select div внутри формы после отправки ajax

Question

У меня есть страница со многими формами, по 1 в каждой строке таблицы. Я хочу отправить форму, получить ответ ajax, а затем показать зеленую галочку или красный x, чтобы указать успех или неудачу (без перезагрузки страницы).

Как выбрать .file-success или .file-error span только в той форме, которая была отправлена?

<form method="POST" action="#" class="fileform"> 
    <tr> 
     <td class="vert-align"><input type="text" name="name" id="name" /></td> 
     <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button> 
     <div class="feedback-icons"> 
      <span class="file-success"><i class="fa fa-check-circle"></i></span> 
      <span class="file-error"><i class="fa fa-times-circle"></i></span> 
     </div> 
     </td> 
    </tr> 
</form> 
... many more forms like this in table rows 

$(this).find(".file-success"); не находит его с или без установки контекста e.target.

$(".fileform").submit(function(e) 
{ 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 

    $.ajax(
    { 
     url : formURL, 
     type: "POST", 
     data : postData, 
     context: e.target, 
     success:function(data, textStatus, jqXHR) 
     { 
      $(this).find('.file-success').fadeIn(500); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     {  
      $('.file-error').fadeIn(500); 
     } 
    }); 
    e.preventDefault(); 
}); 

спасибо!

Answer 1

Вы должны определить $(this) как переменную, которая однажды будет доступна из-за правил закрытия!

(".fileform").submit(function(e){ 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    // Define $(this) as a variable that is accessible to any function defined after this. 
    var self = $(this); 
    $.ajax({ 
     url : formURL, 
     type: "POST", 
     data : postData, 
     context: e.target, 
     // You can ommit the status and jqXHR as you don't use them 
     success:function(data){ 
      // Now use `self` and it works 
      self.find('.file-success').fadeIn(500); 
     }, 
     // And here you can ommit them to - if you want the text status, just use error.statusText 
     error: function(error){  
      $('.file-error').fadeIn(500); 
     } 
    }); 
    e.preventDefault(); 
}); 

Как @JamesMontagne упоминает, хотя, вы используете контекст, и если я правильно прочитал на документации JQuery, он изменяет свой this объект. И поскольку вы нацеливаете событие на кнопку, ваше решение $(this) не будет работать!

Поскольку это нуждается в AJAX запрос, я не могу на самом деле подделка это полный запрос, но посмотрите на документы JQuery, чтобы увидеть хороший пример:

$.ajax({ 
    url: "test.html", 
    context: document.body 
}).done(function() { 
    $(this).addClass("done"); // adds done class to the BODY, not the form 
}); 

Heres документацию: http://api.jquery.com/jquery.ajax/

Answer 2

в ваша функция $(this) будет соответствовать элементу функции выше. Не могу придумать лучшего способа объяснить это так, вот пример

$('element').function(){ 
    $(this);//this is element 
    $.ajax({ 
    exampleFunction:function(){ 
     $(this);//would probably be ajax 
    }, 
    }); 
}); 

так, чтобы найти свой элемент, попробовать эти селекторы/методы

$('.file-success','.fileform') 
$('.file-success') 

$('.fileform').submit(function(){ 
    var self=this; 
    $ajax({ 
     success:function(result){ 
      if(result=="true")$('.file-success',self).show(); 
     } 
    }); 
}); 

Дальнейшая помощь

Это своего рода для добавления переменных в функции, пригодится при вызове нескольких функций, имеющих уникальные переменные.

function build(var r){ 
    this.r=r;//this corresponds to build function or an element you set to build 
}