jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ListBox › Listbox Focus

Tagged: 

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Listbox Focus Posts
  • July 1, 2015 at 11:29 am Listbox Focus #73244

    DaMentalOne
    Participant

    Hi Guys,

    On the demo for Filtering the Listbox, could you please advise how to set focus to the text entry field on page load?

    I know how to set focus to the Listbox itself, but this only seems to be the listbox items.

    Any help would be appreciated.

    Heres my code:

    <!DOCTYPE html>
<html lang="en">
<head>
	<script>
		resizeTo(350,460);
	</script>
<HTA:APPLICATION 
		APPLICATIONNAME="SDPhoneBook"
		Border = Thin
		BorderStyle = Raised
		ShowInTaskBar = Yes
		MaximizeButton = No
		MinimizeButton = Yes
		WindowState = Normal
		SingleInstance = Yes
		Scroll = No
		ContextMenu = No
>

    <title id='Description'>Test</title>
    <link rel="stylesheet" href="JQW\jqwidgets\styles\jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="jqw/jqwidgets/styles/jqx.arctic.css" type="text/css" />
	<link rel="stylesheet" href="jqw/jqwidgets/styles/jqx.classic.css" type="text/css" />
	<link rel="stylesheet" href="jqw/jqwidgets/styles/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="jqw\scripts\jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqw\jqwidgets\jqxcore.js"></script>
    <script type="text/javascript" src="jqw\jqwidgets\jqxdata.js"></script>
	<script type="text/javascript" src="jqw/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqw/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqw/jqwidgets/jqxlistbox.js"></script>
    
	
	
    <script type="text/javascript">
		window.arrUsers = [];
		window.arrDetails = [];
				
		function setFocus(){
			$('#listbox').jqxListBox('focus');
		}
		
	
        $(document).ready(function () {
            var url = 'PBook.csv';
			

            var source = 
            {
                datatype: "csv",
                datafields: [
                    { name: 'ADDN', type: 'string' },
					{ name: 'Name', type: 'string' },
                    { name: 'EXTN', type: 'integer' },
                    { name: 'Dept', type: 'string' }
                ],
                url: url,
				async: false 
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { 
                loadComplete: function () {
                    // get data records.
                    var records = dataAdapter.records;
                    // get the length of the records array.
                    var length = records.length;
                    // loop through the records and display them in a table.

                    for (var i = 0; i < records.length; i++) {
                        var record = records[i];
						var strUsers = record["ADDN"];
						var strDetails = record["Name"] + "<br>" + record["EXTN"] + "<br>" + record["Dept"];
						
						window.arrUsers.push(strUsers)
						window.arrDetails.push(strDetails)
                    }
					var html = "Please Type A Name:";
                    $("#table").html(html);
					
                },
                loadError: function (jqXHR, status, error) {
                },
                beforeLoadComplete: function (records) {
				
                }
            });
            // perform data binding.
            dataAdapter.dataBind();
			
			// Create jqxListBox
            $('#listbox').jqxListBox({
                filterable: true, selectedIndex: 0, source: window.arrDetails, itemHeight: 90, height: 300, width: 300, theme: 'fresh',
                renderer: function (index, label, value) {
                    var datarecord = window.arrUsers[index];
                    var imgurl = 'ADUL/ADimages/' + datarecord.toLowerCase();
                    var img = '<img height="70" width="70" src="' + imgurl + '"/>';
                    var table = '<table style="min-width: 130px;"><tr><td style="width: 80px;">' + img + '</td><td>' + label + '</td></tr></table>';
                    return table;
                }
            });
            $("#clearFilter").jqxButton({theme: 'arctic', width: 300});
            $("#clearFilter").click(function () {
                $('#listbox').jqxListBox('clearFilter');
            });
			
        });
    </script>
</head>
<body class='default' onload="setFocus()">
		<center>
			<div id="table">
				Loading...
			</div>
			
			<div id="listbox">
			</div>
			<br />
			<button id="clearFilter">Clear Filter</button>
		</CENTER>
</body>
</html>
    July 1, 2015 at 11:30 am Listbox Focus #73245

    DaMentalOne
    Participant

    Please note: The code above does what I want it to by loading a csv via the datadaptor into the listbox.

    July 1, 2015 at 11:49 am Listbox Focus #73247

    ivailo
    Participant

    Hi DaMentalOne,

    Like a workaround use $('#filterlistbox input').focus(); instead $('#listbox').jqxListBox('focus');.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    July 1, 2015 at 12:26 pm Listbox Focus #73252

    DaMentalOne
    Participant

    As easy as that?

    Nice one! Thanks! 🙂

    DMO

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.