swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.24k stars 744 forks source link

Redirecting to a url in the Callback #630

Closed JohnCannonIT closed 6 years ago

JohnCannonIT commented 6 years ago

I've found plenty of examples where the callback uses the key in a simple console display. However, I'm trying to to redirect to an html.action (or url), passing the key parameter and some model parameters (I'm using MVC 5). How would one go about doing this?

Outside of the Context Menu, the jquery might look something like this:

$(function(){ /jquery statements / url_redirect({url: "stores/index", method: "get", data: {"storeNbr": "StoreNumber", "Workstation": key} }); });

To further explain, this works hard-coded (I'll add the key variable after I can get the model variables to work). But how do I pass the model variables mac, storeNbr, and ipaddress into this?

$(function () { $.contextMenu({ selector: '.context-menu-RemoveFavorite', // Make the context menu appear above superfish hover zIndex: function(){ return 990; }, callback: function (key, options) { var mac = '78:AC:C0:AD:FF:14'; var storeNbr = '59124'; var ipaddress = '10.230.244.19'; // var macPrefix = $('#storeSearchEditor').data('id'); var macPrefix = '/Stores/WorkstationIndividual?mac='; var storeNbrPrefix = '&storeNbr='; var ipaddressPrefix = '&ipaddress='; var link = macPrefix + mac + storeNbrPrefix + storeNbr + ipaddressPrefix + ipaddress; window.location.href = link;

bbrala commented 6 years ago

You should probably store the variabled somewhere else. One wat we use sometimes internally is to add properties to the element which triggers the menu, so for example <span class=".context-menu-RemoveFavorite" data-store-nvm="59124">click me</span>, then you can use the the follwoing in the callback: var storeNbr = options.$trigger.attr("data-store-nvm").

JohnCannonIT commented 6 years ago

Sorry I didn't get back to you sooner. Busy with other projects. Well, it seems it's working properly except for the last variable - data-apigiud, That is dependent on the for loop, which means I can't put it inside the<ul>. It's a dynamic variable. I've tried putting it in the <li>within the loop (as below) and in the href below that, but it hasn't worked. How do you pass a dynamic variable?

URL: http://localhost:45023/Stores/WorkstationIndividual/10.230.244.19/59124?mac=78:AC:C0:AD:FF:14&APIFavoritesFlag=add&APIguid=undefined

View:

<ul class="sf-menu-ajdusted context-menu-AddFavorite" data-ipaddress=@Model.ipaddress
                                                    data-storeNbr=@Model.store data-mac=@Model.mac>
     @foreach (var q in Model.APIInfoVMInfo.Where(a => a.category == n && a.sub_category == p))
      {
            <li data-apiguid=@q.webapi_guid>
        ...... etc.

Javascript:

function () {
    $.contextMenu({
        selector: '.context-menu-AddFavorite',
        // Make the context menu appear above superfish hover
        zIndex: function () {
            return 990;
        },
        callback: function (key, options) {
            //var mac = '78:AC:C0:AD:FF:14';
            //var storeNbr = '59124';
            //var ipaddress = '10.230.244.19';
            var ipaddressPrefix = '/Stores/WorkstationIndividual/';
            var ipaddress = options.$trigger.attr("data-ipaddress");
            var storeNbrPrefix = '/';
            var storeNbr = options.$trigger.attr("data-storeNbr");
            var macPrefix = '?mac='
            var mac = options.$trigger.attr("data-mac");        
            var APIFavoritesFlag = '&APIFavoritesFlag=' + key;
            var apiguidPrefix = '&APIguid=';
            var apiguid = options.$trigger.attr("data-apiguid");
            var link = ipaddressPrefix + ipaddress + storeNbrPrefix + storeNbr + macPrefix + mac + 
  APIFavoritesFlag  + apiguidPrefix + apiguid;
            window.location.href = link;
        },
        autoHide: true,
        items: {
            "add": { name: "Add to Favorites", icon: "add" }
        }
    });

Thank you for your help.