0

I recently asked this question. I was provided with a jsFiddle solution...that works in jsFiddle, but not my code. When I run my code (using Visual Studio 2019 - a .NET Core 3 website), unfortunately, the this.title value returns whatever value is in the title of the page, not the DOM element. I have run this in Edge and Chrome, same results.

In my layout page, I have all of the scripts:

<script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
<script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script> <!--This is the script with the code in question -->

The code that is in SearchApplicants.js is:

$(function () {
    $('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};

I've even tried putting that script code directly into the layout page (rather than referencing the script) and it still has this.title as the value of the <title></title> element, not of the link elements like I want.

Unfortunately, that question was closed and I can't get further answers or comments on that one. The code works in terms of adding the onclick function the way I wanted it, the issue now is getting this.title to be the title of each link element rather than the title of the page.

UPDATE

Here's the full rendered HTML:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>
    <link href="~/Content/Styles/site.css" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
    <script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script>
    <script>
        $(function () {
            $(document).tooltip();
        });
    </script>
</head>
<body class="style1">
    <img id="banner" src="~/Content/Images/Banner.jpg" alt="Need to put something here..." />
    <form id="masterForm">
        <div>
            <table class="style1" summary="This table is for formatting purposes only.">
                <tr>
                    <td colspan="2">
                        <h2>This is for a title...</h2>
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td style="width:15%" valign="top">
                        <table summary="This table is for formatting purposes only.">
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="Index" accesskey="A"><u>A</u>liens</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="Cowboys" accesskey="C"><u>C</u>owboys</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="ET" accesskey="E"><u>E</u>.T.</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Home" asp-action="Logout" accesskey="L"><u>L</u>ogout</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <label id="lblTitle" style="font-weight:bold;">Alien Search Page</label>
                        <br />
                        <br />
                        <a id="addAToSearch" class="searchLetters" title="A" accesskey="A">A</a>
                        <a id="addBToSearch" class="searchLetters" title="B" accesskey="B">B</a>
                        <a id="addCToSearch" class="searchLetters" title="C" accesskey="C">C</a>
                        <a id="addDToSearch" class="searchLetters" title="D" accesskey="D">D</a>
                        <a id="addEToSearch" class="searchLetters" title="E" accesskey="E">E</a>
                        <a id="addFToSearch" class="searchLetters" title="F" accesskey="F">F</a>
                        <a id="addGToSearch" class="searchLetters" title="G" accesskey="G">G</a>
                        <a id="addHToSearch" class="searchLetters" title="H" accesskey="H">H</a>
                        <a id="addIToSearch" class="searchLetters" title="I" accesskey="I">I</a>
                        <a id="addJToSearch" class="searchLetters" title="J" accesskey="J">J</a>
                        <a id="addKToSearch" class="searchLetters" title="K" accesskey="K">K</a>
                        <a id="addLToSearch" class="searchLetters" title="L" accesskey="L">L</a>
                        <a id="addMToSearch" class="searchLetters" title="M" accesskey="M">M</a>
                        <a id="addNToSearch" class="searchLetters" title="N" accesskey="N">N</a>
                        <a id="addOToSearch" class="searchLetters" title="O" accesskey="O">O</a>
                        <a id="addPToSearch" class="searchLetters" title="P" accesskey="P">P</a>
                        <a id="addQToSearch" class="searchLetters" title="Q" accesskey="Q">Q</a>
                        <a id="addRToSearch" class="searchLetters" title="R" accesskey="R">R</a>
                        <a id="addSToSearch" class="searchLetters" title="S" accesskey="S">S</a>
                        <a id="addTToSearch" class="searchLetters" title="T" accesskey="T">T</a>
                        <a id="addUToSearch" class="searchLetters" title="U" accesskey="U">U</a>
                        <a id="addVToSearch" class="searchLetters" title="V" accesskey="V">V</a>
                        <a id="addWToSearch" class="searchLetters" title="W" accesskey="W">W</a>
                        <a id="addXToSearch" class="searchLetters" title="X" accesskey="X">X</a>
                        <a id="addYToSearch" class="searchLetters" title="Y" accesskey="Y">Y</a>
                        <a id="addZToSearch" class="searchLetters" title="Z" accesskey="Z">Z</a>
                        <br />
                        <label id="lblSearchLastName" for="txtSearchLastName" accesskey="N">Last Name:&nbsp;</label>
                        <input id="txtSearchLastName" type="text" tabindex="1" maxlength="23" class="uppercase" readonly />
                        <button id="btnClear" tabindex="27" title="Clear" accesskey="C">Clear</button>
                        <button id="btnList" tabindex="28" title="Show List" accesskey="S">Show List</button>
                        <hr />
                    </td>
                </tr>
            </table>
            <br /><br />
            <div>
                Some text goes here...
            </div>
            <br />
        </div>
    </form>
</body>
</html>

Here's what's in rightClick.js:

//******************************************************************************
// Module  :   rightClick.js
//******************************************************************************

var BM = 2; // button middle
var BR = 3; // button right
var msg = "Mouse right-click is not supported on this page.";

function mouseDown(e) {
    try { if (event.button == BM || event.button == BR) { return false; } }
    catch (e) { if (e.which == BR) { return false; } }
}
document.oncontextmenu = function () { alert(msg); return false; }
document.ondragstart = function () { alert(msg); return false; }
document.onmousedown = mouseDown;
//******************************************************************************

Here's what's in OpenTargetWindow.js:

function openTargetWindow(form, windowName) { var features; var PWfeatures; var sWidth = 778; var sHeight = 580; var PWWidth = 386; var PWHeight = 255; var PWCenterLeft = (screen.width / 2 - PWWidth / 2); var PWCenterTop = (screen.height / 2 - PWHeight / 2); var is_NN = (navigator.appName.indexOf('Netscape') != -1); var is_IE = (((navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('opera') == -1)) && (!is_NN)); if (is_IE) { features = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=20,left=14'; features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ''; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth; } else { features = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=yes,screenX=0,top=20,left=5,autocomplete=no,frameborder=no,directories=no'; PWfeatures = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=no,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ',autocomplete=no,frameborder=no,directories=no'; if (window.screen) { features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth + ''; } else { if (window.all) { features += ',fullscreen=yes'; } else { features += ',height=480,width=640'; } } } var main = open(form, windowName, features); }

Both rightClick.js and OpenTargetWindow.js were copied from the previous application.

Here's what's in SetDefinitions.js:

$(function () {

    function setDefinitionTitle(className, defintion) {
        var childElements = document.getElementsByClassName(className);

        for (i = 0; i < childElements.length; ++i) {
            var ele = childElements[i];
            ele.setAttribute('title', defintion);
        }
    };

    function setDefinition1() {
        setDefinitionTitle('def1', 'The first definition...');
    }

    function setDefinition2() {
        setDefinitionTitle('def2', 'The second definition...');
    }

    function setDefinition3() {
        setDefinitionTitle('def3', 'The third definition...');
    }

    function setDefinition4() {
        setDefinitionTitle('def4', 'The fourth definition...');
    }

    setDefinition1();
    setDefinition2();
    setDefinition3();
    setDefinition4();
});

And finally, here's what's in SearchApplicants.js:

$(function () {
    $('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};
XstreamINsanity
  • 4,176
  • 10
  • 46
  • 59
  • 1
    Please add a [mcve] that shows the actual problem, because this should work (like in the mentioned fiddle) – Andreas Dec 27 '19 at 17:54
  • If getting the property doesn't work, use `getAttribute`. – Heretic Monkey Dec 27 '19 at 17:59
  • I'm not sure how to show that, but I'll try to explain what I'm seeing. When my ViewBag.Title is not set (meaning it's empty), then the value in this.title is empty. When I set my ViewBag.Title to "Test", then the value in this.title is "Test". I've debugged it using the developer tools in Edge and Chrome, looking at the setting of the function on the load of the window and when I click the link. At no time do I get the title of the link element. – XstreamINsanity Dec 27 '19 at 18:00
  • 1
    Words don't mean anything here. As already said (and as you saw in the fiddle) this should work as is. It makes absolutely no sense that `this.title` would be `document.title`, hence there has to be something "fishy". We need at least parts of the actual (rendered) markup and script, a.k.a [mcve] – Andreas Dec 27 '19 at 18:05
  • When I look at the watches (when hitting a breakpoint on that line of code), it is saying that `this` is an HTMLDocument object. I'll update the question with the rendered page HTML. – XstreamINsanity Dec 27 '19 at 18:13
  • This could be easily solved by using a `data-title` attribute instead... – Heretic Monkey Dec 27 '19 at 18:39
  • 1
    Works as expected: https://jsfiddle.net/zxgsjbo7/ – Andreas Dec 27 '19 at 18:47
  • @Andreas That jsFiddle example is actually not working for me... – XstreamINsanity Dec 27 '19 at 18:50

1 Answers1

1

Maybe you could try something like:

$(function () {
    $('.searchLetters').on('click', function (e) { addClickedLetter(e.currentTarget.value); });
});
Marcelo
  • 784
  • 3
  • 9
  • 30