Checkboxes - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript listbox, jQuery ListBox, ListBox

This topic contains 9 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 9 months ago.

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

Author

Checkboxes Posts

December 23, 2011 at 5:18 pm Checkboxes #1468

Member

Hi,

I try to create a ListBox with Checkboxes, but it does not work correctly. the checkboxes are not displayed and the scrollbar is not converted into the new layout. where is the fault in my code:

$(document).ready(function() {
$(“#Select”).jqxListBox({ checkboxes: true, width: ‘150’, height: ‘150’, theme: ‘base’, scrollBarSize: 10});
$(‘#submit’).jqxButton({ theme: “base” });
$(‘#reset’).jqxButton({ theme: “base” });
$(‘#htmlForm’).ajaxForm({
target: ‘#msg’
});
});

Ἀμφισσεύς
Δελφὸς
Βοήθωι
Λιλαιεὺς
Ἀμφισσεύς
Δελφὸς
Βοήθωι
Λιλαιεὺς
Ἀμφισσεύς
Δελφὸς
Βοήθωι
Λιλαιεὺς

heartfelt thanks in advance.

December 23, 2011 at 5:36 pm Checkboxes #1472

Liquemin

Member

here is the rest of my code, sorry:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="js/jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript">
		$(document).ready(function() { 
			$("#Select").jqxListBox({ checkboxes: true, width: '150', height: '150', theme: 'base', scrollBarSize: 10});
			$('#submit').jqxButton({ theme: "base" }); 
			$('#reset').jqxButton({ theme: "base" }); 
			$('#htmlForm').ajaxForm({
					target: '#msg'
			});
		}); 
 	</script>	
</head>
<body>
<div id='jqxWidget'>
	<form id="htmlForm" action = "checkbox007.php" method = "post">
			<select id="Select" multiple="multiple" name="zusatz[]" >
				<option value='Ἀμφισσεύς%'> Ἀμφισσεύς</option>
				<option value='Δελφὸς%'> Δελφὸς</option>
				<option value='Βοήθωι%'> Βοήθωι</option>
				<option value='Λιλαιεὺς%'> Λιλαιεὺς</option>
				<option value='Ἀμφισσεύς%'> Ἀμφισσεύς</option>
				<option value='Δελφὸς%'> Δελφὸς</option>
				<option value='Βοήθωι%'> Βοήθωι</option>
				<option value='Λιλαιεὺς%'> Λιλαιεὺς</option>
				<option value='Ἀμφισσεύς%'> Ἀμφισσεύς</option>
				<option value='Δελφὸς%'> Δελφὸς</option>
				<option value='Βοήθωι%'> Βοήθωι</option>
				<option value='Λιλαιεὺς%'> Λιλαιεὺς</option>
			</select>
			<input id='submit' type="submit" />
			<input id='reset' type="reset" />	
	</form>
</div>
<div id="msg">
</div>
</body>
</html>

December 24, 2011 at 8:31 pm Checkboxes #1487

support

Participant

Hi Liquemin,

jqxListBox is initialized from DIV element. It cannot be initialized from Select element, but it can load the items of a Select element.

Here’s the modified source code:

<div id='content'>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxlistbox").jqxListBox({ checkboxes: true, width: '150', height: '150', theme: '', scrollBarSize: 10 });
            $("#jqxlistbox").jqxListBox('loadFromSelect', 'Select');
            $('#submit').jqxButton({ theme: "" });
            $('#reset').jqxButton({ theme: "" });
        });
    </script>
    <div id='jqxWidget'>
        <div id='Div1'>
            <form id="htmlForm" action="checkbox007.php" method="post">
            <div id="jqxlistbox"></div>
            <select id="Select" style="display:none" multiple="multiple" name="zusatz[]">
                <option value='Ἀμφισσεύς%'>Ἀμφισσεύς</option>
                <option value='Δελφὸς%'>Δελφὸς</option>
                <option value='Βοήθωι%'>Βοήθωι</option>
                <option value='Λιλαιεὺς%'>Λιλαιεὺς</option>
                <option value='Ἀμφισσεύς%'>Ἀμφισσεύς</option>
                <option value='Δελφὸς%'>Δελφὸς</option>
                <option value='Βοήθωι%'>Βοήθωι</option>
                <option value='Λιλαιεὺς%'>Λιλαιεὺς</option>
                <option value='Ἀμφισσεύς%'>Ἀμφισσεύς</option>
                <option value='Δελφὸς%'>Δελφὸς</option>
                <option value='Βοήθωι%'>Βοήθωι</option>
                <option value='Λιλαιεὺς%'>Λιλαιεὺς</option>
            </select>
            <input id='submit' type="submit" />
            <input id='reset' type="reset" />
            </form>
        </div>
        <div id="msg">
        </div>
    </div>
</div>

As you can see, I created a new DIV element with id = “jqxlistbox” and passed this id to the jqxListBox constructor. I also loaded the items from the Select element into the ListBox and set its Display to none.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 27, 2011 at 10:45 am Checkboxes #1500

Liquemin

Member

Hi Peter,

