Kind of listview

[tudorels]

Hello, I must put my question here because on disqus(http://w2ui.com/web/docs/1.5/form/fields-custom) nobody answers. Is it possible to make custom field(type), similar to asp.net repeater, to display a list of links?, or some kind of listview that I can put in w2ui form and bind to datasource like {id:1, link:"http://google.ro"} and display like a list of links, for example:

http://google.ro http://yahoo.com http:// ............

Thank you!

[aadrian]

I must put my question here because on disqus(http://w2ui.com/web/docs/1.5/form/fields-custom) nobody answers.

I don't think those are the right places to "discuss" stuff, sice they seem to be generic on the template and should be practically only present in the Blog section.

Is it possible to make custom field(type), similar to asp.net repeater, to display a list of links?

Doesn't a multi-select filed or a table with a single column does the trick?

You can of course create your own component, but that's not easy - the multi-select should be a good starting point IMHO.

[tudorels]

You didn't understand what I'm asking, I don't want multiselect. I think you are right those example should be present on the site or blog, but the latest post on blog is from 12 december 2015 (http://w2ui.com/web/blog/13/Info-Bubbles-in-the-Grid). I think this project is abandoned and the support does not exist. I will inform all people about that and try to use another library. Thank you!

[spizzi77]

Hy, I don't use asp i use php, but for sure you can do a list of links, just must decide what object you want to use, w2ui grid and use grid elements or sidebar or multiselect...I don't understand the problem, you can use also a toolbar button menù, a sidebar a grid etc... If you need to take links from the server just need the right json array named elements, but all it's possibile, sincerely i do all with w2ui. If you have a link of example i can suggest you better for now you can go here:

http://w2ui.com/web/demos

Ps:W2UI, JqueryUI, Jquery 3 and Bootstrap and you have all you need to do data menagment.... ;) and for sure a back end server language in my case PhP...

[tudorels]

This "object" I'm looking for I want to put in a form with other elements and bind like other fields on the form, so the grid or sidebar are not good, maybe multiselect but I can't find in demos any kind of this usage example. Maybe I don't have enough imagination! Thank you!

[spizzi77]

Ok but a form it's an html form of default, so in a form you can use multiselect like as an autocomplete to intend, maybe your solution is a list of elements so a normal input list/select that call the DB and all the results are your links, in my project i call always the DB to populate input select.You can do in w2ui with list-field, call the DB and populate the select. I have an example of multiselect that call the DB, i will post the code next hour if you need, now i'm going out with my dog, but put url inside your input and do the call. Bye Andrea

[aadrian]

I must put my question here because on disqus(http://w2ui.com/web/docs/1.5/form/fields-custom) nobody answers.

I don't think those are the right places to "discuss" stuff, since they seem to be generic on the template and should be practically only present in the Blog section.

I mean the "comments" as a section don't really belong scattered across every possible link/page of a site (since you commented on one of those). I think this scattering happened because the website template has it activated. Comments belong really only in a Forum and a Blog in order to keep them manageable.

You didn't understand what I'm asking, I don't want multiselect.

You said you want a "a list of elements in a form". That is exactly what a multiselect does when it's width is only one element: See http://w2ui.com/web/docs/1.5/form/fields-enum

I think this project is abandoned and the support does not exist.

Look at the commits. This project is active. As with most frameworks, they're not supposed to be "support for JavaScript and CSS" but for the framework itself.

[spizzi77]

Also drop list and put the url inside to do the call at the DB...if need to populate with server....You can do what you want.Bye

[tudorels]

I'm talking about w2form. But never mind I will do in one way or another. Anyway the support for users is very weak compared to other libraries such webix.com. Ok, thanks again!

[aadrian]

I'm talking about w2form.

One puts a multiselect field inside a form, since HTML fields are used inside HTML forms.

Anyway the support for users is very weak compared to other libraries such webix.com.

Webix is a commercial product with a company behind it, that happens to have a free license for Open Source projects http://webix.com/licenses/

W2UI on the other hand is Open Source, and even more with a MIT License :) .

[spizzi77]

If you need you can see an example on my site, i open a form inside a popup and do an autocomplete, with two input required and some option, usually is what i done in a form of variation on my project, i insert under the code, for sure you need of the right json array so you need of id text as elements of the json array....Btw i write also the PHP, so you can see. Sincerely i work in a big data project for a company where i'm a consultant, so it isn't my company but a customer of my company, and last year they asked some tree grid but they wanted a free library, i looked for some free libraries in the web but sincerely there isn't a library that allow you to work like as w2ui allows. I really think that Vitmalina here has done a wonderful work, this is the only free library that allows you to manage ALL the events, you can do what you want with w2ui, it's free to debug because the code is written in an ordered way and easy to understand, under jquery own, sincerely i use it really in a big data project, and what i can do for example with grid it's really awesome to be a free library. There isn't another like this, and there are a lot of objects in a code written in a way that allow you to study it, debug it, manage as you want. If you go on my site and click the button under the page "Apri Form" you can see an example of loading from DB, you can load what you want, and for sure you can load also in field-list, i insert also the php so you can see how the json must be, you can see also the anwser with the browser console to see the structure.Bye

https://fractalcosmo.com/MvcWebLog/paginaDefault.php

HTML:

<div id="formDati" style="display:none"> </div>
<div id="dialogDati"> </div>

    <div id="popupDati" style="display: none; width: 700px; height: 350px; overflow: hidden">
        <div rel="title">

        </div>
        <div rel="body" align="center" style="padding: 1%; line-height: 100%;width:100%">
            <div id="contentPopUpDati"> </div>
        </div>
    </div>

JAVASCRIPT:

function apriForm(){

    $('#dialogDati').dialog({
        autoOpen : false,
        height :'150',
        width : '400',
        title:'Attenzione',
        modal : true,
        dialogClass: 'no-close',
        position:{my:'center',at:'center',of:window},
        buttons: [{text: "OK",
                   click: function() {
                        w2popup.close();
                        $(this).dialog("close");                        
                   }
                }]
    });

    //---------------Imposto la Form--------
    //Il destroy è sull'onclose del popup
    //$('#formDati').w2destroy('formDati');
    $('#formDati').w2form({
        header : '<b>Esempio Form</b>',
        name : 'formDati',
        url :'prove.php?salva=SI',
        fields: [
            { name: 'nome', type: 'text', html: { caption: 'Nome', attr: 'size="30" maxlength="15"', span:' w2ui-span7'} },
            { name: 'cognome', type: 'text', html: { caption: 'Cognome', attr: 'size="30" maxlength="15"', span:' w2ui-span7' } },
            { name: 'dataNascita', type: 'date',  required:true, html: { caption: 'Data Nascita', attr: 'size="20" maxlength="10"', span:' w2ui-span7' } },
            { name: 'autocompleta', type: 'enum', required:true,  html: { caption: 'Autocompleta', attr: 'size="70" maxlength="70" ', span:' w2ui-span7' },
                    options: { 
                            url:'prove.php',
                            max :2,
                            onAdd:function(event){
                                event.onComplete = function(){
                                    riepilogo = event.item.text;
                                    //console.log(event);
                                    citta = event.item.citta;
                                    ditta = event.item.ditta;
                                    utente = event.item.utente;
                                    riepilogo = utente + ' ' + citta + ' ' + ditta;
                                    $('[name=riepilogoDati]').val(riepilogo);
                                };
                            },
                            onRemove:function(event){
                                event.onComplete = function(){
                                    $('#riepilogoDati').val('');
                                };
                            },
                         }                      
             },
             {name :'riepilogoDati' , type :'textarea' ,html: { caption: 'Riepilogo Autocompleta', attr: 'size="80" readonly style="width: 430px;max-width:430px; height: auto"', span:' w2ui-span7' }}
        ],
        record : {

        },
        onRefresh:function(event){
            //console.log(this);
            $(':button:contains("Salva")').attr('class','w2ui-btn w2ui-btn-green');
            $('[name=Annulla]').attr('class','w2ui-btn w2ui-btn-red');
        },
        onError:function(event){
            event.preventDefault();
        },
        actions: {
            'Salva': function (event) {
                //console.log(this);
                var obj = this;
                //console.log(event);
                this.save(function(event){
                      if (event.status=='success'){
                        w2popup.close();
                        $('#dialogDati').html(event.message).dialog('open');
                        return;
                      }  
                });
            },
            'Annulla': function (event) {
                w2popup.close();
            },
        },

    });

    //Apro il pop up e gli passo la form
    $('#popupDati').w2popup('open', {
        title: "<p style='width:auto'><b>PopUp Form</b></p>",
        modal: true,
        showMax: false,
        onOpen: function (event) {
            event.onComplete = function (event) {
                $('#w2ui-popup #contentPopUpDati').w2render('formDati');
            };
        },
        onClose:function(event){
            $().w2destroy('formDati');
        }
    });
}

PHP:

    if (isset($_REQUEST['salva']) && $_REQUEST['salva'] == 'SI'){
        $root['status'] = 'success';
        $root['message'] = '<div class="alert-info">Form salvata</div>';
        $root = json_encode($root);          
        $root = str_replace('\n', '', $root);
        $root = str_replace('\r', '', $root);
            echo $root;
            exit;     
    }
    else{     
        //Apriamo il Db phpMyAdmin
        $db = new connessione();                
        $db = $db->apriConnessione();

        //creiamo  una select per definire l'array per ricerca
        //autocomplete di Ambito, l'autocomplete si basa sul "nome" della tabella ambito
        $query = $db->prepare("SELECT utente,ditta,citta FROM prova");

        //$query->bind_param('s',$_REQUEST['utente']);       
        $risultati =  $query->execute();        
        $query->bind_result($utente,$ditta,$citta);

        $risultatiPHP = array();
        $counter = 0;

        while ($query->fetch()) {
            ++$counter; 

            $risultatiPHP[] = array('id'=>$counter,'text'=>('<b>Utente : </b>'.$utente.' <b>Ditta : </b>'.$ditta.' <b>Citta : </b>'.$citta),
                                    'citta'=>$citta,
                                    'utente' =>$utente,
                                    'ditta'=>$ditta);                     
         }
        $root['status'] = 'success';
        $root['items'] = $risultatiPHP;
        $root = json_encode($root);          
        $root = str_replace('\n', '', $root);
        $root = str_replace('\r', '', $root);
        echo $root;            
        //----------------------
        //Chiude Mysql DB  
        $db->close();
        exit;
    }

[tudorels]

Very good example! Thank you! I'm new to w2ui and I need demos and example to know what I can do with this library and what are the limitations.

[spizzi77]

Hy, I have extende the example also to list drop, the difference between the list drop calling form DB and the autocomplete is that the autocomplete call the db when you a key press instead the list must have the db response on the load of the form, really you can also call when user insert a letter inside the list, but user must write, if you use url the user must write a letter to complete the list drop instead if you do a call at form ready and populate the item user will be able to see it without digit. Under the code in javascript and php at form ready, you can see on my site, the list is an example that i done some time ago so there are more that 1000 records :) just an example....But it's working ok also with 1000 records, yes 1000 records inside a drop list it's impossible.... ;) The difference is that the json it's a little different from autocomplete if you do a call on ready, you need dati = ['google.com', ' pippo','pluto', 'paperino'] and after items:dati By good sunday....

