Hold off on triggering the href action until the ajax call has been completed

Question

Hold off on triggering the href action until the ajax call has been completed

Is it possible to delay the execution of a click on an anchor href in a Backbone view until an ajax call has been completed?

I am looking for the following functionality:

User clicks an href;
Click triggers an ajax call;
If the ajax call is successful, then the href should be executed;

I attempted a test by adding a method to a Backbone view linked to an anchor:

    clickNext: function(e){ 

        setTimeout(function(){
            console.log("test"); 
        }, 5000);

Unfortunately, the href is being executed before the timeout finishes.

The necessity for this functionality arises from my desire to create a wizard where each page has a separate URL. I need to perform checks using local storage on each pageload and save data persistently using Ajax on every "Next" click.

javascript ajax backbone.js href

Answer 1

Answer №1

In order to prevent the original click event from triggering a location change, utilize e.preventDefault(). Afterwards, you can manually adjust the window hash location within the done or success callback function after a successful ajax call.

myApp.Views.ExampleView = Backbone.View.extend({
    el: "#myView",
    events: {
        "click a": "handleLink"
    },
    handleLink: function (e) {
        e.preventDefault();
        var link = $(e.currentTarget).attr('href');
        $.ajax("/echo/json/")
            .done(function () {
            location.hash = link
        })
    }
});

var myView = new myApp.Views.ExampleView();

fiddle - http://jsfiddle.net/leighking2/hjcg77h2/

Answer 2

In order to prevent the original click event from triggering a location change, utilize e.preventDefault(). Afterwards, you can manually adjust the window hash location within the done or success callback function after a successful ajax call.

myApp.Views.ExampleView = Backbone.View.extend({
    el: "#myView",
    events: {
        "click a": "handleLink"
    },
    handleLink: function (e) {
        e.preventDefault();
        var link = $(e.currentTarget).attr('href');
        $.ajax("/echo/json/")
            .done(function () {
            location.hash = link
        })
    }
});

var myView = new myApp.Views.ExampleView();

fiddle - http://jsfiddle.net/leighking2/hjcg77h2/

Hold off on triggering the href action until the ajax call has been completed

Answer №1

Similar questions

How can I hide a div using Ajax and show success in the following div?

I am experiencing an issue with my route where the Passport JWT req.user is unexpectedly undefined

Comparison of Arrays Containing Objects

Dependable timekeeping tool for an online discussion platform

Correlating Mailgun Webhook event with Mailing list email

Encountering issue - SCRIPT5022: Error parsing message from server in Sys.WebForms.PageRequestManagerParserErrorException

The speed at which a DIV moves when dragged with JavaScript mouse events is too fast

The uploading of a file in NodeJS is not possible as the connection was closed prematurely

Having difficulty accessing the attributes of an object within a property

Utilizing Knockout to Render JSON List Items

The issue with CORS is preventing the AJAX POST request from reaching the Express.js server, even with body-parser configured

smoothly slides into view and playfully bounces

JavaScript encountered an issue when trying to display HTML content

Using Chrome with Selenium WebDriver in JavaScript (webdriver.js)

An alternative option for the location parameter in the post

Ways to adjust the brightness of any color when hovered over

Saving the data retrieved from an ajax request

Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

Generate selection choices by looping through a JSON document

Finding ways to access intricate JSON objects in Angular 2