ComboDroplist

[Anthony]

Hi everyone
I am new to visualJS so do forgive me if this is a basic request, I have a vb6 application that I am now looking to convert to visualJS. I'll get right to the point.
In my vb6 app i use combo dropdown list to display a list of patients, the list size can be anything from 1500 to 6700, now in vb6 the list is alphabet and the user only has to type a few letters and the list is filtered to the name,

basically how can I implement this filtered combo dropdown list box

Many Thanks in advanced.

ps what a great project.

[sedrok (jslinb.ru)]

jslinb listbox can be 300-400 entries.

so you must use like this combination:




        <div id='loading'><img src="loading.gif" alt="Loading..." /></div>         <div id='layer1' style="position: relative; top:0px; left:0px; width: 500px; height: 500px"></div>                 <script type="text/javascript" src="runtime/jsLinb/js/linb-all.js"></script>         <script type="text/javascript" src="runtime/jsLinb/js/adv-all.js"></script> <script type="text/javascript"> // The default code is a com class (inherited from linb.Com) Class('App', 'linb.Com',{     Static:{         //it can be called by "App.sf1()"         _loademps : function() {             var params = {name:SPA.ctl_input9.getValue(), rnd:Math.random()*1000};             linb.Ajax('emps.php',params,                       function(rsp){                           //linb.log(rsp);                           SPA.ctl_emps.setItems(_.unserialize(rsp));                       },                       function(){                           linb.log('load error');                       }).start();                     }     },     // Ensure that all the value of "key/value pair" does not refer to external variables     Instance:{         // To initialize instance(e.g. properties)         initialize : function(){             // To determine whether or not the com will be destroyed, when the first UI control be destroyed             this.autoDestroy = true;             // To initialize properties             this.properties = {};         },         // To initialize internal components (mostly UI controls)         // *** If you're not a skilled, dont modify this function manually ***         iniComponents : function(){             // [[code created by jsLinb UI Builder             var host=this, children=[], append=function(child){children.push(child.get(0))};             window.SPA = this;                         append(                 (new linb.UI.SButton)                 .setHost(host,"ctl_sbutton5")                 .setLeft(690)                 .setTop(550)                 .setWidth(100)                 .setCaption("Отправить")                 .onClick("_ctl_sbutton5_onclick")             );                         append(                 (new linb.UI.ComboInput)                 .setHost(host,"ctl_comboinput4")                 .setLeft(10)                 .setTop(230)                 .setWidth(290)             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel1")                 .setLeft(10)                 .setTop(210)                 .setCaption("Тип")             );                         append(                 (new linb.UI.ComboInput)                 .setHost(host,"ctl_comboinput5")                 .setLeft(310)                 .setTop(230)                 .setWidth(480)             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel2")                 .setLeft(310)                 .setTop(210)                 .setCaption("Подтип")             );                         append(                 (new linb.UI.Input)                 .setHost(host,"ctl_input1")                 .setDirtyMark(false)                 .setShowDirtyMark(false)                 .setLeft(10)                 .setTop(290)                 .setWidth(780)             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel3")                 .setLeft(10)                 .setTop(270)                 .setCaption("Тема Заявки")             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel4")                 .setLeft(10)                 .setTop(330)                 .setCaption("Текст Заявки")             );                         append(                 (new linb.UI.Input)                 .setHost(host,"ctl_input2")                 .setDirtyMark(false)                 .setShowDirtyMark(false)                 .setLeft(10)                 .setTop(350)                 .setWidth(780)                 .setHeight(190)                 .setMultiLines(true)             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel5")                 .setLeft(10)                 .setTop(60)                 .setCaption("Выберите свою ФИО из списка")             );                         append(                 (new linb.UI.List)                 .setHost(host,"ctl_emps")                 .setDirtyMark(false)                 .setShowDirtyMark(false)                 .setLeft(10)                 .setTop(90)                 .setWidth(780)                 .setHeight(120)                 .setValue("b")             );                         append(                 (new linb.UI.Input)                 .setHost(host,"ctl_input9")                 .setDirtyMark(false)                 .setShowDirtyMark(false)                 .setLeft(10)                 .setTop(30)                 .setWidth(670)                 .beforeKeypress("_ctl_input9_beforekeypress")             );                         append(                 (new linb.UI.SButton)                 .setHost(host,"ctl_sbutton22")                 .setLeft(690)                 .setTop(30)                 .setWidth(100)                 .setCaption("Найти")                 .onClick("_ctl_sbutton22_onclick")             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel21")                 .setLeft(10)                 .setTop(10)                 .setCaption("Найти ФИО")             );                         return children;             // ]]code created by jsLinb UI Builder         },         // Give a chance to load other com         iniExComs : function(com, threadid){         },         // Give a chance to determine which UI controls will be appended to parent container         customAppend : function(parent, subId, left, top){             // "return false" will cause all the internal UI controls will be added to the parent panel             return false;         },         // This instance's events         events : {"onReady":"_com_onready", "onRender":"_com_onrender", "afterIniComponents":"_com_afterinicomponents"},         _ctl_sbutton1_onclick : function (profile, e, src, value) {             var uictrl = profile.boxing();             linb.alert("hi","I'm " + uictrl.getAlias());         },         _com_onready : function(com,threadid){                 },         _com_onrender : function(com,threadid){                 },         _com_afterinicomponents : function(com,threadid){             linb.log("test");         },         _ctl_sbutton5_onclick : function(profile,e,src,value){             var ns = this, uictrl = profile.boxing();         },         _ctl_sbutton22_onclick : function(profile,e,src,value){             var ns = this, uictrl = profile.boxing();             if(SPA.ctl_input9.getValue().length >= 3) {                App._loademps();             } else {                linb.message("Минимум 3 знака");             }         },         _ctl_input9_beforekeypress : function(profile,caret,keyboard,e,src){             var ns = this, uictrl = profile.boxing();             if(keyboard[0] == "enter") {             if(SPA.ctl_input9.getValue().length >= 3) {                App._loademps();             } else {                linb.message("Минимум 3 знака");             }             }         }     } });                 linb.UI.setTheme('default');                         linb.main(function(){                 linb('loading').remove();             });             linb.main(function(){                 var ins=new App;                 ins.iniComponents();                 linb('layer1').append(ins.getUIComponents());             });         </script>