JAVASCRIPT ADDING LIST

        $.fn.risultati = function(){
            datiList = null;
            $.ajax({
                url : 'prove.php?list=SI',
                type : "POST",
                dataType: 'html',
                async:false,
                global:false,
                success:function(data){
                    datiList = JSON.parse(data);
                }
            }); 
            return datiList;
        };

function apriForm(){

    dati = $.fn.risultati();

    $('#dialogDati').dialog({
        autoOpen : false,
        height :'150',
        width : '400',
        title:'Attenzione',
        modal : true,
        dialogClass: 'no-close',
        position:{my:'center',at:'center',of:window},
        buttons: [{text: "OK",
                   click: function() {
                        w2popup.close();
                        $(this).dialog("close");                        
                   }
                }]
    });

    //---------------Imposto la Form--------
    //Il destroy è sull'onclose del popup
    //$('#formDati').w2destroy('formDati');
    $('#formDati').w2form({
        header : '<b>Esempio Form</b>',
        name : 'formDati',
        url :'prove.php?salva=SI',
        fields: [
            { name: 'nome', type: 'text', html: { caption: 'Nome', attr: 'size="30" maxlength="15"', span:' w2ui-span7'} },
            { name: 'cognome', type: 'text', html: { caption: 'Cognome', attr: 'size="30" maxlength="15"', span:' w2ui-span7' } },
            { name: 'dataNascita', type: 'date',  required:true, html: { caption: 'Data Nascita', attr: 'size="20" maxlength="10"', span:' w2ui-span7' } },
            { name: 'autocompleta', type: 'enum', required:true,  html: { caption: 'Autocompleta', attr: 'size="70" maxlength="70" ', span:' w2ui-span7' },
                    options: { 
                            url:'prove.php',
                            max :2,
                            onAdd:function(event){
                                event.onComplete = function(){
                                    riepilogo = event.item.text;
                                    //console.log(event);
                                    citta = event.item.citta;
                                    ditta = event.item.ditta;
                                    utente = event.item.utente;
                                    riepilogo = utente + ' ' + citta + ' ' + ditta;
                                    $('[name=riepilogoDati]').val(riepilogo);
                                };
                            },
                            onRemove:function(event){
                                event.onComplete = function(){
                                    $('#riepilogoDati').val('');
                                };
                            },
                         }                      
             },
             {name :'riepilogoDati' , type :'textarea' ,html: { caption: 'Riepilogo Autocompleta', attr: 'size="80" readonly style="width: 430px;max-width:430px; height: auto"', span:' w2ui-span7' }},         
             {name: 'list', type: 'list', required:true,  html: { caption: 'List', attr: 'size="70" maxlength="70" ', span:' w2ui-span7' },
                    options:{
                        items:dati
                    }
             }],             
        record : {

        },
        onRefresh:function(event){
            //console.log(this);
            $(':button:contains("Salva")').attr('class','w2ui-btn w2ui-btn-green');
            $('[name=Annulla]').attr('class','w2ui-btn w2ui-btn-red');
        },
        onError:function(event){
            event.preventDefault();
        },
        actions: {
            'Salva': function (event) {
                //console.log(this);
                var obj = this;
                //console.log(event);
                this.save(function(event){
                      if (event.status=='success'){
                        w2popup.close();
                        $('#dialogDati').html(event.message).dialog('open');
                        return;
                      }  
                });
            },
            'Annulla': function (event) {
                w2popup.close();
            },
        },

    });

    //Apro il pop up e gli passo la form
    $('#popupDati').w2popup('open', {
        title: "<p style='width:auto'><b>PopUp Form</b></p>",
        modal: true,
        showMax: false,
        height :'400',
        onOpen: function (event) {
            event.onComplete = function (event) {
                $('#w2ui-popup #contentPopUpDati').w2render('formDati');
            };
        },
        onClose:function(event){
            $().w2destroy('formDati');
        }
    });
}

