jquery select div inside form after ajax submission

Question

i have a page with many forms, 1 in each table row. i want to submit the form, get the ajax response and then show a green checkmark or red x to indicate success or failure (without reloading the page).

how do i select the .file-success or .file-error span only in the form that was submitted?

<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"); doesn't find it with or without setting the context to 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();
});

thank you!

@mplungjan I'm re-opening. Though subtle in the question, the use of `context` makes this question a bit different. — James Montagne, Mar 24 '15 at 14:02

bashleigh · Answer 1 · 2015-03-24T14:07:44.030

0

within your function $(this) will correspond to the function above's element. Can't think of a better way to explain it so here's an example

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

so to find your element, try these selectors/methods

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

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

Further help

This is sort of for adding variables to functions, comes in handy when calling multiple functions that have unique variables.

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

edited Mar 24 '15 at 14:07

answered Mar 24 '15 at 14:04

bashleigh

8,813
5
29
49

The use of `context: e.target` should change this so that `this` is `e.target`. – James Montagne Mar 24 '15 at 14:06
@JamesMontagne shouldn't `context` be `$(self)` in my example then? – bashleigh Mar 24 '15 at 14:10
Setting the context property on the ajax options object defines what `this` refers to in the ajax callbacks. Your approach of using `self` will work just fine, however the original question's approach of setting `context; e.target` should work equally well. – James Montagne Mar 24 '15 at 14:14
never used `context`. Could you pass the var `self` to it? rather than e.target? I think jQuery processes events differently. So maybe use `event.target.nodeName`? http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event – bashleigh Mar 24 '15 at 14:22
See the comments on the other answer. The issue is not reproducible and the code works as is. – James Montagne Mar 24 '15 at 14:24

somethinghere · Accepted Answer · 2015-03-24T14:11:25.233

-1

You should define the $(this) as a variable, that once will be accessible because of the rules of closures!

(".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();
});

As @JamesMontagne mentions though, you are using context, and if I read correctly on the jQuery documentation, it changes your this object. And since you target of the event will be the button, your $(this) solution wouldn't work!

Since this needs an ajax request, I can't really fake this complete request, but look at the jQuery docs to see a good example:

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

Heres the docs: http://api.jquery.com/jquery.ajax/

edited Mar 24 '15 at 14:11

answered Mar 24 '15 at 13:58

somethinghere

16,311
2
28
42

@JamesMontagne Was working on this but the fact that stack overflow uses `tab` to switch between inputs meant it was posted prematurely -_- – somethinghere Mar 24 '15 at 14:00
Not a problem. While this approach will work, any suggestion as to why the solution in the question of using `context: e.target,` does not work? – James Montagne Mar 24 '15 at 14:05
i've tried this and it's not working for me. if i do just $('.file-success')... all icons fade in which tells me it the spans can be selected, but i can't single out the one i want. thanks for the code improvement suggestions. – split19 Mar 24 '15 at 14:06
@split19 Can you reproduce your issue in http://www.jsfiddle.net? This solution as well as the one you posted in your question of using `context` should work with just the information provided. – James Montagne Mar 24 '15 at 14:08
1

@split19 See this working example showing your code working properly: http://jsfiddle.net/L0yth961/ – James Montagne Mar 24 '15 at 14:12
must be something else in my code. i'll have to look more closely. thanks everyone! – split19 Mar 24 '15 at 14:16
updated the jsfiddle: http://jsfiddle.net/split19/o0rs1L9z/7/ the exact same form code works outside a and does not work inside a
. what's up with that? how can i fix it?
– split19 Mar 24 '15 at 14:38

jquery select div inside form after ajax submission

2 Answers2