c# ASPNET rightclick event

Permudious

New Member
Dec 28, 2014
25
1
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:

ASP.net:
<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>

JavaScript:
<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

Don't need glasses if you can C#
Feb 26, 2012
431
644
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)".
 

Damien

Don't need glasses if you can C#
Feb 26, 2012
431
644
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

New Member
Dec 28, 2014
25
1
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

Don't need glasses if you can C#
Feb 26, 2012
431
644
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.
Code:
<button id="@Person.Id" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

Code:
<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

New Member
Dec 28, 2014
25
1
Code:
<button id="@Person.Id" class="na">@Cardholder<p class="rmlv">@Person.Id</p></button>

Code:
<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

Always Learning
Aug 8, 2013
5,497
1,398
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

New Member
Dec 28, 2014
25
1
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:

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

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

HTML:
<div class="ManualControl">
    <button class="IncrementUser" id="xIncrementUser" data-id="@ObjectID">+</button>
    <button class="DecrementUser" id="xDecrementUser" data-id="@ObjectID">-</button>
</div>
JavaScript:
    document.addEventListener('click', function () {
        var buttonWithNameElements = document.querySelectorAll('.IncrementUser');
        buttonWithNameElements.forEach(function (element) {
            var object = this.getAttribute('data-id');
            console.log(object);
        });
    });
 
Last edited:

Users who are viewing this thread

Top