CODEWITHSUNDEEP
javascriptjqueryhtml
IAmYourFaja
IAmYourFaja

Reputation: 56904

How to pass specific list element to Javascript function

On my web page, I have a list of images. Currently, when the user hovers their mouse over any image for 3 seconds, a showUpdateImageDialog() method executes which causes a jQuery dialog to pop up. If the user moves their mouse away from the image at any point during the 3 seconds, the timer is reset and the jQuery dialog never displays:

HTML:

<ul class="imageGroup">
    <li class="imageLi">
        <img class="image" src="fizz/buzz/blah.jpg"/>
    </li>
    <li class="imageLi">
        <img class="image" src="fizz/buzz/example.jpg"/>
    </li>
    ...
</ul>

<div id="edit-image-description-frame" title="Update Image Description">
    <div id="thumbnail-dialog-image-container">

        <!-- How do I get the 'src' attribute to be the correct image file? -->
        <img src="???"/>
    </div>

</div>

JS:

$(".imageLi").live({
    mouseenter:
        function()
        {
            window.myTimeout = setTimeout(showUpdateImageDialog,3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog()
{
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

Unfortunately, this code behaves the same regardless of which image in the list the user is hovering over. I need a way for the jQuery dialog to display the specific image that the user is hovering over:

How can I pass the image's source to jQuery so that I can have the dialog present this image back to the user? This may seem strange, but the dialog will allow the user to edit metadata about the image and update that metadata. Because of other constraints, I need to use the image's src attribute to look up the metadata. Thanks in advance!

Upvotes: 2

Views: 668

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Pass it as a parameter to your function

$(".imageLi").live({
    mouseenter:
        function()
        {
            var element = $(this).find('img');
            window.myTimeout = setTimeout(function(){showUpdateImageDialog(element);},3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog(image)
{
   // do what you want with image variable
   // it refers to the img element inside the li that was hovered
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359786

$(".imageLi").live({
    mouseenter: function()
    {
        var src = $(this).children('img')[0].src;
        window.myTimeout = setTimeout(function ()
        {
            showUpdateImageDialog(src);
        },3000);
    },
    mouseleave: function()
    {
        clearTimeout(window.myTimeout);
    }
});

function showUpdateImageDialog(src)
{
    $('#thumbnail-dialog-image-container').children('img')[0].src = src;

    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidth:500
    });
}

Upvotes: 3

Related Questions