How do I set the value of a variable using a switch statement with an expression that is a variable set as a dom elements id?

Question

The problem I have is that I am trying to set a variable(contentUrl) that i can use to specify the URL for my ajax injected dom element. So when I drag and drop an item it loads another element from a different page through the ".load()" method. Currently I am trying to use a switch statement to set my contentUrl variable.

The other point of contention is the fact that the .load() method, as specified in the jQuery API, requires the url to be a string.

What can i do to set my contentUrl based on the value of CurDragItem and then execute an ajax .load method to return an element from a page with the value of contentUrl? If this is not possible with a switch and the .load method –like i assume it isn't- how can i achieve what I just described?

Let me know if you need me to put it in a fiddle. Again I am using jQuery UI's dnd widget to accomplish this nonesense.

Heres a snippet of my code:

$(function() {
                var dragItems = $('.sidebar-listItem');
                var dropArea = $('.drop');
                var sidebarWrap = $('#l-sidebar-wrapper');
                var sidebarList = $("#l-sidebar-list");

                var contentList = $('.main-content-list');


                dragItems.draggable({ 
                    cursor: "move",
                    cursorAt: {top:60, left:45},
                    helper: 'clone',  
                    revert: "invalid",
                    scroll: false,
                    appendTo: 'body'
                        });
                // setter
                dragItems.draggable( "option", "scroll", false );       

                dropArea.droppable({
                    accept: ".sidebar-listItem",
                    activeClass: "dogs",
                    hoverClass: "dogs",
                    drop: function() {
                            //set the curDragItem value to the id of the element that is being dragged
                             var curDragItem = $('.ui-draggable-dragging').attr("id");
                             //initialize the variable with the value of nothing 
                             var contentUrl = "nothing";

                            //use switch statement to check whether curDragItem matches a case and then set value of contentURL
                            switch (curDragItem) {
                            case 'hour24-1':
                            contentUrl = "hour24.html";
                            break;
                            case 'matisyahu':
                            contentUrl = "matisyahu.html";
                            break;
                            case 'dirtyheads':
                            contentUrl = "dirtyHeads.html";
                            break;
                            }
                            //check what the value of contentUrl is
                            console.log(contentUrl);

                        //load the .main-content-list from a page with the url that is the value of contentUrl

                        dropArea.load("value of contentUrl .main-content-list", initDynamicEventHandlers);
                    }
                });
            });

Answer 1

As dandavis mentioned in the comments, your best bet would probably be an object mapper in case you need to use it elsewhere in the application.

Aside from that, you can add parameters to the drop function as mentioned in the jQuery UI docs so that you have access to whatever object was dropped.

                var dropArea = $('.drop');
            var sidebarWrap = $('#l-sidebar-wrapper');
            var sidebarList = $("#l-sidebar-list");

            var contentList = $('.main-content-list');
            var mapper = {
              'hour24-1': 'hour24.html',
              'matisyahu': 'matisyahu.html',
              'dirtyheads': 'dirtyHeads.html'
            };


            dragItems.draggable({ 
                cursor: "move",
                cursorAt: {top:60, left:45},
                helper: 'clone',  
                revert: "invalid",
                scroll: false,
                appendTo: 'body'
                    });
            // setter
            dragItems.draggable( "option", "scroll", false );       

            dropArea.droppable({
                accept: ".sidebar-listItem",
                activeClass: "dogs",
                hoverClass: "dogs",
                drop: function(event, ui) {
                        //set the curDragItem value to the id of the element that is being dragged
                         var curDragItem = ui.attr("id"); // Use the passed in parameter
                         //initialize the variable with the value of nothing 
                         var contentUrl = "nothing";

                        //check the value of curDragItem
                        console.log('Drag item: ' + curDragItem);
                        contentUrl = mapper[curDragItem];
                        //check what the value of contentUrl is
                        console.log(contentUrl);

                    //load the .main-content-list from a page with the url that is the value of contentUrl                 
                    dropArea.load(contentUrl + " .main-content-list", initDynamicEventHandlers);
                }
            });
        });

...