jquery - Getting the response from AJAX request and inserting it into outgoing link

Question

All outgoing traffic from my site gets entered into a database. I want to then put the ID of the inserted row into the outgoing link href. The URLs have a variable in them called $id like example.com?id=$id. I want to replace that $id with the inserted row's id like example.com?id=114.

I'm inserting into the db fine but I have a hard time from there. I've found many similar questions to mine but they don't seem to fit exactly. How can I get the value from the "process" function so I can append it to the link?

So far this is what I have. Any advice is welcome!

jQuery('a[href^="http"]').not('[href*="' + window.location.host + '"]').on('click', function(e) {
    jQuery.ajax({
      data: {
        action: 'the_ajax_hook',
        source: jQuery.cookie('source'),
        destination: jQuery(this).attr("href"),
        },
      type: 'post',
      url: ajax_object.ajaxurl,
      success: function(data) {
        process(data);
      }
    });

    function process(data) {
      //?????
    }
    jQuery(this).attr('href',jQuery(this).attr('href').replace('$id',id));

    //for testing
    console.log(jQuery(this).attr('href'));
    e.preventDefault();
  });
});

question from:https://stackoverflow.com/questions/65894907/getting-the-response-from-ajax-request-and-inserting-it-into-outgoing-link

Answer 1

Updating the href doesn't work, because the callback function operates asynchronously.

Instead, assign to window.location to redirect to the new URL instead of performing the default action of the link.

jQuery('a[href^="http"]').not('[href*="' + window.location.host + '"]').on('click', function(e) {
  e.preventDefault(); // don't follow the link automatically
  let url = jQuery(this).attr("href");
  jQuery.ajax({
    data: {
      action: 'the_ajax_hook',
      source: jQuery.cookie('source'),
      destination: url,
    },
    type: 'post',
    url: ajax_object.ajaxurl,
    success: function(data) {
      process(url, data);
    }
  });
});

function process(url, data) {
  let target = url.replace('$id', data);
  window.location = target;
}