PHP

<?php

    if (isset($_REQUEST['salva']) && $_REQUEST['salva'] == 'SI'){
        $root['status'] = 'success';
        $root['message'] = '<div class="alert-info">Form salvata</div>';
        $root = json_encode($root);          
        $root = str_replace('\n', '', $root);
        $root = str_replace('\r', '', $root);
            echo $root;
            exit;     
    }elseif(isset($_REQUEST['list']) && $_REQUEST['list'] == 'SI'){       
        //Apriamo il Db phpMyAdmin
        $db = new connessione();                
        $db = $db->apriConnessione();

        $query = $db->prepare("SELECT utente,ditta,citta FROM prova");     
        $risultati =  $query->execute();        
        $query->bind_result($utente,$ditta,$citta);

        $risultatiPHP = array();
        $counter = 0;

        while ($query->fetch()) {
            ++$counter; 

            $risultatiPHP[] = $utente;                     
         }
            $root = $risultatiPHP;
            $root = json_encode($root);          
            $root = str_replace('\n', '', $root);
            $root = str_replace('\r', '', $root);
            echo $root;            
            //----------------------
            //Chiude Mysql DB  
            $db->close();
            exit;
        }
    else{        
    $db = new connessione();                
    $db = $db->apriConnessione();
    $query = $db->prepare("SELECT utente,ditta,citta FROM prova");       
    $risultati =  $query->execute();        
    $query->bind_result($utente,$ditta,$citta);

    $risultatiPHP = array();
    $counter = 0;

    while ($query->fetch()) {
        ++$counter; 

        $risultatiPHP[] = array('id'=>$counter,'text'=>('<b>Utente : </b>'.$utente.' <b>Ditta : </b>'.$ditta.' <b>Citta : </b>'.$citta),
                                'citta'=>$citta,
                                'utente' =>$utente,
                                'ditta'=>$ditta);                     
     }
        $root['status'] = 'success';
        $root['items'] = $risultatiPHP;
        $root = json_encode($root);          
        $root = str_replace('\n', '', $root);
        $root = str_replace('\r', '', $root);
        echo $root;            
        //----------------------
        //Chiude Mysql DB  
            $db->close();
            exit;
    }

?>

[mrg2001]

You are welcome to discuss, but please keep the issue closed.

[aadrian]

You are welcome to discuss, but please keep the issue closed.

@mrg2001 Much more useful would be to use a "discuss" or "support" or "question" Label for this issue and other (like other projects do https://github.com/gitbucket/gitbucket/labels ) to be able to distinct/filter issues more easily instead of just closing issues.

[tudorels]

@mrg2001 I did not received an answer from you, so I'm not closing this. If bother to read my question I said that I put my question first on disqus in users comments("I must put my question here because on disqus(http://w2ui.com/web/docs/1.5/form/fields-custom) nobody answers."). This kind of support did not exist? You must think of that to solve issues, better than just closing issues.

[mpf82]

Off Topic: IMHO, the github issues are for bugs and feature requests. If a users is seeking programming help, there's stackoverflow.

I also agree with aadrian, in that disqus is a bad choice on the w2ui pages, since everything is scattered all over the place. I never got into using it, since I can't even search for all w2ui related disqus comments and sort them by date (but that might just be me, being incapable of using disqus). The disqus questions are quite old and most of them don't even have an answer. Maybe remove it completely and just point users to stackoverflow?

[Supme]

Maybe use forum?