Question

I am new to Jquery and Javascript. Need a help regarding this problem:

There is a div named Profile , If I click that then a new popup window will open. Now this is only possible by a mouse click. I need it to be done by key press (enter) also.

JSP CODE FOR THE DIV

<div tabindex="0" style="text-decoration:underline" onmouseover="this.style.cursor='pointer';" id="<%=namespace%>_pmProfileName_<%=i%>_" onclick="perfChartConfig_<%=namespace%>.doShowProfilesForElement(this);">Profile</div>

JQUERY/JAVASCRIPT CODE

    doShowProfilesForElement : function(source){

    var callback = {       
     success : function(r) { 
        MO.globals.popups.hideWorkingMsg();  
        this.argument[0].pe = eval("("+r.responseText+")");  
        var pe = this.argument[0].pe; 

        var pStr = '';
        if(this.argument[1].indexOf("pmProfileName") > 0){
            if(pe == null || pe._mosol_AllPerfProfileNames.length==0){
                pStr = pStr + "<li>There are no profiles available for the element you selected.</li>";
            } else {
                for(var i=0; i<pe._mosol_AllPerfProfileNames.length;i++){
                    var profile = pe._mosol_AllPerfProfileNames[i];
                    var onClick = "onClick=\"perfChartConfig_<%=namespace%>.doProfileSelection(this,'"+this.argument[1]+"');\"";
                    pStr = pStr + "<div style=\"text-decoration:underline\" onmouseover=\"this.style.cursor='pointer';\" "+onClick+" >"+profile+"</div>";
                    //alert('For profile ['+profile+'] there are '+pe[profile].length+' expressions.');         
                }
            }
        }
        if(this.argument[1].indexOf("slaProfileName") > 0){
            if(pe == null || pe.offers.length==0){
                pStr = pStr + "<li>There are no SLAs available for the element you selected.</li>";
            } else {
                for(var i=0; i<pe.offers.length;i++){
                    var profile = pe.offers[i];
                    var onClick = "onClick=\"perfChartConfig_<%=namespace%>.doProfileSelection(this,'"+this.argument[1]+"');\"";
                    pStr = pStr + "<div style=\"text-decoration:underline\" onmouseover=\"this.style.cursor='pointer';\" "+onClick+" >"+profile+"</div>";
                }
            }
        }


        var rp = perfChartConfig_<%=namespace%>.rp;
        rp.setHeader("Select a Profile you want to chart:"); 
        rp.setBody(pStr); 
        rp.render();     
        rp.show();  
     },         
     failure : function(r) { 
        MO.globals.popups.hideWorkingMsg();
        MO.globals.popups.showMsg("Error", "<h2><span class=\"portlet-msg-error\">Your submission failed</span>"+"<br />Status: " + r.status + "</h2>");
     },    
     argument: [this, source.id]    
   };

Would you tell me how to write the function for keypress(enter) ?

Answer 1

bind the keypress or keyup event with you div

<div tabindex="0" class="someClass" style="text-decoration:underline" onmouseover="this.style.cursor='pointer';" id="<%=namespace%>_pmProfileName_<%=i%>_" onclick="perfChartConfig_<%=namespace%>.doShowProfilesForElement(this);">Profile</div>

add some class

$("div.someClass").bind("keyup",function(e){

if(e.keyCode == 13)
{
$(this).click();
}

});