CODEWITHSUNDEEP
javascripthtml
Jenson Jose
Jenson Jose

Reputation: 532

Open page on double clicking a list item

I have a simple select menu with some list items which are dynamically inserted when the page is loaded.

<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
    <option>Task 1</option>
    <option>Task 2</option>
    <option>Task 3</option>
    <option>Task 4</option>
</select>

I would like to show the user a specific page whenever he/she double-clicks on any single list item. The page I want to show will be displayed according to the data in the list item string.

How should I go about doing this?

Upvotes: 1

Views: 1852

Answers (6)

chrisweb
chrisweb

Reputation: 1510

here is a fiddle that does what you want (pure javascript): http://jsfiddle.net/S3KN4/3/

var initializeListeners = function() {

    console.log('initializeListeners');

    var viewTasksElement = document.getElementById('viewTasks');

    viewTasksElement.addEventListener('dblclick', showPage, false);

}

var showPage = function() {

    console.log('showPage');

    var viewTasksElement = document.getElementById('viewTasks');

    var taskText = getSelectedTaskText(viewTasksElement);

    if (taskText) {

        // do something
        console.log('selected task: ' + taskText);

    }

};

var getSelectedTaskText = function (selectElement) {

    console.log('getSelectedTaskText');

    if (selectElement.selectedIndex == -1) {

        return null;

    } else {

        return selectElement.options[selectElement.selectedIndex].text;

    }

}

initializeListeners();

Upvotes: 1

Zack
Zack

Reputation: 2869

Check out the MDN definition of the DOM event ondblclick here.

Here is a working example jsFiddle from referencing that definition.

jQuery was only used in this example to run the initialization event in jsFiddle, you could put it in the body onLoad handler like they show on the MDN reference page.

Basically, you get the element that you want to handle the double click event for, and assign either a user-defined function, or an anonymous function to run when that event occurs. You do not absolutely need jQuery for this, but it is a perfect example of how jQuery can make things easier for you when it comes to handling events from DOM objects.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
    initElement();
});

function initElement()
 {
 var p = document.getElementById("foo");
 // NOTE: showAlert(); or showAlert(param); will NOT work here.
 // Must be a reference to a function name, not a function call.
 p.ondblclick = showAlert;
 };

function showAlert()
 {
 alert("ondblclick Event detected!")
 }
});//]]>  

</script>


</head>
<body>
  <span id="foo">My Event Element</span>
<p>double-click on the above element.</p>

</body>


</html>

Upvotes: 0

Nils
Nils

Reputation: 806

As your options are dynamically inserted you need to use jQuery's .on method.

  $(function() {
    $(document).on("dblclick", "#viewTasks", function(){
       // DO YOUR STUFF HERE
    });  
  });

Upvotes: 0

Soundz
Soundz

Reputation: 1300

$('#viewTasks option').dblclick(function() {
 //do something
});

or raw:

<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
    <option ondblclick="someFunction(1);">Task 1</option>
    <option ondblclick="someFunction(2);">Task 2</option>
    <option ondblclick="someFunction(3);">Task 3</option>
    <option ondblclick="someFunction(4);">Task 4</option>
</select>
<script>
  function someFunction(item) {

     switch(item) {
       case 1: ...
     }
  }
</scritp>

Upvotes: 2

anon
anon

Reputation:

Use jQuery's .dblclick() event:

$('#viewTasks').dblclick(function() {
  alert('The item was double-clicked!');
});

Fiddle: http://jsfiddle.net/2cDv7/

Upvotes: 0

John
John

Reputation: 6278

$(document).ready(function()
{
    $("#viewTasks").dblclick(function()
    {
        var index = $(this).find(":selected").index();

        if(index == 0)
        {
            //do task 1
        }
        else if(index == 1)
        {
            // do task 2
        }
    });
});

Upvotes: 2

Related Questions