Reusing AJAX function multiple times

Question

Currently my AJAX call is set up as such so that when a comma keyup is detected, the AJAX call fires:

$("#selector").on("keyup", function(e) { if (e.which === 188) { var search = $(this).val(); function searchTag() { return $.ajax({ cache: false, url: url, dataType: "json", type: "post", data: {search: search} }); } searchTag().done(function(data) { //Success }); } });

I want to reuse the AJAX call as part of another event listener later in my code:

$("body").on("click", ".tag", function () { searchTag(); });

Without rewriting the entire call, how do I make the function independent so that it can be used in both scenarios?

Then why don't you move function searchTag outside the keyup event (and make the search var a global and apply the value on keyup only) ? — drip
– drip, Commented Feb 16, 2014 at 16:13
Or you could declare that variable in $(document).ready() scope where I believe you have placed your events. — Dimt
– Dimt, Commented Feb 16, 2014 at 16:19

Wilmer · Accepted Answer · 2014-02-16 16:16:07Z

Move the function outside:

function searchTag(data) { var url = "yoururl"; return $.ajax({ cache: false, url: url, dataType: "json", type: "post", data: data }); } $("#selector").on("keyup", function(e) { if (e.which === 188) { var search = {search: $(this).val()}; searchTag(search).done(function(data) { //Success }); } }); $("body").on("click", ".tag", function () { searchTag({}); });

ManoCarayannis · Accepted Answer · 2014-02-16 16:16:08Z

remove the function from the event, and add as input the search value and url as input:

function searchTag(searchVal, url) { return $.ajax({ cache: false, url: url, dataType: "json", type: "post", data: {search: searchVal} }); } $("body").on("click", ".tag", function () { var searchVal = $(this).val(); var url = document.URL; //use any url here searchTag(searchVal, url); });

you could even use a callback:

function searchTag(searchVal, url, callbck) { return $.ajax({ cache: false, url: url, dataType: "json", type: "post", data: {search: searchVal} }).done(function(){ callbck(); }); } $("body").on("click", ".tag", function () { var searchVal = $(this).val(); var url = document.URL; //use any url here searchTag(searchVal, url, function(){ //do something here.. }); });

balanza · Accepted Answer · 2014-02-16 16:18:57Z

What about this:

///tag -> tag to search ///cb -> callback to executed on success var searchTag = function(tag, cb) { var url = "http://example.com"; var request = $.ajax({ cache: false, url: url, dataType: "json", type: "post", data: {search: tag} }); request.done(cb); } $("#selector").on("keyup", function(e) { if (e.which === 188) { var search = $(this).val(); searchTag(search, function(data) { //Success }); } }); $("body").on("click", ".tag", function () { //I don't actually know where the tag to search is stored var search = $(this).html(); searchTag(search); });

Collectives™ on Stack Overflow

Reusing AJAX function multiple times

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related