Datatable rows containing ui-dialog links

Datatable rows containing ui-dialog links

digitalprecisiondigitalprecision Posts: 5Questions: 0Answers: 0
edited November 2010 in General
Afternoon. We built an app using Datatables and wanted to add some extra functionality where users could click a 'per row' link which would open a jquery ui-dialog box.

Everything works pretty well except for one issue; when a user uses a form control to increase pagesize or paginate, the links to open up a ui-dialog box no longer work, instead the user is taken to the actual page. This only happens for links that aren't rendered upon initial page load so I think it has something to do with not calling fnDraw() after a user clicks a paginate link.

For example our default page size is 10 rows. A user can click any of the links associated with these first 10 rows and the ui-dialog box renders as expected. When a user increases page size to 50 (from 10) the ui-dialog links beyond the initial 10 do not work.

Thx in advance for any help.

Replies

  • dwaddelldwaddell Posts: 22Questions: 0Answers: 0
    You should probably use fnRender to do this. I had an issue with using JQuery's .live function to do something similar to what you are describing.

    How are you adding the link?
  • digitalprecisiondigitalprecision Posts: 5Questions: 0Answers: 0
    Links look like:

    [code]



    jQuery(document).ready(function() {
    jQuery(function() {
    jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").dialog({
    autoOpen: false,
    zIndex: 6000,
    modal: true
    });
    });

    jQuery( "a#jquery_get_dialog4cd872f0cc36d").click(function() {
    if (jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").dialog("isOpen")) {
    jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").html( "" );
    jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").dialog( "close" );
    } else {
    jQuery.get(jQuery(this).attr("href"), function (data) { jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").html(data); });
    jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").dialog( "open" );
    }
    return false;
    });
    });

    [/code]
  • rdahlrdahl Posts: 12Questions: 0Answers: 0
    I assume you are using server side processing of the data and ajax for the pagination or adding rows. If this is the case the issue is that the click function is only run on document.ready, so it will only bind the click event handler to the 10 rows that are part of the DOM at document.ready. if you change:
    [code]
    jQuery( "a#jquery_get_dialog4cd872f0cc36d").click(function() {
    [/code]
    to
    [code]
    jQuery( "a#jquery_get_dialog4cd872f0cc36d").live('click', function() {
    [/code]
    it should work, but what I am a bit confused about is the selector ("a#jquery_get_dialog4cd872...."), do you have multiple anchor tags with the same id?
    -richard
  • digitalprecisiondigitalprecision Posts: 5Questions: 0Answers: 0
    edited November 2010
    Thx for the feedback.

    To answer your 2nd question, no, each anchor tag has a different id.

    The change you suggested works better, but still not fully. It opens up the html that is supposed to be in the dialog box in the actual table cell.
  • rdahlrdahl Posts: 12Questions: 0Answers: 0
    I think you need to stop propagation of the links normal action in a better way, sometimes returning false is not sufficient, I had the same problem. I read a good writeup on this not long ago, but cannot find the link, but it explained it well and the use of "preventDefault" over "return false" worked for me. Try this:
    [code]
    jQuery( "a#jquery_get_dialog4cd872f0cc36d").click(function(e) {
    e.preventDefault();
    if (jQuery("div#overlay_jquery_get_dialog4cd872f0cc36d").dialog("isOpen")) { ...SNIP
    } else {
    jQuery.get(jQuery(this).attr("href"), function (data) { ...SNIP
    });
    [/code]
  • digitalprecisiondigitalprecision Posts: 5Questions: 0Answers: 0
    Good suggestion, but still no luck. Still acts as if there is no dialog wrapper around the link.
  • rdahlrdahl Posts: 12Questions: 0Answers: 0
    It sounds like something is screwy with the dialog itself then, try stepping through the code and see what happens, you could also try a different approach ala:
    a) don't create the dialog until the link is clicked;
    b) destroy the dialog upon close

    If you think about it you are 'if'ing a condition that will never be met (a modal dialog will never be open when you are able to click an element NOT in the dialog), I pretty much always initialize my dialogs only when they are needed, and destroy them when they are closed, unless the content for them is totally static or I am using an ajax call to populate the content dynamically.
    hth,
    -richard
  • digitalprecisiondigitalprecision Posts: 5Questions: 0Answers: 0
    Rock on. Appreciate the responses... I will try creating the dialog only when the link is clicked. I'll post results.
This discussion has been closed.