Checkboxes in listbox without ticks

[MisterRomParticipant]

Hi,

I’m using Listbox control to display a list of areas where users can select one or more of them (checkboxes are allowed).
The listbox is displayed correctly, but with we click inside the checkbox of any line, no tick appears inside the checkbox.

I’ve tested if events were raised correctly.
I forced some lines to be checked, by CheckItem. It was worling fine (getCheckedItems was sending me values), but nothing was displayed on screen …

I doubled checked css and js files, all files are presents …

I’m really blocked and don’t know where may be the problem …
Please help …

[MartinParticipant]

Hello MisterRom,

Can you please, send your code, so I can take a look at it?
Thank you!

Best Regards,
Martin

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

[MisterRomParticipant]

Hi,

Thanks for your reply.

Code is in ASP, using SQL Server database, inside a .js file, included in the asp page in header section.
The final variable “MessageASP” is dispayed inside a div tag. An hidden textbox (ListeQuartiers) is receiving ID of all items checked, separated by ;.

<%
Dim ListeQuartiers
Dim Ok

‘ Insertion of listbox of quarters
MessageASP = “<div id=’lstQuartiers’></div>”
MessageASP = MessageASP + “<script>”
MessageASP = MessageASP + “var dsQuartiers = [”
‘ Création du tableau des points focaux
Set Enr = Server.CreateObject(“ADODB.Recordset”)
Enr.ActiveConnection = ConnexionDonnees
chaineSQL = “SELECT q.ID, l.Libelle as Localite, q.Libelle as Quartier ”
chaineSQL = chaineSQL + “from quartiers q inner join localites l on q.IDLocalite = l.ID ”
chaineSQL = chaineSQL + ” order by q.code”
Enr.Source = chaineSQL
Enr.CursorType = 0
Enr.CursorLocation = 2
Enr.LockType = 1
Enr.Open()

ListeQuartiers = “”
while (not Enr.EOF)
‘ add current quarter
MessageASP = MessageASP + “{IDQuartier:” & Enr(“ID”) & “, ”
MessageASP = MessageASP + “Localite:'” & Enr(“Localite”) & “‘, ”
MessageASP = MessageASP + “Quartier:'(” & Enr(“Localite”) & “) ” & Enr(“Quartier”) & “‘, ”
‘ check if current chief of area with ID, or adding new chief with ID not yet created
if ID>0 then
‘ check if quarter is allowed for this chief
chaineSQL = “select IDChefZone from quartiers_chefzone where IDQuartier = ” & Enr(“ID”)
chaineSQL = chaineSQL + “and IDChefZone = ” & ID
Ok = VerificationSQL(chaineSQL)
if Ok then
MessageASP = MessageASP + “Ok:1}, ”
ListeQuartiers = ListeQuartiers & Enr(“ID”) & “;”
else
MessageASP = MessageASP + “Ok:0}, ”
end if
else
‘ initial value not checked
MessageASP = MessageASP + “Ok:0}, ”
end if
‘ Suivant
Enr.MoveNext
wend
Enr.Close()
‘ remove last coma
if right(MessageASP, 2) = “, ” then
MessageASP = left(MessageASP, len(MessageASP)-2)
end if
MessageASP = MessageASP + “];”

‘ insert script for initialisation of the listbox
MessageASP = MessageASP + “$(‘#lstQuartiers’).jqxListBox({width:500, source:dsQuartiers, displayMember:’Quartier’, valueMember:’IDQuartier’, ”
MessageASP = MessageASP + “checkboxes:true, height:250});”
MessageASP = MessageASP + “for (h=0; h<dsQuartiers.length; h++) {”
MessageASP = MessageASP + ” if (dsQuartiers[h].Ok==1) {”
MessageASP = MessageASP + ” $(‘#lstQuartiers’).jqxListBox(‘checkIndex’, h);”
MessageASP = MessageASP + ” }”
MessageASP = MessageASP + “}”
MessageASP = MessageASP + “$(‘#lstQuartiers’).on(‘checkChange’, function (event) {”
MessageASP = MessageASP + ” var items = $(‘#lstQuartiers’).jqxListBox(‘getCheckedItems’);”
MessageASP = MessageASP + ” var checkedItems = ”;”
MessageASP = MessageASP + ” $.each(items, function (index) {”
MessageASP = MessageASP + ” if (index < items.length – 1) {”
MessageASP = MessageASP + ” checkedItems += this.value + ‘;'”
MessageASP = MessageASP + ” }”
MessageASP = MessageASP + ” else checkedItems += this.value + ”;”
MessageASP = MessageASP + ” });”
MessageASP = MessageASP + ” $(‘#ListeQuartiers’) = checkedItems;”
MessageASP = MessageASP + “});”
MessageASP = MessageASP + “</script>”
%>

Thanks again for your help.

[HristoParticipant]

Hello MisterRom,

I assume that you do not have any error message in the console?
It sounds like a CSS style issue and also, could you check for “check_black.png” file in this jqwidgets/style/images folder.
Could you provide us more details because this source code not refers to the jqxListBox directly (it is as a message)?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts