CODEWITHSUNDEEP
javascriptjquerycontextmenuparameter-passingright-click
jumps4fun
jumps4fun

Reputation: 4132

How can I pass parameters from the element clicked, when right clicking an element in a web page?

I have a table, with a lot of elements. It is a calendar with events, and every event has it's own ID number, as well as one of three different categories, let's call them A, B and C.

Now for styling reasons, the categories are also implemented CSS-classes, which has the same names.

I ahve searched a bit on how to implement a "right-click-listener" with javascript/JQuery. I tried a couple of different solutions, before setteling on a override of the contextmenu-function, that the right button usually fires. I have also been able to differ between the categories, by passing parameters, that the contextmenu should only be overridden when elements of A, B and C are clicked. The following code works perfectly:

$(document).on("contextmenu", (".A, .B"), function(e) {
    $.colorbox({width:"554px", height:"480px", iframe:true, href:"myurl"});
                    return false;
                });

$(document).on("contextmenu", (".C"), function(e) {
    $.colorbox({href:"myurl"});
                    return false;
                });

The colorbox, if not familiar with it, is just a popup, implemented as an editor of my calendarevents. However I wish to pass on the source of the click's identification number, and I have not been able to find out how. These ID's are unique.

So:

  1. Can I pass parameters through this function?
  2. If so, how?
  3. If not, or if this overriding contextmenu is a bad way of doing it, how should it be done?

If any relevance at all, this is a part of a Java web app. I am using jstl and jsp when coding.

Thank you.

EDIT:

here are two functions. The top is a changelistener I use on some checkboxes, and they work. The bottom is the overridden contextmenu, but it does not work. Somehow it seems that the $function breaks out of the parent function, and ignores everything after. The return statement does not work, and the contextmenu appears.

$(document).ready(
    function() {
        $('.toggle').change(function() {
        var id = this.value;
        $('.' + id).toggle(this.checked);
    });
});

$(document).ready(
    function(){
        $(".A, .B").contextmenu(function() {
            var id = $(this).Attr("class");
            alert(id);
            return false;
        });
    });

EDIT 2:

In other words, I just solved my own problem. Even so, I only kinda answered my own question. I have figured out how to pass at least a single parameter, but it still need to be one of the set parameters of a given html-element, this time, the . I set my desired identification number, as the elements id, and retrieved the value like this:

$(document).ready(
function(){
    $(".A, .B").contextmenu(function() {
        var id = this.id;
        alert(id);
        return false;
    });
});

Still, I feel this is a clunky way of implementing a "onrightclicklistener", especially when compared to how I am used to do it in SWING. I'll leave the question unanswered, In case someone know of a better solution.

Upvotes: 0

Views: 2494

Answers (1)

jumps4fun
jumps4fun

Reputation: 4132

Five years later, i think it is time I answered my own question.

//my standard settings object, only relevant to colorbox
var popup_settings = {
    opacity : "0.6",
    width : "554px",
    height : "640px",
    iframe : true
}

//executes when the document has finished loading
$(document).ready(function(){

    //ovverrides right click function
    $(".A, .B").contextmenu(function() {
        var id = $(this).attr("data-value");
        var settings.href = "myURL?id=" +id; //adds the parameter directly in the URL
        $.colorbox(calendarelement_editor_settings);
        return false;
    });
});

This is obviously a bit specific for a colorbox setup, but a lot of the code is relevant for any setup. When you bind a function to an event through jquery, like I do with contextmenu here, the specific element clicked is accessible through this. All jquery functions can be used on the element through $(this).anythingInTheAPI(); Like getting the attribute data-value, in my case.

any other function, like $(this).hide(), is also available.

Now that I have the attribute i want to pass, the next step is to include it in the request for the new page. This popup opens up a separate page inside a modal container. There are many ways to do this, but the simplest one, is to include the parameter directly as a part of the URL, and implement a back end that expects that. To include parameters in an url, you write 

myURL?firstName=firstValue&SecondName=SecondValue

The question mark signals that parameters are following. the & is a seperator between parameters.

Upvotes: 1

Related Questions