double click on word in div

[Priti_P]

Hello,

I have a div in which I have written values fetched from an ajax call.
I want, when double click on any word in that div , alert that word.
I refered http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/479879/how-to-detect-clicked-word-in-textarea-with-right-click-and-show-menu-items and well some stackoverflow.
but did not get answer.
code is as below FYI.

        $("#other_skill_name").keypress(function()
                {
                    var input = document.getElementById('other_skill_name');
                    var div = document.getElementById('other_skill_from_DB');
                    var ajax_output =  other_skills_from_DB(input.value); // this is my ajax call which fetch values
                    div.innerHTML=ajax_output; // by this, put return values in div

                    document.getElementById('other_skill_from_DB').ondblclick = function () 
                    {
                           var sel = (document.selection && document.selection.createRange().text) ||
                                     (window.getSelection && window.getSelection().toString());
                           alert(sel); // this gives me empty alert
                    };
                });

[DJBirdi]

Give this a try, change element names as needed ofcourse :)

Just some test HTML:

<div id="test">
    Spongebob Squarepants
</div>

...and the JS:

$(document).ready(function(){
    $("#test").dblclick(function(){
        alert(getSelectedText());
    });
});

function getSelectedText() {
    var selectedText = "";
    if (window.getSelection) {
        selectedText = window.getSelection().toString();
    } else if (document.selection) { // for IE 8 and lower
        selectedText = document.selection.createRange().text;
    }
    return selectedText;
}

[Priti_P]

@DJBirdi:Thanks a lot,
but....
still it gives me empty alert.
I had tried this before too.

[DJBirdi]

Strange! It works as tested here: jsFiddle

Can you provide your full page's code by any chance? I'm sure you already know that since you're seeing an alert on double click, even though it's empty, it atleast means your JS is firing properly. So either something is preventing preventing the value from being captured, or is blanking it out at some other point before the the alert.

[Priti_P]

My bad :(

I am using this in Yii.

HTML code:

<div id='id_other_skill_from_DB' style='display:none' >
    <span class='form_lable'>Other Skills</span> 
    <?php
        echo CHtml::activeTextArea(Skill::model(),'skill',array('id'=>'other_skill_from_DB','style'=>'width: 247px','rows' => 6, 'cols' => 28,'readonly'=>true,));
    ?>
</div>
<div id='id_other_skill_name' style='display:none' >
<span class='form_lable'>Other Skill <span STYLE="font-size: 10pt; color:red">*</span></span>
<?php
echo CHtml::activeTextField(Skill::model(),'skill',array('id'=>'other_skill_name','style'=>'width: 247px'));
?>
</div>

as I said above
$("#other_skill_name").keypress

I have updated "other_skill_from_DB" div
As per your suggestion
i wrote

         $("#other_skill_from_DB").dblclick(function(){
                            alert(getSelectedText());
                        });

        function getSelectedText() {
            var selectedText = "";
            if (window.getSelection) {
            selectedText = window.getSelection().toString();
                    alert(selectedText);
                            } 
            else if (document.selection) { // for IE 8 and lower
            selectedText = document.selection.createRange().text;
                }
            return selectedText;
            }

[Taywin]

Have to tried adding else condition in your function to see if it actually gets into one of the if-elseif statement? Also, you have another alert() which is not needed inside your function.

PS: I am not sure about creating calling a function on contents added by Ajax. If the content is already on the page, it is not a problem; however, your case is a bit different. If the call for getSelection() is read from the DOM, then it shouldn't be a problem; however, if it does not, then the data that the function is reading would not include any contents added by Ajax. As a result, no content is selected and would alert an empty string.