Showing a field in a modal via link (dialog/modal | parent/child views)

shawngibson

Hi again, Hope you are all well:)

In a quick sentence, I am trying to have the data of a single field (called "contents") appear only in a JQuery-UI dialog widget or UIKIT modal widget, when the "link" is clicked in the "contents" column To help explain what I mean, please consider the following code:

<table cellpadding="0" cellspacing="0" border="0" class="display resizable" id="fyi" width="100%">
    <thead>
    <tr>
        <th></th>
        <th></th>
        <th>Priority Rank</th>
        <th>Content</th>
        <th>URL</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>(edit button)</th>
        <th>(delete button)</th>
        <th>HIGH</th>
        <th>link</th>
        <th>http://www.somewhere.com</th>
    </tr>
    <tr>
        <th>(edit button)</th>
        <th>(delete button)</th>
        <th>LOW</th>
        <th>link</th>
        <th>http://www.lsomewherelse.com</th>
    </tr>
    </tbody>
</table>

When someone clicks the "link" anchor in column 4 (the "content" field) it should open a dialog or modal widget which displays within it the actual data of that particular record's "content" field.

I have been playing with THIS example (from your DataTables Extensions examples), but so far, I've had no luck. I've also been trying to understand how I might do this via your various parent/child examples (HERE, HERE, and HERE) but I am a bit out of my league when things get beyond HTML and CSS.

Is it possible to modify the code below, such that it only targets one particular field, named "content" or, eg, being the 2nd column in the table database itself?

$(document).ready(function () {
    $('#example').DataTable({
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.Data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll()
            }
        }
    });
});

kthorngren

For the code snippet you supplied it is expected that you need a responsive table where if too many columns are shown for the page the some columns are hidden then shown with the plus sign. Is this what you are looking for?

It sounds like you want something like this example. You can change the selector to the link column and instead of the alert place the data in the jQuery UI modal you want. For this solution you will need to create the jQuery UI modal.

Kevin

shawngibson

Thanks, Kevin. That's half-correct. There are sometimes many columns to display, but the data of the "content" column itself is usually a full, HTML-formatted page of data, which is why it needs to be separated-out and focused-on only when needed, else the entire table appear unusably chaotic to a regular user.

Think of it as being a link in a table cell which, when clicked, opens a PDF in a modal - that's what I need, visually, except instead of a PDF, it is the data in the "content" field of the current record which is displayed in the modal.

Unfortunately, I am not very good at coding, so traversing a DOM in order to find an element and then know how to take that information and supply it to the innards of a modal when clicked...is beyond me.

As a way of getting hopefully closer to solving my problem, in the JavaScript I provided above, is it possible to modify the code [var data = row. Data();] in such a way as to capture only the data of a particular column in the same row as where link is clicked?

I'm currently studying the JavaScript in THIS EXAMPLE. If I can get it to work with my table(s) and show only the "content" column in the example's child display, I can (fingers crossed) combine that code with the original JQuery UI Modal code above and get it working with the JQuery UI Dialog or the UIKIT variation.

I hope this response makes my needs clearer, and a coder might hopefully chime in with some much-needed expertise:)

Merci,
Shawn

kthorngren

in such a way as to capture only the data of a particular column in the same row as where link is clicked?

Use cell().data(). Sounds like you want to display a modal. I don't think the Child Rows Details example is the way you want to go. I might be wrong but I think you will want a slight variation to the example I linked to. I made two changes to that example here:
http://live.datatables.net/rakibobe/1/edit

First it uses the selector 'tr td:nth-child(2)' to target a specific column. Then is uses cell().data() to get the data for that cell. You can change the alert() to a function that displays the modal with that data.

Does this help or am I way off base

Kevin

shawngibson

Not off base, definitely on base:) I can't get your link to work (404), but if those are the only two changes you made, I'll give it a go right now:)

kthorngren

Your browser maybe changing http:// to https://. Try typing in http. Here is the code in case you still have problems with the link:

$(document).ready(function () {
  var table = $('#example').DataTable();

  $('#example tbody').on('click', 'tr td:nth-child(2)', function () {
    var data = table.cell(this).data();
    alert('You clicked on ' + data);
  });
});

Imagine, from the example, that td:nth-child(2) is the Position column. Any click in that column will just show the position.

Kevin

shawngibson

(edit: I submitted this before refreshing the page to see you've already posted the code...Link is still 404 with https:// or https:// Doh!)

This will hopefully amuse you lol:

$(document).ready(function () {
    var table = $('#example').DataTable();
 
    $('#example tbody').on('click', 'tr td:nth-child(2)', function () {
        var data = table.cell( this ).data();
        //change this to "modal code" + data[0] where [0] is the correct column #
        alert('You clicked on ' + data[0] + "'s row");
    });
});

Am I even close lol?

kthorngren

data[0]

The cell().data() just returns the data for the cell where row().data(), in certain configurations, will return an array. So in the example with row().data() data[0] points to the name column. With cell().data() just us data. We cross posted so see my above answer.

Kevin

shawngibson

I just added your code to a test table and played with the column positioning. It works a charm, executing the code (an alert with some preliminary text followed by the contents of the field in the appropriate record/row). I get it, this part, now:)

Very excellent start. Now I can use the jQuery UI and UIKIT Documentation to convert the alert() to an appropriate "modal code" + data[_column_] setup.

I'll also have to alter the original table._name_.js file so that it does not display the contents of that column/field, but instead shows the user some dummy text ("View Data" or such), similar to adding a functional link where it says "link" for each record, rather than showing the actual URL address.

In that case, I think I would need to move your code from a document.ready initialization-type to being called when the link is clicked. I think that's how this goes lol...now back to the dungeon:)

And thank you very much for your help, I feel stronger with the Dark Side today:)

Shawn

kthorngren

it does not display the contents of that column/field, but instead shows the user some dummy text ("View Data" or such),

You can use columns.render for this. Use orthogonal data to return "View Data"; for the display operation. See the [computed values section]https://datatables.net/manual/data/orthogonal-data#Computed-values() for an example.

Kevin