Results 1 to 7 of 7

Thread: stopPropagation on link click

  1. #1

    Thread Starter
    Frenzied Member MattP's Avatar
    Join Date
    Dec 2008
    Location
    WY
    Posts
    1,227

    stopPropagation on link click

    Code:
        $(document).delegate(".divDocument", "click",
            function (event) {
                var detailsDiv = $(this).find('#document-details');
                if (detailsDiv[0].children.length == 0) {
                    LoadDocumentDetails($(this).find('#document-details'), this.id);
                } else {
                    detailsDiv.toggle(1000);
                }
            }
        );
    I'm trying to stop the toggle from happening when I click on a link in the div.

    Code:
        $("#corrContent a").click(function (event) {
            event.stopPropagation();
        })
    Here's the method I'm trying to use to stop the event from bubbling up. The problem I'm having is that this method isn't getting hit so I must have the selector wrong somehow.

    Code:
                success: function (data, textStatus, jqXHR) {
                    //Data loaded successfully.  Clear the loader and show details
                    $(div).removeClass("divLoading");
                    $(div).empty();
                    var results = data.GetCorrespondenceByIDResult;
                    var correspondence = results.RootResults[0];
                    var doc = results.IncludedResults[0];
                    var contact = results.IncludedResults[1];
                    $(div)
                        .html('<div id="corrContainer">\
                            <div id="corrFileContact">\
                                <p>' + contact.FirstName + ' ' + contact.LastName + '</p>\
                                <p>' + contact.BusinessName + '</p>\
                            </div>\
                            <div id="corrContent">\
                                <p style="float:left;"><a onClick=\'OpenRadWindow(\"../WebTwain/ViewDocument.aspx?iImageIndex=' + doc.ID + '&ImageName=' + doc.FileName + '&ImageExtType=' + doc.FileType + '\")\'>' + doc.FileName + '</a></p>\
                                <p style="float:right; margin-right:50px;">' + readableFileSize(doc.FileSize) + '</p>\
                            </div><div id="corrFooter">\
                                <p>Created By:</p>\
                                <p>' + correspondence.CreatedBy + '</p>\
                                <p>' + new Date(parseInt(correspondence.CreatedDate.substr(6))).format("MMMM d, yyyy") + '</p>\
                            </div>\
                        </div>');
                }
    Here's the success portion of the ajax call where I add the link.

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: stopPropagation on link click

    I'm not sure that your usage of delegate() is really appropriate; would need to see more of your code to tell. But, as it is, you'll seemingly need to use delegate() to stop propagation as well:
    Code:
      $("#corrContent").delegate("a", "click", function(event){
        event.stopPropagation();
      });

  3. #3

    Thread Starter
    Frenzied Member MattP's Avatar
    Join Date
    Dec 2008
    Location
    WY
    Posts
    1,227

    Re: stopPropagation on link click

    That's not getting hit either.

    Not sure how much additional code I have to show you.

    I've extended the repeater class to let me supply my own templates. Here's the one we're dealing with.

    Code:
                    <DocumentTemplate>
                        <div class="divCorrespondence">
                            <div class="divDocument" id='<%# DataBinder.Eval(Container.DataItem, "ID") %>'>
                                <asp:Label ID="DocumentLabel" runat="server" Text="Document" BackColor="#CCCCFF" Width="125px" style="text-align:center;padding:5px;" />
                                <div class="divCorrespondenceRight">
                                    <span>Date Added: </span>
                                    <asp:Label ID="DocumentCreated" runat="server" Text='<%# Eval("DateCreated", "{0:MMMM d, yyyy}") %>' />
                                </div>
                                <div id="document-details"></div>
                            </div>
                        </div>
                    </DocumentTemplate>
    And here's the full ajax call which is hitting a WCF RIA service with a Json endpoint.

    Code:
        function LoadDocumentDetails(div, ID) {
            $.ajax({
                type: 'GET',
                url: '/Data/Models/CRM-Data-Services-CrmService.svc/Json/GetCorrespondenceByID',
                data: { "CorrespondenceID": +ID },
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                beforeSend: function () {
                    $(div).addClass("divLoading");
                    $(div).html('<div><img src="Images/ajax-loader.gif" alt="Loading..." /></div>');
                },
                success: function (data, textStatus, jqXHR) {
                    //Data loaded successfully.  Clear the loader and show details
                    $(div).removeClass("divLoading");
                    $(div).empty();
                    var results = data.GetCorrespondenceByIDResult;
                    var correspondence = results.RootResults[0];
                    var doc = results.IncludedResults[0];
                    var contact = results.IncludedResults[1];
                    $(div)
                        .html('<div id="corrContainer">\
                            <div id="corrFileContact">\
                                <p>' + contact.FirstName + ' ' + contact.LastName + '</p>\
                                <p>' + contact.BusinessName + '</p>\
                            </div>\
                            <div id="corrContent">\
                                <p style="float:left;"><a onClick=\'OpenRadWindow(\"../WebTwain/ViewDocument.aspx?iImageIndex=' + doc.ID + '&ImageName=' + doc.FileName + '&ImageExtType=' + doc.FileType + '\")\'>' + doc.FileName + '</a></p>\
                                <p style="float:right; margin-right:50px;">' + readableFileSize(doc.FileSize) + '</p>\
                            </div><div id="corrFooter">\
                                <p>Created By:</p>\
                                <p>' + correspondence.CreatedBy + '</p>\
                                <p>' + new Date(parseInt(correspondence.CreatedDate.substr(6))).format("MMMM d, yyyy") + '</p>\
                            </div>\
                        </div>');
                },
                error: function (jqHXR, textStatus, errorThrown) {
                    //An error occurred.  Clear the loader and show error message
                    $(div).removeClass("divLoading");
                    $(div).empty();
                    $(div).html('<p><strong>An error occurred while loading the details.</strong></p>');
                }
            });
        }

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: stopPropagation on link click

    My mistake: the selector on which you use delegate() is the element that gains an event listener for any existing or future descendents; #corrContent does not exist until after your AJAX operation, therefore using delegate() on it (at page load) is meaningless.

    So mostly you need to change the selector on which you delegate; any ancestor (that exists at page load) will do:
    Code:
    $('.divDocument').delegate("#corrContent a", "click", function(event){
      event.stopPropagation();
    });
    As for what I was saying about delegate() before, it should be more efficient to use specific event handlers (such as click()) if you can, and it looks like .divDocument is present at page load - so you might be able to switch from '$(document).delegate(".divDocument", "click"' to '$(".divDocument").click('.
    Last edited by SambaNeko; Nov 10th, 2011 at 02:23 PM.

  5. #5

    Thread Starter
    Frenzied Member MattP's Avatar
    Join Date
    Dec 2008
    Location
    WY
    Posts
    1,227

    Re: stopPropagation on link click

    This does get hit when the page loads, but doesn't prevent the div from toggling when clicking on the link in it.

    As for the click method on the div I couldn't get it to work correctly. Here's the original method I was trying to use.

    Code:
    //    $(".divDocument").click(function () {
    //        var detailsDiv = $(this).find('#document-details');
    //        if (detailsDiv[0].children.length == 0) {
    //            LoadDocumentDetails($(this).find('#document-details'), this.id);
    //        } else {
    //            detailsDiv.toggle(1000);
    //        }
    //    });

  6. #6
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: stopPropagation on link click

    Is your jQuery script contained within a $(document).ready() function?
    Code:
    $(document).ready(function(){
    
        $(document).delegate(".divDocument", "click",
            function (event) {
                var detailsDiv = $(this).find('#document-details');
                if (detailsDiv[0].children.length == 0) {
                    LoadDocumentDetails($(this).find('#document-details'), this.id);
                } else {
                    detailsDiv.toggle(1000);
                }
            }
        );
    
      $('.divDocument').delegate("#corrContent a", "click", function(event){
        event.stopPropagation();
      });
    
    });
    
    function LoadDocumentDetails( ...

  7. #7

    Thread Starter
    Frenzied Member MattP's Avatar
    Join Date
    Dec 2008
    Location
    WY
    Posts
    1,227

    Re: stopPropagation on link click

    Gah, it was until I commented it out this morning testing things. That fixed it.

    So glad tomorrow is a holiday.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width