thankyou for your prompt response. because the form.js not work anymore, so I try to recreate the form-element using jQWidgets. But it does’nt works.
First: the Reset-Button. It works, but I find it cumbersome to write for every checkbox an uncheckIndex. Is there a better code?
Second: my code to bind the submit-button on the select-box it does’nt works, however to contact my database.
Can you help me. Forgive me my dilettantism, I’m a rookie in jQuery.

Here is my code:
<code><!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="js/jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxcheckbox.js"></script>
	
	<script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    {label: "Ἀμφισσεύς", value: 'Ἀμφισσεύς%'},
                    {label: "Δελφὸς", value: 'Δελφὸς%'},
                    {label: "Βοήθωι", value: 'Βοήθωι%'},
                    {label: "Λιλαιεὺς", value: 'Λιλαιεὺς%'},
                     ];
                
                $("#jqxListBox").jqxListBox({ source: source, checkboxes: true, multiple: true, width: '150', height: '250', theme: 'base', scrollBarSize: 10, enableSelection: false});
				$("#jqxSubmitButton").jqxButton({ width: '150', height: '25', theme: 'base'});
				$("#jqxResetButton").jqxButton({ width: '150', height: '25', theme: 'base'});
				$('#jqxListBox').bind('select', function (event) {
						var args = event.args;
						var item = $('#jqxListBox').jqxListBox('getItem', args.index);
						// get value
						var value = item.value;
						});
				$("#jqxSubmitButton").bind('click', function () {
						$.ajax({
							type: "POST",
							url: "checkbox007.php",
							data: value,
							dataType:'json',
							success: function(){
							$('#msg').fadeIn(200).show();
							}
						});
				});
				$("#jqxResetButton").bind('click', function () {
                    $("#jqxListBox").jqxListBox('clearSelection');
					$("#jqxListBox").jqxListBox('uncheckIndex', 0);
					$("#jqxListBox").jqxListBox('uncheckIndex', 1);
					$("#jqxListBox").jqxListBox('uncheckIndex', 2);
					$("#jqxListBox").jqxListBox('uncheckIndex', 3);
				});
			});
        </script>
	
</head>
<body>
	
		<div id='jqxListBox'>
		</div>
		<div> 
			<input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton'/>
        </div>
		<div>
            <input style='margin-top: 20px;' type="reset" value="Reset" id='jqxResetButton' />
        </div>
	
	<div id="msg">
	</div>
	 
</body>
</html></code>

December 28, 2011 at 7:33 am Checkboxes #1509

support

Participant

Hi Liquemin,

To uncheck all items and clear the selection, you can use the following code:

var itemslength = $("#jqxWidget").jqxListBox('items').length;
for (i = 0; i < itemslength; i++) {
    $("#jqxWidget").jqxListBox('uncheckIndex', i, false);
}
$("#jqxWidget").jqxListBox('clearSelection', true);

I did not understand the second part of your question. What do you mean by “my code to bind the submit-button on the select-box it does’nt works, however to contact my database”? The button’s click callback function is not executed or the ajax call is not working as expected?

	$.ajax({
			type: "POST",
			url: "checkbox007.php",
		        data: value,
			dataType:'json',
	                success: function(){
			      $('#msg').fadeIn(200).show();
			}
	});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 29, 2011 at 7:44 pm Checkboxes #1520

Liquemin

Member

Hi Peter,

in my first post you can see that I’ve created a form element, to send a certain selection to a php.Datei (checkbox007.php) that my database queries and then sends a result to div id = “msg”. I realized this with form.js, but that does not work anymore, so I tried to program it yourself – without success, so the ajax call is not working as expected

$('#jqxListBox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxListBox').jqxListBox('getItem', args.index);
// get value
var value = item.value;
});
$("#jqxSubmitButton").bind('click', function () {
$.ajax({
type: "POST",
url: "checkbox007.php",
data: 'value',
dataType:'json',
success : function(data){
		$(#'msg').text(data);
}
});

can you explain me where is my fault.

Best regards,
Liquemin.

December 30, 2011 at 1:11 am Checkboxes #1522

Peter Stoev

Keymaster

Hi Liquemin,

Could you explain what are the expected results? According to us, the result of this code is the selected item’s value:

$('#jqxListBox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxListBox').jqxListBox('getItem', args.index);
var value = item.value;
});

In the ajax call you are passing a ‘value’ string as data. However, I suppose that you need to pass the selected item’s value as data. Is that correct?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 1, 2012 at 2:04 pm Checkboxes #1536

Liquemin

Member

Hi Peter,

However, I suppose that you need to pass the selected item’s value as data–>correct. I want the items that I checked, send with the ajax-call to the php file. And then I want to display the result in #msg, without the page reloading.

Best regards,
Liquemin.

January 10, 2012 at 9:39 pm Checkboxes #1633

Liquemin

Member

Hi Peter,

I had some time ago you described my problem. But unfortunately I have not received a reply. That’s why I want to politely ask if you could perhaps employ you again with my problem.

Best regards,
Liquemin.

January 11, 2012 at 2:50 pm Checkboxes #1657

Peter Stoev

Keymaster

Hi Liquemin,

I am not sure what the problem is from your code and our communication. I would like to ask you to send us a sample project which reproduces the reported issue and we will try to test and debug it. You can send the sample to support@jqwidgets.com.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.