Images in modal window

Images in modal window

agnitioagnitio Posts: 6Questions: 0Answers: 0
edited July 2013 in Editor
I'd like to show some images in Editor's popup modal window.
However, rather than pre-loading these images, I'd like to do so only once
the "Edit" button has been clicked.

Replies

  • agnitioagnitio Posts: 6Questions: 0Answers: 0
    To clarify, I have a list of items in a DataTable. I highlight one the items, then click "Edit".
    Based on one the attributes of that item (SKU, which is the value in column one), I want to then retrieve a set of images based on the SKU value.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    To confirm, you want the images to be part of one of the fields? In which case you'd need to have a custom field type plug-in which does what you are looking for. There is a tutorial on creating plug-ins here: https://editor.datatables.net/tutorials/field_types .

    Showing images should hopefully be relatively simple, but please do ask if you have any questions!

    Thanks,
    Allan
  • agnitioagnitio Posts: 6Questions: 0Answers: 0
    Hi Allan,

    Thank you for replying so quickly :-) I eventually figured out that I needed to create a new, custom fieldType, so made one called 'thumbs':

    [code]
    $.fn.DataTable.Editor.fieldTypes.thumbs = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
    "create": function ( conf ) {
    var that = this;

    // Create the thumbs element
    conf._input = $('')[0];
    return conf._input;
    }
    });
    [/code]

    I also have some code which triggers when the "Edit" button is clicked:

    [code]
    editor.on('onInitEdit', function (json, data) {
    var sData = oTable.fnGetData(this.s.editRow);
    $('.thumbs').empty();
    $('.thumbs').append('');
    });
    [/code]

    This shows the required image in the modal, although I have to open & close it once for it to start working. Ultimately, once I get one image working, I'd like to cycle through sData.images (which is an array) and display those.
  • agnitioagnitio Posts: 6Questions: 0Answers: 0
    In fact, the issue I have is that I cannot set the array of images in each row (which is then passed to sData). The array is returned in aaData ( ie, aaData[0]['thumbs'] ) but how do I go about extracting that? It seems awfully expensive to iterate through each and every element of aaData to find where sData.sku = aaData[]['sku'] , and then return the 'thumbs' part. There must be a smarter way to do it, presumably sending the thumbs in aoColumns, with something like bVisible as hidden, rather than false (if that makes sense!)
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    What does the data for each row look like? Something like this:

    [code]
    {
    "thumbs": [
    "thumb1.png",
    "thumb2.png",
    ...
    ],
    ...
    }
    [/code]

    ?

    If so, you can use the `name` parameter of the Editor field set to `thumbs` and the array will be what is given to the `set` function of the field type plug-in.

    It doesn't even need to be in a column (the bVisible you mention) - the whole data source object for the row is given to Editor when it shows an edit screen.

    Allan
  • agnitioagnitio Posts: 6Questions: 0Answers: 0
    Hello Allan & thanks for all your help thus far. Taking your advice, I have gotten to the point of displaying the thumbnails via the "set" function in the field type:

    [code]
    $.fn.DataTable.Editor.fieldTypes.thumbs = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
    "create": function ( conf ) {
    var that = this;

    // Create the thumbs element
    conf._input = $('')[0];
    return conf._input;
    },
    "set": function ( conf, val ) {
    $.each(val, function(index, image) {
    $('.thumbs').append('');
    })
    }
    });
    [/code]

    However, as before, it doesn't show the first time I click "Edit". I have also tried adding the following:

    [code]
    editor.on(
    'onInitEdit', function (json, data) {
    var sData = oTable.fnGetData(this.s.editRow);
    $('.thumbs').empty();
    $.each(sData.thumbs, function(index, image) {
    $('.thumbs').append('');
    })
    });
    [/code]

    It feels like I'm almost there!
  • agnitioagnitio Posts: 6Questions: 0Answers: 0
    Would it be that I need to call 'set' from within 'create'? If so, how do I pass the thumbs through to it, as I seem to only have conf & this accessible within 'create'.
This discussion has been closed.