display images in modal form

leopoldino01

Hi everyone, I need to display an image in a modal form.
Can you help me with some examples on how to do it?
Thanks

kthorngren

Is this with Datatables or Datatables Editor? If so please provide more details of what you have and what you are trying to accomplish.

Kevin

leopoldino01

Sorry, I need an example in the Datatables Editor.
Thanks

allan

Do you mean like this? (note you'll need to upload an image to see it in the form since the demo database doesn't have any images in the default configuration).

Allan

leopoldino01

My problem is not uploading an image, but displaying it in a modal window

allan

If you upload an image to that example and then edit the row, you'll see the image shown in the model.

Is that not what you are looking for? If not, could you explain with an image so I can visually see what you are trying to do?

Thanks,
Allan

leopoldino01

here's what I did:

table.tbl_modellismo.js:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.tbl_modellismo.php',
        table: '#modellismo',
        fields: [           
            {
                "label": "descrizione:",
                "name": "descrizione",
                "type": "textarea",
                "className": "full"
            },
            {
                "label": "tipologia:",
                "name": "tipologia",
                "type": "select",
                "options": [
                            {label: "...", value: ""},
                            {label: "kit da montare", value: "kit da montare"},
                            {label: "kit montato", value: "kit montato"},
                            {label: "fermodellismo", value: "fermodellismo"},
                            {label: "attrezzo", value: "attrezzo"},
                            {label: "colore", value: "colore"},
                            {label: "profilato", value: "profilato"},
                            {label: "altro", value: "altro"}
                        ]
            },
            {
                "label": "cod. colore:",
                "name": "cod_colore"
            },
            {
                "label": "foto:",
                "name": "foto",
                "type": "upload",
                "display": function ( file_id ) {
                    return '<img src="'+editor.file( 'tbl_foto_modellismo', file_id ).web_path+'"/>';
                },
                "clearText": "Clear",
                "noImageText": "No image"
            },
            {
                "label": "note:",
                "name": "note",
                "type": "textarea",
                "className": "full block"
            }
        ]
        
    } );

