Adding mouse middle click functionality to clickable td row

JavaScript
1

I have a table and the rows are clickable, but they don’t have the mouse middle click option.

This is one of those td’s, can I add this middle click functionality via js?

<td data-datatype="date" data-id="109" class="portalTable hyperlink-li portal-todo-row viewed">
A quote for which you are the assigned sales person has been in progress for an extended period of time - quotes should not be left in progress this long. (uukuk-Monday, 18 March, 2019)                        </td>

$(document).on('click', '.portal-todo-row', function () {
        var portalToDoId = $(this).data("id");
        GetToDoItemLink(portalToDoId);
    });

function GetToDoItemLink(portalToDoId) {
    ToggleFullPageLoading(true);
    $.ajax({
        url: $("#hdnGetToDoItemLinkUrl").val(),
        type: "POST",
        data: { id: portalToDoId },
        dataType: "json",
        success: function (data) {
            if (data.success) {
                window.location = data.redirectUrl;
            } else {
                ToggleFullPageLoading(false);
                DisplayValidationErrors(data);
            }
        }
    });
}
2

You’re close.

Your code will fire on all clicks. Is that the desired interaction?

3

Hi m_hutley, ye it fires at the moment on left click. But the manager wants the middle click option, and have tried a few things before posting it, but cant figure it out.

4

Do you have this code in a page that can be viewed?

5

Na, its behind a vpn. Its a system we are building, so there not even a live version yet

6

I dont have right click actually, so ammended that bit.

7

That’s more like what i expected you to report.

click will only fire for left click events.
Alternative events that can capture middle-clicking:
mousedown
auxclick (Browser Support Concerns)

8

Hi, ye I tried the mousedown, but that doesnt allow for the new tab to be opened.

I suppose I could see if the middle button has been clicked and try and get it to open up in a new tab.

9

Well i’m not sure what you’re trying to accomplish, as you’ve not told me what your code is meant to do.

My understanding is that opening a tab with the middle mouse click on a link is a Browser function, not a javascript one, so you wouldnt be able to override the browser’s settings.

Edit: The middle-click functionality described is on a link, rather than a TD.

10

ye sorry m_hutley, they are table rows, and when they are clicked they take the user to a page that has a specific ID, but ideally they need to keep the table open as well, so ideally I need the middle click option to allow a new tab to be created.

11

Ok this seems to work, using a case to detect the button click type,

1 does appear when I left click, and 2 does appear when I click the middle button.

So what I need to do I think is pass through a value to the next function call, and then if case equals 2 then it opens in a new tab.

$(document).on('mousedown', '.portal-todo-row', function (e) {

        switch (e.which) {
            case 1:
                alert("1");
                var portalToDoId = $(this).data("id");
                GetToDoItemLink(portalToDoId);
                break;
            case 2:
                alert("2");
                var portalToDoId = $(this).data("id");
                GetToDoItemLink(portalToDoId);
                break;
            case 3:
                alert("3");
                break;
        }
        return true;
    });

function GetToDoItemLink(portalToDoId) {
    ToggleFullPageLoading(true);
    $.ajax({
        url: $("#hdnGetToDoItemLinkUrl").val(),
        type: "POST",
        data: { id: portalToDoId },
        dataType: "json",
        success: function (data) {
            if (data.success) {
                window.location = data.redirectUrl;
            } else {
                ToggleFullPageLoading(false);
                DisplayValidationErrors(data);
            }
        }
    });
}
13

I think I have worked it out, works really well.

$(document).on('mousedown', '.portal-todo-row', function (e) {
        var blank = false;
        switch (e.which) {
            case 1:               
                break;
            case 2:
                 blank = true;
                 break;
            case 3:
                 break;
        }
        var portalToDoId = $(this).data("id");
        GetToDoItemLink(portalToDoId, blank);
        return true;
    });

function GetToDoItemLink(portalToDoId, urlTarget) {
    ToggleFullPageLoading(true);
    $.ajax({
        url: $("#hdnGetToDoItemLinkUrl").val(),
        type: "POST",
        data: { id: portalToDoId, targetBlank: urlTarget },
        dataType: "json",
        success: function (data) {
            if (data.success) {
                if (data.urlTargetValue === true) {
                    window.open(data.redirectUrl, '_blank');
                } else {
                    window.location = data.redirectUrl;
                }
                ToggleFullPageLoading(false);
            } else {
                ToggleFullPageLoading(false);
                DisplayValidationErrors(data);
            }
        }
    });
}
1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.