php code

$conn = 0; $rs = 0; function Con() {    global $conn;    $conn = odbc_connect('DITserv','User','');    if (!$conn) {       die("Connection Failed: " . $conn);    } } function Dis() {    global $conn;    odbc_close($conn); } function SetRs($sql) {    global $conn, $rs;    $rs = odbc_exec($conn, stripslashes($sql));    if (!$rs) {       die("Failed: " . $conn);    } } function GetNext() {    global $rs;    $eof = odbc_fetch_row($rs);    return $eof; } function Fieldo($fn) {    global $rs;    $res = odbc_result($rs, $fn);    return $res; } function Field($fn) {    global $rs;    $res = iconv("windows-1251","utf-8", ' ' . odbc_result($rs, $fn));    return $res; } function sutf($txt) {    $res = iconv("utf-8","windows-1251", $txt);    return $res; } function win($txt) {    $res = iconv("windows-1251","utf-8", $txt);    return $res; } function right($value, $count){     return substr($value, ($count*-1)); } function left($string, $count){     return substr($string, 0, $count); } Con(); $sql="SELECT TOP 50 ID, NAME FROM StaffDataBase where name like '" . sutf($_REQUEST["name"]) . "%'"; SetRs($sql);   $i = 0; $Data = '['; while (GetNext())   {   if ($i > 0) {      $Data = $Data . ',';   }   $Data = $Data . '{"id":"' . Field("ID") . '","caption":"' . Field("NAME") . '"}';   $i = $i + 1; } $Data = $Data . ']'; echo $Data; Dis();

[Anthony]

Many Thanks

I will try this out.

Anthony

[Anthony]

sedrok Thanks

I am getting the following error

"Uncaught Reference Error: SPA is not defined"

However when I type SPA. the code intellisense list of attributes and methods does appear. what am I missing. Also should I be using linb.Ajax or linb.request.

once again

Thank you

Anthony

[sedrok (jslinb.ru)]

look closely to my code:

