jQuery UI Widgets › Forums › Lists › ListBox › Create tooltip for each item
Tagged: jqxListBox, ListBox, renderer, title attribute, Tooltip
This topic contains 15 replies, has 2 voices, and was last updated by Nadezhda 9 years, 11 months ago.
-
Author
-
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,
SupunHello 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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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,
SupunHi 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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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,
SupunHi Supun,
You can display tooltips by setting the ‘title’ attribute of your items.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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,
SupunHi 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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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 errorTypeError: 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,
SupunHi Supun,
Could you, please, provide us a complete sample so we can determine the source of the issue.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thank you for your respond. below you can find complete code including php.
When I clickGet 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,
SupunHi 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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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,
SupunHi 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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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 ofdataAdapter.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 -
AuthorPosts
You must be logged in to reply to this topic.