CODEWITHSUNDEEP
javascriptjqueryhrefpreventdefault
tx291
tx291

Reputation: 1331

Open href in link only after certain events have executed

I have a link to the Tumblr share widget, and need to append some query string params to it before it opens (triggered by clicking on the link). However, the link opens before these params are appended, I think because it takes a few seconds-- I'm sending an image on the page to be hosted on imgur and returning that URL.

Is there any way to delay the new link from being opened until AFTER my new image url is returned??? I've tried using e.preventDefault(); and return false; but haven't had any luck.

My HTML is:

<button id='tumblrshare'>tumblr</button


$('body').on('click','#tumblrshare',function(e){
var svg = $("#svg")[0];
svg.toDataURL("image/png", {
    callback: function(img) {
    var img = img.replace("data:image/png;base64,", "");
    var imgurTitle = $("meta[property='og:title']").attr("content");
    $.ajax({ 
          url: 'https://api.imgur.com/3/image',
          headers: {'Authorization': 'Client-ID **********'},
          type: 'POST',
          data: {'image': img, 'type': 'base64', 'title': imgurTitle},
          success: function(result) { 
          imageURL = result.data.link;
          window.location = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
          },
          error: function(){
            console.log('error');
          }
    }); //ajax
  }//callback

});//svg

}); //tumblrshare

Please help!!

Upvotes: 0

Views: 239

Answers (3)

Sage
Sage

Reputation: 261

function loadTumblr(){
    var svg = $("#svg")[0];
    svg.toDataURL("image/png", {
        callback: function(img) {
            var img = img.replace("data:image/png;base64,", "");
            var imgurTitle = $("meta[property='og:title']").attr("content");
            $.ajax({ 
                url: 'https://api.imgur.com/3/image',
                headers: {'Authorization': 'Client-ID **********'},
                type: 'POST',
                data: {'image': img, 'type': 'base64', 'title': imgurTitle},
                success: function(result) { 
                    imageURL = result.data.link;
                    window.location.href = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
                },
                error: function(){
                    console.log('error');
                }
            }); //ajax
        }//callback
    });//svg
}

Upvotes: 1

Jehad Ahmad Jaghoub
Jehad Ahmad Jaghoub

Reputation: 1383

   $("a.alate").on("click",function(event){
 _thislink = $(this).attr("href");
event.preventDefault();
 console.log(_thislink);
$.ajax({
    type: 'get',
    url : 'https://restcountries.eu/rest/v1/all',
   fail:function(data) {
   console.log("fail");
  }
 }).done(function(data) {
  //  when request finish 
   console.log(data);
   //   window.location = _thislink;
 });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="alate" href="http://stackoverflow.com">Update Data then go</a>

the most important on you code to use 

e.preventDefault();

to stop default behavior of href

Upvotes: 0

Jordan Burnett
Jordan Burnett

Reputation: 1844

Altering the 'href' attribute of a link won't change it's destination once it's already been clicked. Consider using window.location to redirect the user when your ajax call is complete.

$('body').on('click','#tumblrshare',function(e){
   e.preventDefault(); // Stop the default behaviour
   ...
   $.ajax({
    success: function(result){
      window.location = result.data.link;
    },
    ...
  });
...
});

Upvotes: 1

Related Questions