... ... iniComponents : function(){             // [[code created by jsLinb UI Builder             var host=this, children=[], append=function(child){children.push(child.get(0))};             window.SPA = this; .... ....

[Anthony]

Thanks

However seems to only work for version 3.0 (ie jsLinb3.0)

I recently downloaded package 4.0 but it would not work, not even a simple ajax html call back would work only in version 3.0


Anthony

[Anthony]

Now works.

Thanks

[Anthony]

Hi All

Manage to get a handle on jsLinb etc however one problem I seems to be stuck on.

given the following: I am using a combo dropdown
once you type a few characters and then click the down arrow to the right a filter sql response list is feedback as expected.

nb: I'm using the ' _datacombo1_beforecombopop' to request the list

My question is
a/ Is their an event onItemSelected ie to select from the list and not send off another db request
b/ If not how can I get an equivalent with the combination of events that exisit.

ie I need to know that I have selected from the list and not simply triggered onChange, which would fire off another db request.
which result in two to three db request for something that it already responded to.

Most things I've manage to figure out.

Once again I'll like to congrat the team.

This is such a great project. keep up the good work.

Anthony
 

[linb]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.ComboInput)
                .setHost(host,"ctl_comboinput2")
                .setLeft(220)
                .setTop(70)
                .setLabelCaption("ctl_comboinput2")
                 .beforeComboPop("_ctl_comboinput2_beforecombopop")
            );
           
            append(
                (new linb.UI.List)
                .setHost(host,"ctl_list1")
                .setItems([{"id":"a", "caption":"item a", "image":"img/demo.gif"}, {"id":"b", "caption":"item b", "image":"img/demo.gif"}, {"id":"c", "caption":"item c", "image":"img/demo.gif"}, {"id":"d", "caption":"item d", "image":"img/demo.gif", "disabled":true}])
                .setLeft(350)
                .setTop(260)
                .setVisibility("hidden")
                .setDirtyMark(false)
                .onItemSelected("_ctl_list1_onitemselected")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_comboinput2_beforecombopop : function (profile, pos, e, src) {
            var ns = this;
// you can show any linb.UI or linb.Com for the comboinput
            ns.ctl_list1.setUIValue(null).getRoot().popToTop(pos);
            ns.ctl_list1.getRoot().setBlurTrigger(_(), function(){
                ns.ctl_list1.getRoot().hide();
            });
            linb.Event.keyboardHookUp('esc',0,0,0,function(){
                ns.ctl_list1.getRoot().hide();
                ns.ctl_comboinput2.activate();
            });
// stop the default pop list
            return false;
        },
// any events for the pop linb.UI/linb.Com
        _ctl_list1_onitemselected : function (profile, item, e, src, type) {
            linb.message("_ctl_list1_onitemselected");
            _.asyRun(function(){
                profile.boxing().hide();
            });
        }
    }
});

[Anthony]

Thanks for the work around.

This is such an important feature for a combo list maybe is can be added in the next revision.

[linb]

OK. I added a property popCtrlEvents to linb.UI.ComboInput.

[Anthony]

Thanks I'll check it out

[Anthony]

Have anyone an example how to use getPopCtrlEvents

ie that only one request made and I can select the data from the drop down list

many thanks

[Anthony]

Hi Linb

I am still having problem with the combodroplist. Let me explain further

In such program language as vb,c' c++ etc as well as having a listItem that is displayed you can also bound a seperate field eg id. Therefore when you select an item from the list you can
also obtain the bound field value.

Now as jsLinb uses JSON format is there a mean do the following eg

snippet

append(
                (new linb.UI.ComboInput)
                .setHost(host,"ctl_comboinput2")
                .setLeft(220)
                .setTop(230)
                .setWidth(360)
                .setLabelCaption("ctl_comboinput2")
                .setType("listbox")
                .setItems([{"id":"a", "caption":"item a"}, {"id":"b", "caption":"item b"}, {"id":"c", "caption":"item c"}, {"id":"d", "caption":"item d"}])
                .afterUIValueSet("_ctl_comboinput2_afteruivalueset")
            );



 _ctl_comboinput2_afteruivalueset : function (profile,oldValue,newValue){
            var ns = this, uictrl = profile.boxing();
           
            //  var res = ns.ctl_comboinput2.getselectedrow();
            // where res would be  {"id":"b","caption":"item b"}
            // assuming that you selected item b from the dropdown
           
           
        }


eg

if i had a list of patients [{"id":"Number","caption":"Name"},{.............}]

once i select the patient from the dropdown display i would also need the id number

Can you please give an example of how to do this.
I'm not sure what I am missing.

Many thanks

Anthony.

[linb]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};

            append(
                (new linb.UI.ComboInput)
                .setHost(host,"ctl_comboinput2")
                .setLeft(220)
                .setTop(230)
                .setWidth(360)
                .setLabelCaption("ctl_comboinput2")
                .setType("listbox")
                .setItems([{"id":"a", "caption":"item a"}, {"id":"b", "caption":"item b"}, {"id":"c", "caption":"item c"}, {"id":"d", "caption":"item d"}])
                .afterUIValueSet("_ctl_comboinput2_afteruivalueset")
            );

            return children;
            // ]]code created by jsLinb UI Builder
        },
         _ctl_comboinput2_afteruivalueset : function (profile,oldValue,newValue){

           // the ‘newValue‘ is id
           linb.log(newValue);
           // You can get the item object like this:
           linb.log(profile.getItemByItemId(newValue));

        }
    }
});