Question

I have 2 jquery scripts and I’m not sure exactly how to combine them.

Script #1: There is a link inside a DIV, make entire DIV clickable link.

Script #2: Open modal window from a link (standard jQuery UI modal).

Below is the HTML:

<div class="singlefeatureditem">
<a href="product.php?id=123" class="opennewwindow">
<img src="products/thumb_placeholder.jpg" width="125" height="125" alt="thumb"><br>
Item 1</a>
</div>

Below is the JS:

//make the whole div clickable
$(document).ready(function() {
    $(".singlefeatureditem").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
    });
});

//open the link in a modal window
    $(function (){
        $('a.opennewwindow').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });

The result I’m currently getting (which I guess is expected) is that if I click the link I get the modal, if I click the DIV (outside the link) the link works but it just opens the page with no modal.

I’d like to make the whole DIV a link and open the modal regardless of where in the DIV is clicked.

Any thoughts?
Thanks!
Chris

Answer 1

The onclick event of your link is not triggered when you use window.location. Try simulating a click, like this:

//make the whole div clickable
$(document).ready(function() {
    $(".singlefeatureditem").click(function(){
     $(this).find("a").click(); /// << "simulate" a click
     return false;
    });
});