Combine two functions? Javascript and AJAX api call with throbber

Question

I have a function getShare which creates a script and then calls an url shortener api which then returns a shortened url and sets that link to an input box's value.

Secondly I also have this function which I'm trying get to work with the first. So far I've only been able to .show the loader gif but not hide it when the function is successful.

EDIT: Below is updated code with my original script inside the response.success but i'm get a message in the console saying Failed to load resource and a 404 - the missing url is shown to be http://b1t.co/Site/api/External/MakeUrlWithGet?callback=apiCallback&_=1391704846002

function getShare(url)
{ 
    $('#loader').show(); // show loading...
    $.ajax({
        dataType: "jsonp",
        jsonpCallback:'apiCallback', // this will be send to api as ?callback=apiCallback because this api do not want to work with default $ callback function name
        url: 'http://b1t.co/Site/api/External/MakeUrlWithGet',
        data: {'url':url},
        success: function(response){
            $('#loader').hide(); // hide loading...
            //respponse = {success: true, url: "http://sdfsdfs", shortUrl: "http://b1t.co/qz"} 
            if(response.success){

                {       
                var s = document.createElement('script');
                var browserUrl = document.location.href;
                //alert(browserUrl);
                if (browserUrl.indexOf("?") != -1){
                        browserUrl = browserUrl.split("?");
                        browserUrl = browserUrl[0];
                }
                //alert(browserUrl);

                var gifUrl = $('#gif_input').value;
                var vidUrl = $('#gif_input').value;
                //alert(gifUrl + "|" + vidUrl);

                url = encodeURIComponent(browserUrl + "?gifVid=" + gifUrl + "|" + vidUrl);
                //alert(encodeURIComponent("&"));
                s.id = 'dynScript';
                s.type='text/javascript';
                s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
                document.getElementsByTagName('head')[0].appendChild(s);
                }

function resultsCallBack(data)
{
    var obj = jQuery.parseJSON(JSON.stringify(data));
    $("#input-url").val(obj.shortUrl);
    }
    }
},
    error:function(){
    $('#loader').hide();
    }
    });
}

Answer 1

There's no need to "combine" it.

What someone is suggesting is a regular ajax method. Just move your js scripts you want executed on success, inside the success: callback.

Read more about the ajax method at another answer I did here: https://stackoverflow.com/questions/21285630/writing-my-first-rest-api-call-to-a-webservice-endpoint-post/21286810#21286810 or jQuery's docs: http://api.jquery.com/jQuery.ajax/

Note: to use this you will need jQuery and probably an XDR plugin for the ajax to support < IE 10