Success part of a function does not work

Question

I have two input with type text, and I wrote a function onkeyup when the user starts to write somthing I send my data to another page that is called "jsonpage.html". but the success part of my code does not work. I Think it cannot find the address of divs . but at first part it could find it. I don't have any idea that why it doesn't work in success part ? if you omit part "$(this).closest(".main").find" fro success it works .but after i add these lines it does not .

here is my snippet :

$('.country').each(function() { $(this).on('keyup', function(e) { var element = $(this).val().length; if (e.which !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey ) { if (element > 2) { $(this).closest(".main").find(".mini-loading").css("display", "block") var val = $(this).val() val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase(); $(this).val(val) $.ajax({ url: "jsonpage.html", type: "get", contentType: 'application/json; charset=utf-8', data: { key: $(this).val() }, success: function(result) { $(this).closest(".main").find(".mini-loading").css("display", "none") $(this).closest(".main").find(".co").empty().html(result) } }) } } }) });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="main"> <div class="city1"> <input type="text" value="" class="country" placeholder="First City" /> <input value="" type="hidden" /> <div class="mini-loading" style="display: none; "> LOADING </div> <div class="co"></div> </div> </div> <div class="main"> <div class="city2"> <br/> <input type="text" value="" class="country" placeholder="Second City" /> <input value="" type="hidden" /> <div class="mini-loading" style="display: none; "> LOADING </div> <div class="co"></div> </div> </div>

If result is on json format. You might want to format it before .html() — Eddie
– Eddie, Commented Feb 6, 2018 at 14:08
@Eddie if I write $(".mini-loading").css("display", "none") $(".co").empty().html(result) in success my code works well for both of them . but I want to run codes for each parts separately — inaz
– inaz, Commented Feb 6, 2018 at 14:16

Bertrand · Accepted Answer · 2018-02-06 14:25:07Z

The issue is probably due to the scope of this in your success callback function that is not pointing anymore to your input but on the ajax call.

Try to store your value like this :

$(this).on('keyup', function(e) { // Store the initial value of this --------------------------------- var _this = this; var element = $(this).val().length; if (e.which !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey ) { if (element > 2) { $(this).closest(".main").find(".mini-loading").css("display", "block") var val = $(this).val() val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase(); $(this).val(val) $.ajax({ url: "jsonpage.html", type: "get", contentType: 'application/json; charset=utf-8', data: { key: $(this).val() }, success: function(result) { // And use it here at least ---------------------- $(_this).closest(".main").find(".mini-loading").css("display", "none") $(_this).closest(".main").find(".co").empty().html(result) } }) } } })

You can also use $(e.target) (event target element) instead of this to fetch back your input element

And finally, you may also use jquery context option. See How to pass context in jquery ajax success callback function

Collectives™ on Stack Overflow

Success part of a function does not work

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related