On document.ready event I've got a function which collects the html controls which has an attributes 'wordNum' and I make an AJAX request which returns me some description for each of these controls and then I set these controls and their innerhtml attribute with the returned description.

The problem is if the user clicks back button and this function of course is not executed but I need that.

Code:

$(document).ready(function () {
    Translate();
});
function Translate() {
    var list = new Array();
    $("*[wordNum]").each(function () {
        var endRes = {
            ControllerName: this.id,
            WordNumber: this.getAttribute("wordNum")
        };
        list.push(endRes);
    });
    jQuery.ajax({
        url: ' @Url.Action("Translate")',
        contentType: "application/json",
        dataType: "json",
        data: {
            List: JSON.stringify(list)
        },
        traditional: true,
    }).done(function (data) {
        $.each(data, function (key, val) {
            $("*[wordNum]").each(function () {
                if (this.id == val.ControllerName) {
                    this.innerHTML = val.Description;
                }
            });
        });
    });
}

So how can I make on back button click to again execute this function Translate.

On document.ready event I've got a function which collects the html controls which has an attributes 'wordNum' and I make an AJAX request which returns me some description for each of these controls and then I set these controls and their innerhtml attribute with the returned description.

The problem is if the user clicks back button and this function of course is not executed but I need that.

Code:

$(document).ready(function () {
    Translate();
});
function Translate() {
    var list = new Array();
    $("*[wordNum]").each(function () {
        var endRes = {
            ControllerName: this.id,
            WordNumber: this.getAttribute("wordNum")
        };
        list.push(endRes);
    });
    jQuery.ajax({
        url: ' @Url.Action("Translate")',
        contentType: "application/json",
        dataType: "json",
        data: {
            List: JSON.stringify(list)
        },
        traditional: true,
    }).done(function (data) {
        $.each(data, function (key, val) {
            $("*[wordNum]").each(function () {
                if (this.id == val.ControllerName) {
                    this.innerHTML = val.Description;
                }
            });
        });
    });
}

So how can I make on back button click to again execute this function Translate.

• javascript
• jquery

Share Improve this question Follow edited Jun 13, 2014 at 8:21 Banana 7,48433 gold badges2424 silver badges4444 bronze badges asked Jun 13, 2014 at 7:45 Tania MarinovaTania Marinova 1,90888 gold badges4242 silver badges6767 bronze badges 6

• 2 Your best solution would be to find a way for your application to work without hooking into the back button event. This isn't an event you can rely on for instance if the user closes the browser or goes to a new url directly. Also it is a pretty bad UX when you cant leave the site until an api call has finished. I would suggest finding another way! – Undefined Commented Jun 13, 2014 at 7:49
• I know but unfortunately there is no way! – Tania Marinova Commented Jun 13, 2014 at 7:59
• 5 The back button implies that the user does not want to continue processing something. You should not make it execute any code. This is way up there with popup that don't go away and email spam on irritation levels. You should change your code so that it does not require this. If you provide more details, maybe we can tell you how to do that? – neelsg Commented Jun 13, 2014 at 8:06
• 1 if you need a code executed on back button, you should created your own 'back' button and make it clearly visible and intuitive so the user will use it instead of the browser's back button. – Banana Commented Jun 13, 2014 at 8:23
• 2 also try using jQuery's .unload() to detect when user navigates away from your page and then execute your function. api.jquery./unload – Banana Commented Jun 13, 2014 at 8:28

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

You can use popstate event to fire the event:

$(window).on("popstate", function (event, state) {
    // Here es the code to execute when the back button is pressed
} );