c# ASPNET rightclick event

[Permudious]

Goodmorning Guys,

I am developing a webpage which works fine.
Now I would like to create a right click event, I did already some research. but can't find the solution which will fit for me.

When I rightclick on a button I would like to see the name of the button, but when I do this on the second button I still see the name of the first button.

You must be registered for see images attach

My code:

<div class="nac">
     @foreach(var Person in Model.Persons.Where(x => x.FrstName == "Katherine" || x.FrstName == "Jane" ))
    {
        string Cardholder = "";
        if (Person.MiddleName == "") { Cardholder = Person.LastName + ", " + Person.FrstName; } else if (Person.MiddleName != null) { Cardholder = Person.LastName + " " + Person.MiddleName + ", " + Person.FrstName; } else { Cardholder = Person.LastName + ", " + Person.FrstName; }

        <button id="item" class="na">@Cardholder<p class="rmlv">OUT</p></button>

        <div id="myDiv" style="display: none;">
            <a href="#" class="close" onclick="closeMessage('message-balloon1')">&times;</a>
            <p class="title">Change State</p>
            <p class="subtitle">@Cardholder</p>
        </div>
    }
</div>

<script>
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
        var div = document.getElementById('myDiv');
        div.style.left = e.pageX + 'px';
        div.style.top = e.pageY + 'px';
        div.style.display = 'block';
    });

    document.addEventListener('click', function () {
        var div = document.getElementById('myDiv');
        div.style.display = 'none';
    });

    var closebtns = document.getElementsByClassName("close");
    var i;

    for (i = 0; i < closebtns.length; i++) {
        closebtns[i].addEventListener("click", function () {
            this.parentElement.style.display = 'none';
        });
    }
</script>

 

[Damien]

You're issue is you have no way to distinguish which content you're getting. Since you have 2 elements with the id "myDiv", it always returns the first one.

What you need to do is create a unique id (a counter works) and parse that into your element, something like "myDiv-{count}". Then give your button an id of the count so you can retrieve it in the event listener using "event.target.id", finally you can get the element using that id "document.getElementById('myDiv-' + id)".

 

[Permudious]

Hi Damien,

I understand. But since it's in a foreach where in my script can I say to use that id?
Let's say I can add id="myDiv-" + Person.Id

 

[Permudious]

Never used that before, I only worked with foreach

 

[Damien]

Using the person I'd is probably better, ignore my last comment. So the button needs an id=person.id and the element needs an id="myDiv-" + person.id

Then document.getElementById('myDiv-' + e.target.id); should work in getting the correct element.

 

[Permudious]

I added the code

HTML
<button id="[email protected]" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

JS
document.addEventListener('contextmenu', function (e) {
e.preventDefault();

var div = document.getElementById('myDiv');
var divid = event.target.getElementById
div.style.left = e.pageX + 'px';
div.style.top = e.pageY + 'px';
div.style.display = 'none';

var test = document.getElementById('myDiv-' + e.target.id);

alert(test);

but I will recieve value null everywhere I click.

 

[Damien]

I added the code

HTML
<button id="[email protected]" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

JS
document.addEventListener('contextmenu', function (e) {
e.preventDefault();

var div = document.getElementById('myDiv');
var divid = event.target.getElementById
div.style.left = e.pageX + 'px';
div.style.top = e.pageY + 'px';
div.style.display = 'none';

var test = document.getElementById('myDiv-' + e.target.id);

alert(test);

but I will recieve value null everywhere I click.

<button id="@Person.Id" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

<div id="[email protected]" style="display: none;">
            <a href="#" class="close" onclick="closeMessage('message-balloon1')">&times;</a>
            <p class="title">Change State</p>
            <p class="subtitle">@Cardholder</p>
        </div>

 

[Permudious]

<button id="@Person.Id" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

<div id="[email protected]" style="display: none;">
            <a href="#" class="close" onclick="closeMessage('message-balloon1')">&times;</a>
            <p class="title">Change State</p>
            <p class="subtitle">@Cardholder</p>
        </div>

Is not working, when I right click now, nothing comes up.

 

[JayC]

You could add an attribute to the button, such as: data-id="@Person.id" and then do something like this:

document.addEventListener('DOMContentLoaded', function() { var buttonWithNameElements = document.querySelectorAll('.showNameOnClick'); buttonWithNameElements.forEach(function(element) { element.addEventListener('contextmenu', function(e) { e.preventDefault(); var personId = this.getAttribute('data-id'); //do what you need with personId, button was clicked }); }); });

Add the class: 'showNameOnClick' to the buttons you want to be right clickable.

 

[Permudious]

You could add an attribute to the button, such as: data-id="@Person.id" and then do something like this:

document.addEventListener('DOMContentLoaded', function() { var buttonWithNameElements = document.querySelectorAll('.showNameOnClick'); buttonWithNameElements.forEach(function(element) { element.addEventListener('contextmenu', function(e) { e.preventDefault(); var personId = this.getAttribute('data-id'); //do what you need with personId, button was clicked }); }); });

Add the class: 'showNameOnClick' to the buttons you want to be right clickable.

Seems like this is working for me

Post automatically merged: Tuesday at 1:39 AM

How about a simple click event in this case?

I have a foreach with for now 8 div's, each div have to increment users and decrement.
I used the case above and change a bit. it should work I guess. Only I will get a error

TypeError: this.getAttribute is not a function
    at Playground:142:31
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (Playground:141:32)

<div class="ManualControl">
    <button class="IncrementUser" id="xIncrementUser" data-id="@ObjectID">+</button>
    <button class="DecrementUser" id="xDecrementUser" data-id="@ObjectID">-</button>
</div>

    document.addEventListener('click', function () {
        var buttonWithNameElements = document.querySelectorAll('.IncrementUser');
        buttonWithNameElements.forEach(function (element) {
            var object = this.getAttribute('data-id');
            console.log(object);
        });
    });