jQuery UI Widgets Forums Lists ListBox Create tooltip for each item

This topic contains 15 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • Create tooltip for each item #68678

    supun151515
    Participant

    Hello friends,
    I have json bind datasource with fields(username, fullname, mobile). I want to set to
    ValueMember = username
    DisplayMember = fullname
    ToolTip = mobile
    Kindly explain me, how to render this with jqxListBox.

       $(document).ready(function () {
                    var url = "css/user_list.php";
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'username' },
                            { name: 'fullname' },
                            { name: 'mobile'}
                        ],
                        id: 'id',
                        url: url
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // Create a jqxListBox
                    $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "fullname", valueMember: "username", width: 200, height: 250});
                    $("#jqxWidget").on('select', function (event) {
                        if (event.args) {
                            var item = event.args.item;
                            if (item) {
                                var valueelement = $("<div></div>");
                                valueelement.text("Value: " + item.value);
                                var labelelement = $("<div></div>");
                                labelelement.text("Label: " + item.label);
                                $("#selectionlog").children().remove();
                                $("#selectionlog").append(labelelement);
                                $("#selectionlog").append(valueelement);
                            }
                        }
                    });
                });

    Thank You,
    Supun

    Create tooltip for each item #68683

    Nadezhda
    Participant

    Hello Supun,

    Please, provide us with more information about your datafields. Do you want to achieve something like this:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/categories.htm?arctic with displayed username,full name and mobile?

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #68689

    supun151515
    Participant

    Hi Nadezhda,
    Thank you for your reply. I want to display mobile as tooltip when I hover mouse on each item in listbox. I have given you example, it is working and only I need to add hover tooltip for each item.

    Regards,
    Supun

    Create tooltip for each item #68724

    Nadezhda
    Participant

    Hi Supun,

    You can display simple tooltips by setting the “content” property of an item. Please, take a look at the Default Functionality Tooltip demo.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #68750

    supun151515
    Participant

    Hi Nadezhda,
    I don’t understand your answer. Here I am not talking about jqxtooltip widget…!!!!!!!!!!!!!!!!
    Please try to understand my question…. I want to display tooltip on jqxlistbox each item as I shown on first post.

    Thank You,
    Supun

    Create tooltip for each item #68798

    Nadezhda
    Participant

    Hi Supun,

    You can display tooltips by setting the ‘title’ attribute of your items.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #68829

    supun151515
    Participant

    Hi Nadezhda,
    Thank you for your answer. Still I am unable to figure it out. Kindly send me a short example followed by my first post.

    Best Regards,
    Supun

    Create tooltip for each item #68843

    Nadezhda
    Participant

    Hi Supun,

    Please, find the following example where all listbox items have title attribute.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Country' },
                        { name: 'ContactName' },
                        { name: 'City' }
                    ],
                    id: 'id',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({
                    source: dataAdapter,
                    displayMember: "ContactName",
                    valueMember: "Country",
                    width: 400,
                    height: 250,
                    renderer: function (index, label, value) {
                        var datarecord = this.source.records[index];                  
                        var table = '<table style="min-width: 150px;" title=' + datarecord.City + '><tr><td>' + datarecord.ContactName + ", " + datarecord.Country + '</td></tr></table>';
                        return table;
                    }
                });
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #68913

    supun151515
    Participant

    Hi Nadezhda,
    Very big thank for your kind corparation. It is working fine. but when I render it for second time, it gives me an error

    TypeError: datarecord is undefined
    var table = '<table style="min-width: 150px;" title=' + datarecord.auto_no + '><...

    I am calling jqxlistbox with a below function and get values according to given input value;

    
    function Get_Default_Values(data_value){
        
        $("#loading").show();
        $('#default_list').jqxListBox({ disabled: true }); 
                    var url = "css/default_values.php?value=" + data_value;
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'auto_no' },
                            { name: 'c_value' },
                            { name: 'c_val' }
                                    ],
                        id: 'id',
                        url: url
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // Create a jqxListBox
                    $("#default_values").jqxListBox({ source: dataAdapter,
                                                      displayMember: "c_value",
                                                      valueMember: "c_val",
                                                      width: 150,
                                                      height: 230,
                                                      renderer: function (index, label, value) {
                        var datarecord = this.source.records[index];                  
                        var table = '<table style="min-width: 150px;" title=' + datarecord.auto_no + '><tr><td>' + datarecord.c_value + ", " + datarecord.c_val + '</td></tr></table>';
                        return table;
                    }
                                                  });
                    
    
                    $("#default_values").on('select', function (event) {
                        if (event.args) {
                            var item = event.args.item;
                            if (item) {
                                var valueelement = $("<div></div>");
                                valueelement.text("Value: " + item.value);
                                var labelelement = $("<div></div>");
                                labelelement.text("Label: " + item.label);
                                $("#default_text").val(item.label);
                            }
                        }
                    });
    
    $("#default_values").on('bindingComplete', function (event) {
          $('#default_list').jqxListBox({ disabled: false });
          $("#loading").hide();
      });
    
     
    }

    Hope you understand my issue.
    Thank you,
    Supun

    Create tooltip for each item #68965

    Nadezhda
    Participant

    Hi Supun,

    Could you, please, provide us a complete sample so we can determine the source of the issue.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #68971

    supun151515
    Participant

    Hi Nadezhda,
    Thank you for your respond. below you can find complete code including php.
    When I click Get Data button for the first time, it is working. but after that it returns above error.

    index.php

    <!doctype html>
    <?php require_once("../lib/Main_menu.php"); ?>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Default Inputs</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../lib/css/jquery-ui.css" />
    <link href="../lib/bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../lib/css/jqx/jqx.base.css" />
    
    <script src="../lib/java/jquery-2.1.3.js"></script>  
    <script src="../lib/bootstrap-3.3.2-dist/js/bootstrap.js">
    <script src="../lib/java/jquery-ui.min.js"></script>
    <script src="../lib/java/jqx-all.js"></script>
    <script src="css/defaults.js"></script>
    
    <script>
    $(document).ready(function(){
    
    $("#getdata").click(function(){
    Get_Default_Values($("#d_text").val());
    });
    
    });
    
    </head>
    <body>
    <input type="text" id="d_text" />
    <input type="button" id="getdata" value="Get Data" />
    <div class="abs" style="left:170px; top:40px;" id="default_values">
    </div>
    <input type="text" id="default_text" />
    </body>
    </html>
    '
    
    defaults.js
    

    function Get_Default_Values(data_value){
    var url = “css/default_values.php?value=” + data_value;
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘auto_no’ },
    { name: ‘c_value’ },
    { name: ‘c_val’ }
    ],
    id: ‘id’,
    url: url,
    type:’POST’
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxListBox
    $(“#default_values”).jqxListBox({ source: dataAdapter,
    displayMember: “c_value”,
    valueMember: “c_value”,
    width: 150,
    height: 230,
    renderer: function (index, label, value) {
    var datarecord = this.source.records[index];
    var table = ‘<table style=”min-width: 150px;” title=’ + datarecord.auto_no + ‘><tr><td>’ + datarecord.c_value + “, ” + datarecord.c_val + ‘</td></tr></table>’;
    return table;
    }
    });

    $(“#default_values”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $(“<div></div>”);
    valueelement.text(“Value: ” + item.value);
    var labelelement = $(“<div></div>”);
    labelelement.text(“Label: ” + item.label);
    $(“#default_text”).val(item.label);
    }
    }
    });
    }`

    css/default_values.php

    <?php
    include('../../lib/php/db.php');
    if(!isset($_GET['value'])){
    	echo "Error";
    	return false;
    }
    $data_value = $_GET['value'];
    $result = mysqli_query($con, "SELECT SUBSTRING_INDEX(c_value, ',', 1) as c_val, SUBSTRING_INDEX(c_value, ',', -1) as c_value, auto_no as auto_no FROM <code>default_values</code> where category = '" .$data_value. "' order by c_value");
     
    //Add all records to an array
    $rows = array();
    while($row = mysqli_fetch_array($result))
    {
        $rows[] = $row;
    }
     
    //Return result to jTable
    $jTableResult = array();
    //$jTableResult['Result'] = "OK";
    $jTableResult = $rows;
    print json_encode($jTableResult);
    
    ?>

    Best Regards,
    Supun

    • This reply was modified 9 years, 3 months ago by  supun151515.
    Create tooltip for each item #68994

    Nadezhda
    Participant

    Hi Supun,

    Here is an example which shows how to re-set ‘renderer’ callback function by click on the Get data button instead call Get_Default_Values method. I hope it would be helpful.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Country' },
                        { name: 'ContactName' },
                        { name: 'City' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({
                    source: dataAdapter,
                    displayMember: "ContactName",
                    valueMember: "Country",
                    width: 400,
                    height: 250,
                    renderer: function (index, label, value) {
                        var datarecord = this.source.records[index];
                        var table = '<table style="min-width: 150px;" title=' + datarecord.City + '><tr><td>' + datarecord.ContactName + ", " + datarecord.Country + '</td></tr></table>';
                        return table;
                    }
                });
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
                $("#getdata").jqxButton({ width: '150' });
                $("#getdata").click(function () {
                    $('#jqxWidget').jqxListBox({
                        renderer: function (index, label, value) {
                            var datarecord = this.source.records[index];
                            var table = '<table style="min-width: 150px;" title=' + datarecord.City + '><tr><td>' + datarecord.ContactName + ", " + datarecord.Country + '</td></tr></table>';
                            return table;
                        }
                    });
    
                });
    
            });
        </script>
    </head>
    <body>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
        <input type="button" id="getdata" value="Get Data" />
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #69025

    supun151515
    Participant

    Hi Nadezhda,
    As you see, I am generating jqxlistbox according to input text. I am calling Get_Default_Values(input_text) function. Then mysql query search for input_text and generate data.
    You can see my code has url in defaults.js –> var url = “css/default_values.php?value=” + data_value; this data_value(input_text) change in every getdata button click.
    But in your example, url is fixed and not changing.

    Bottom line is I want to filter mysql data with user input value and retrieve data to jqxlistbox.

    Hope you understand,
    Thank You,
    Supun

    Create tooltip for each item #69069

    Nadezhda
    Participant

    Hi Supun,

    Here is an example which shows how to set different url, Data Adapter is bound to the new url and jqxListBox is initialized with the new data.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Country' },
                        { name: 'ContactName' },
                        { name: 'City' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
    
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({
                    source: dataAdapter,
                    displayMember: "ContactName",
                    valueMember: "Country",
                    width: 400,
                    height: 250,
                    renderer: function (index, label, value) {
                        var datarecord = this.source.records[index];
                        var table = '<table style="min-width: 150px;" title=' + datarecord.City + '><tr><td>' + datarecord.ContactName + ", " + datarecord.Country + '</td></tr></table>';
                        return table;
                    }
                });
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
                $("#getdata").jqxButton({ width: '150' });
                $("#getdata").click(function () {
                        source.url = "../sampledata/customers2.txt";
                        dataAdapter.dataBind();
    
                        $("#jqxWidget").jqxListBox({
                            source: dataAdapter,
                            displayMember: "ContactName",
                            valueMember: "Country",
                            width: 400,
                            height: 250,
                        });           
                });
            });
        </script>
    </head>
    <body>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
        <input type="button" id="getdata" value="Get Data" />
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Create tooltip for each item #69134

    supun151515
    Participant

    Hello Nadezhda,
    i really thankful for your help. It is working perfect as I expected.
    I have small question regarding your above code;
    What is the use of dataAdapter.dataBind();? Because of this code line, server data is requesting two times. Then I have removed this line. it is still working fine without any problem.
    Am I supposed to keep this code?

    I really appreciate your answer…

    Thank You,
    Supun

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.