var table = $('#modellismo').DataTable( {
        ajax: {
        url: "php/table.tbl_modellismo.php",
        type: "POST"
        },      
        processing: true,
        serverSide: true,
        columns: [
            {
                "data": "descrizione", width: "400px"
            },
            {
                "data": "tipologia", width: "100px"
            },
            {
                "data": "cod_colore", width: "100px"
            },
            {
                "data": "foto", width: "50px",
                "render": function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'tbl_foto_modellismo', file_id ).web_path+'"/>' :
                        'No image';}
            },
            { "data": null, width: "10px","render": function(data, type, row) {return'<i class="fas fa-camera" data-toggle="modal" data-id="'+row.DT_RowId.replace("row_", "")+'" data-foto="'+row.foto+'" data-title="'+row.descrizione+'" data-target="#modal_foto"></i>'}
            }
        ],
        order: [2, 'asc'],
        select: true,
        lengthChange: false,
    } );
    
    $("#modal_foto").on('show.bs.modal', function (e) {
        var triggerLink = $(e.relatedTarget);
        var id = triggerLink.data("id");
        var descrizione = triggerLink.data("title");
        var foto = triggerLink.data("foto");
              
        $("#modalTitle").text(descrizione);
        $(this).find(".modal-body").html("<h5>id: "+id+"</h5><h5>descrizione: "+descrizione+"</h5><h5>"+foto+"</h5>");
    });
        
    new $.fn.dataTable.Buttons( table, [
            { 
                extend: "create", 
                editor: editor,             
                className: "btn btn-outline-primary",
                text: "<i class='fas fa-plus'/> Iserisci"   
            },
            {   
                extend: "edit",
                editor: editor,
                className: "btn btn-outline-warning",
                text: "<i class='fas fa-edit'/> Modifica"
            },
            { 
                extend: "remove",
                editor: editor,
                className: "btn btn-outline-danger",
                text: "<i class='fas fa-trash'/> Cancella",
                formMessage: function ( e, dt ) {
                    var rows = dt.rows( e.modifier() ).data().pluck("descrizione");
                    return "Sei sicuro di voler eliminare il seguente record(s)? "+
                        " <ul><li>"+rows.join("</li><li>")+"</li></ul>";
                }
            },
            {
                extend: 'collection',
                text: "<i class='fas fa-external-link-alt'/> Esporta",
                className: "btn btn-outline-secondary",
                buttons: [
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
    ] );

    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

table.tbl_modellismo.php:

<?php
date_default_timezone_set("Europe/Rome");
include( "lib/DataTables.php" );
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\MJoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;
Editor::inst( $db, 'tbl_modellismo','id' )
    ->fields(
        //inizio
        Field::inst( 'descrizione' )
        ->validator( Validate::notEmpty(
                ValidateOptions::inst()
                    ->message( 'dato obbligatorio' )
            ) ),
        Field::inst( 'tipologia' )
        ->validator( Validate::notEmpty(
                ValidateOptions::inst()
                    ->message( 'dato obbligatorio' )
            ) ),
        Field::inst( 'cod_colore' ),
        Field::inst( 'foto' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/db/upload/__ID__.__EXTN__' )
                ->db( 'tbl_foto_modellismo', 'id', array(
                    'filename'    => Upload::DB_FILE_NAME,
                    'filesize'    => Upload::DB_FILE_SIZE,
                    'web_path'    => Upload::DB_WEB_PATH,
                    'system_path' => Upload::DB_SYSTEM_PATH
                ) )
                ->dbClean( function ( $data ) {
                // Remove the files from the file system
                for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
                    unlink( $data[$i]['system_path'] );
                } 
                // Have Editor remove the rows from the database
                return true;
                } )
                ->validator( Validate::fileSize( 500000, 'Il file non deve essere superiore a 500Kb' ) )
                ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Si prega di caricare un file immagine (png, jpg, jpeg, gif" ) )
            ),
        Field::inst( 'tbl_modellismo.note' )
    )
    ->process( $_POST )
    ->json();

when I call the modal window, I don't see the image but the ID.
I need help.
I can't find a solution.

allan

Could you run the debugger on your page and let me know the debug code please?

Thanks,
Allan

leopoldino01

If I did not wrong the debugger procedure, the code is: eduhuv

allan

Excellent - thank you. That shows me the data being returned from the server is basically what I would expect.

If you look at your browser's network inspector, does it show the images being requested? I would expect from the code above that it does, and possibly those requests are resulting in an error of some sort?

If you can give me a link to your page and I confirm that.

Thanks,
Allan

leopoldino01

Unfortunately my site works in local with XAMP, it is not possible to access it from the outside.
Regarding the images to be displayed, these are regularly (foto1) seen in the table. When I click on them to enlarge them, like Lightbox, or I want to open them in a window that opens in "modal" mode, I only see their ID (foto2)

foto1:

foto2

allan

Ah!! This isn't the Editor model you are having problems with.

In the upload field you have:

'<img src="'+editor.file( 'tbl_foto_modellismo', file_id ).web_path+'"/>' 

You need to do the same thing in your modal code to translate the id into a web path for the image to be loaded.

Allan

leopoldino01

That's what I try to do, but I haven't solved anything.
I need help.
The code that opens the modal window is:

...
{
"data": "foto", width: "50px",
 "render": function ( file_id ) {
      return file_id ?
       '<img src="'+editor.file( 'tbl_foto_modellismo', file_id ).web_path+'"/>' :
       'No image';}
},
{ "data": null, width: "10px","render": function(data, type, row) {return'<i class="fas fa-camera" data-toggle="modal" data-id="'+row.DT_RowId.replace("row_", "")+'" data-foto="'+row.foto+'" data-title="'+row.descrizione+'" data-target="#modal_foto"></i>'}
}

...
    
    $("#modal_foto").on('show.bs.modal', function (e) {
        var triggerLink = $(e.relatedTarget);
        var id = triggerLink.data("id");
        var descrizione = triggerLink.data("title");
        var foto = editor.file( 'tbl_foto_modellismo', file_id ).web_path;
              
        $("#modalTitle").text(descrizione);
        $(this).find(".modal-body").html("<h5>id: "+id+"</h5><h5>descrizione: "+descrizione+"</h5><h5>"+foto+"</h5>");
    });
...

allan

That looks like it should be showing the web_path in your third h5 in the model. Is that not happening? You'd then need to wrap that in an img tag of course.

I'd really need to be able to see your page running to know why that isn't working if it isn't.

Allan

leopoldino01

How can I show you the running page?
Can you give me an advice?

leopoldino01

try to connect to this address http://192.168.1.112/db/index.php

allan

That's a private IP address - I'd need a publicly accessible page.

Thanks,
Allan