Invalid jQuery Selector – #SubjectCodeGroup!

[Staale EikebraatenParticipant]

Hi !

Another Invalid jQuery Selector error, which we dont understand…
The selector it referes to “#SubjectcodeGroup”, is defined in the html source, but still jqWidgets complains.
The error occured after upgrading to the latest jqWidgets release, but worked before.. Is it because the external JS-script ?? Is the loading sequence wrong ?? Or do you have any other ideas ??

Thanx
-=Staale=-

The HTML-code
——– Bundles.Reference(“~/Scripts/SkolePlanlegging/SkoleAr/NewGroup.js”,RenderScriptPageLocation.AfterCommonScripts.ToString());

<div class=”row”>
<div class=”span3″>
@(Resources.PlanleggingSkoleAr.Groups_TypeofGroup) <div id=”TypeofGroup”></div>
</div>
<div class=”span3″>
@(Resources.PlanleggingSkoleAr.Groups_SubjectcodeGroup)
<div id=”SubjectCodeGroup” data-bind=”jqxDropDownList: {selectedIndex: subjectcodegroupindex}”></div>
</div>
<div class=”span3″>
@(Resources.PlanleggingSkoleAr.Groups_Subjectcode)
<div id=”SubjectCode” data-bind=”jqxDropDownList: {selectedIndex: subjectcodeindex}”></div>
</div>
</div>

The JS-file
———-
function InitializeNewGroupPage(Fagkodegrupper, TypeofGroups, Groups_TypeofGroup_Choice, Groups_SubjectcodeGroup_Choice, GetClassesAndStudentsByGradeUrl, CreateGroupUrl, SkoleArId, GetSubjectCodesUrl, SkoleId) {

var srcFagkodeGrupper = {
localdata: $.parseJSON(Fagkodegrupper),
dataType: “json”,
datafields: [
{ name: ‘FagkodegruppeId’ }, { name: ‘FagkodegruppeNavn’ }
],
id: ‘FagkodegruppeId’,
cache: true
};
var srcTypeofGroups = {
localdata: $.parseJSON(TypeofGroups),
dataType: “json”,
datafields: [
{ name: ‘Id’ }, { name: ‘Title’ }, { name: ‘KreverEnkeltVedtak’, type: ‘bool’ }, { name: ‘Abbreviation’ }
],
id: ‘Id’,
cache: true
};

var dataAdapterTypeofGroup = new $.jqx.dataAdapter(srcTypeofGroups, { contentType: ‘application/json; charset=utf-8’ });
var dataAdapterFagkodeGrupper = new $.jqx.dataAdapter(srcFagkodeGrupper, { contentType: ‘application/json; charset=utf-8’ });

$(“#TypeofGroup”).jqxDropDownList({ source: dataAdapterTypeofGroup, displayMember: ‘Title’, valueMember: ‘Id’, selectedIndex: 0, width: ‘200px’, height: ’25px’ });
$(“#TypeofGroup”).jqxDropDownList(‘insertAt’, Groups_TypeofGroup_Choice, 0);
$(“#SubjectCodeGroup”).jqxDropDownList({ source: dataAdapterFagkodeGrupper, displayMember: ‘FagkodegruppeNavn’, valueMember: ‘FagkodegruppeId’, selectedIndex: 0, width: ‘200px’, height: ’25px’ });
$(“#SubjectCodeGroup”).jqxDropDownList(‘insertAt’, Groups_SubjectcodeGroup_Choice, 0);
$(“#SubjectCode”).jqxDropDownList({ displayMember: ‘Name’, valueMember: ‘Code’, selectedIndex: 0, width: ‘200px’, height: ’25px’ });

$(‘#SubjectCodeGroup’).on(‘select’, function (event) {
var args = event.args;
if (args) {
var group = args.item.value;
GetSubjectcodes(GetSubjectCodesUrl, SkoleId, group);
}
});
}

[Peter StoevKeymaster]

Hi Staale Eikebraaten,

The Error Message is obvious. There’s no such HTML Element at the moment when you try to select it with jQuery. It is not possible to create a widget, set a property or call a method, if the jQuery selection is Empty.
If the Error message is for “SubjectcodeGroup” and your element’s ID is “SubjectCodeGroup”, then you should fix the casing.

Best Regards,
Peter Stoev

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

[Author]

Posts