jqwidgets listbox in Joomla - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chaining, Joomla, jqxListBox, ListBox

This topic contains 2 replies, has 2 voices, and was last updated by mephjl 11 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

jqwidgets listbox in Joomla Posts

October 21, 2012 at 5:53 pm jqwidgets listbox in Joomla #9797

mephjl

Member

I’m looking for implement your listbox with checkbox in a Joomla Component.

I’ve 2 problems :

FIRST
I need 3 listbox populates from database in the same page
I could to populate the first listbox with PHP json_decode, but the second must be populated from the first choices and the third from second choices.
Can I do this ? And How ?

SECOND
joomla components urls are like this :

http://www.SITE.COM/index.php?option=COM_COMPONENT&task=TASK

when I move the vertical scrollbar in a listbox browser return this error :

Error: Syntax error, unrecognized expression: .jqx-checkbox-option=com_component&task=task

Can I solve this problem ?

Excuse me for my English, I’m Italian.

October 22, 2012 at 5:59 am jqwidgets listbox in Joomla #9819

Dimitar

Participant

Hello mephjl,

Here is an example that illustrates chaining of jqxListBox widgets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery ListBox Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source1 = ["upper case", "lower case"];
                var source2_1 = ["A", "B"];
                var source2_2 = ["a", "b"];
                var source3_1 = ["A1", "A2"];
                var source3_2 = ["B1", "B2"];
                var source3_3 = ["a1", "a2"];
                var source3_4 = ["b1", "b2"];
                var source0 = ["Please choose an option from above"];
                // Create a jqxListBox
                $("#jqxlistbox1").jqxListBox({ source: source1, width: '250px', height: '80px' });
                $("#jqxlistbox2").jqxListBox({ source: source0, width: '250px', height: '80px' });
                $("#jqxlistbox3").jqxListBox({ source: source0, width: '250px', height: '80px' });
                $("#jqxlistbox1").bind('select', function (event) {
                    var item = event.args.item.value;
                    switch (item) {
                        case "upper case":
                            $("#jqxlistbox2").jqxListBox({ source: source2_1 });
                            break;
                        case "lower case":
                            $("#jqxlistbox2").jqxListBox({ source: source2_2 });
                            break;
                    };
                });
                $("#jqxlistbox2").bind('select', function (event) {
                    var item2 = event.args.item.value;
                    switch (item2) {
                        case "A":
                            $("#jqxlistbox3").jqxListBox({ source: source3_1 });
                            break;
                        case "B":
                            $("#jqxlistbox3").jqxListBox({ source: source3_2 });
                            break;
                        case "a":
                            $("#jqxlistbox3").jqxListBox({ source: source3_3 });
                            break;
                        case "b":
                            $("#jqxlistbox3").jqxListBox({ source: source3_4 });
                            break;
                    };
                });
            });
        </script>
        <div id='jqxlistbox1'>
        </div>
        <div id="jqxlistbox2">
        </div>
        <div id="jqxlistbox3">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 22, 2012 at 11:09 am jqwidgets listbox in Joomla #9842

mephjl

Member

ok, but this is the solution without queries in database.

the first table contains nations
the second table contains leagues
the third table contains soccer teams

this is the code for the first table

$db =& JFactory::getDBO();
$query = "SELECT * FROM #__sco_nazioni ORDER BY Nazioni ASC";
$db->setQuery( $query );
$nazionis = $db->loadObjectList();
$numnaz = count($nazionis);
for ($i=1; $i<$numnaz;$i++) {
	$nazioni = $nazionis[$i];
	if ($i == 1) {
		$naz = $nazioni->Nazioni;
	} else {
		$naz .= ",".$nazioni->Nazioni;
	}
}
$naz = explode(",",$naz);
array_unshift($naz,"TUTTE");
?>
<div id="content">
<script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                
				var source = <?php echo json_encode($naz);?>;
	
                // Create a jqxListBox
                $("#listbox").jqxListBox({ source: source, checkboxes: true, width: 200, height: 250, theme: theme });
                // Check several items.
                // $("#listbox").jqxListBox('checkIndex', 0);
                $("#listbox").bind('checkChange', function (event) {
                    var args = event.args;
                    if (args.checked) {
                        $("#Events").html("Hai selezionato : " + args.label);
                    }
                    else {
                        $("#Events").html("Hai deselezionato : " + args.label);
                    }
                    var items = $("#listbox").jqxListBox('getCheckedItems');
                    var checkedItems = "";
                    $.each(items, function (index) {
                        if (index < items.length - 1) {
                            checkedItems += this.label + ",";
                        }
                        else checkedItems += this.label;
                    });
                    $("#CheckedItems").text(checkedItems);
					document.getElementById("nazioni").value = document.getElementById("CheckedItems").innerHTML;
                });
            });
        </script>

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.