typeahead this.$element.val(…).text is not a function

[GatekeeperParticipant]

I am using the EditDialog in the Scheduler

When the dialog is created:

var SaleEnquiryRefField = “<div>”;
SaleEnquiryRefField += “<div class=’typeahead jqx-scheduler-edit-dialog-label’>” + enquiryref + “</div>”;
SaleEnquiryRefField += “<div class=’jqx-scheduler-edit-dialog-field’><input name=\”SaleEnquiryRef\” id=\”SaleEnquiryRef\” style=\”display:inline;\” type=\”text\” value=\”\” data-provide=\”typeahead\” data-container=\”SaleEnquiryRef\” autocomplete=\”off\” data-url=\”” + getenquirylisturl + “\”></div>”;
SaleEnquiryRefField += “</div>”;

The typeadhead javascript code is:

$(“#SaleEnquiryRef”).typeahead({
source: function (query, process) {
var references = [];
map = {};

var url = $(“#SaleEnquiryRef”).data(“url”);

var formData = { searchText: query };

$.ajax({
type: “POST”,
url: url,
cache: false,
data: formData,
success: function (retval) {

if (retval.result === true) {

// Loop through and push to the array
$.each(retval.lstReference, function (i, item) {
map[item.reference] = item.reference;
//alert(contact.EmailAddress);
references.push(item.reference);
});

// Process the details
process(references);
}

},

error: function (data) {
console.log(“error Typeahead”);
if (data.errorMessage !== null) {
console.log(data.errorMessage);
$(‘#mainheader’).notify(data.errorMessage, { “status”: “danger”, “pos”: “top-right” });
}
}
});

},

}).jqxInput({ width: ‘99%’, height: 25 });

Which gives me an error when I select an item from the dropdown.
Any suggestions how I fix this?

[TodorParticipant]

Hello Gatekeeper,

It’s look like you’re using additional library for which we could not offer a support. Please try to use jqWidgets instead of this library and we would be able to help you.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[GatekeeperParticipant]

OK so I presume you mean use https://www.jqwidgets.com/community/topic/jqxinput-auto-complete-2/ ?
Using an ajax call to update the suggestions like this:

$.ajax({
type: “POST”,
url: url,
cache: false,
data: formData,
success: function (retval) {

if (retval.result === true && retval.list !== undefined) {

//What do I do here to update jqxinput with latest suggestions?

}

},

error: function (data) {
console.log(“error Typeahead”);
if (data.errorMessage !== null) {
console.log(data.errorMessage);
$(‘#mainheader’).notify(data.errorMessage, { “status”: “danger”, “pos”: “top-right” });
}
}
});

How do I update the jqxinput with latest list of suggestions?

[TodorParticipant]

Hello Gatekeeper,

You have to set the jqxInput’s source to the received data. Something like this $("#input").jqxInput({source: retval.list}).

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[GatekeeperParticipant]

Can you please put a simple working example asp.net core project on GitHub?

So far I have in the EditDialog Function but it does not work
My Ajax function is fine but $(“#SaleEnquiryRef”).on(‘select’, function (event) never gets fired.

var SaleEnquiryRefField = “<div>”;
SaleEnquiryRefField += “<div class=’typeahead jqx-scheduler-edit-dialog-label’>” + enquiryref + “</div>”;
SaleEnquiryRefField += “<div class=’jqx-scheduler-edit-dialog-field’><input name=\”SaleEnquiryRef\” id=\”SaleEnquiryRef\” style=\”display:inline;\” type=\”text\” value=\”\” data-container=\”SaleEnquiryRef\” data-url=\”” + getenquirylisturl + “\”></div>”;
SaleEnquiryRefField += “</div>”;

$(“#SaleEnquiryRef”).jqxInput(
{
width: ‘99%’,
height: 25,
displayMember: ‘display’,
valueMember: ‘reference’,
source: function (query, response) {

getReferenceList(query, response);
}
});

$(“#SaleEnquiryRef”).on(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $(“<div></div>”);
valueelement.text(“Value: ” + item.value);
var labelelement = $(“<div></div>”);
labelelement.text(“Label: ” + item.label);

$(“#SaleEnquiryRef”).children().remove();
$(“#SaleEnquiryRef”).append(labelelement);
$(“#SaleEnquiryRef”).append(valueelement);
}
}
});

function getReferenceList(query, response) {

var url = $(“#SaleEnquiryRef”).data(“url”);

var formData = { searchText: query };

$.ajax({
type: “POST”,
url: url,
cache: false,
data: formData,
success: function (retval) {

if (retval.result === true) {

/* eslint-disable new-cap */
var src = new $.jqx.dataAdapter({
datatype: ‘json’,
datafields: [
{ name: ‘code’, type: ‘string’ },
{ name: ‘reference’, type: ‘string’ },
{ name: ‘title’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘postcode’, type: ‘string’ },
{ name: ‘display’, type: ‘string’ }
],
localdata: retval.lstReference
});

$(“#SaleEnquiryRef”).jqxInput(
{
width: ‘99%’,
height: 25,
displayMember: ‘display’,
valueMember: ‘reference’,
source: src
});

/* eslint-enable new-cap */

return src;

}

},

error: function (data) {
console.log(“error Typeahead”);
if (data.errorMessage !== null) {
console.log(data.errorMessage);
$(‘#mainheader’).notify(data.errorMessage, { “status”: “danger”, “pos”: “top-right” });
}
}
});

}

[TodorParticipant]

Hello Gatekeeper,

Please check this example. It shows how to add new input to edit dialog. Also it shows how to handle change event on the input.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[GatekeeperParticipant]

So I tried the code below (and a few variations) and nothing works, as in I do NOT get a drop down list of autocomplete options.
I need to have a typeahead or autocomplete in the dialog that is used by your scheduler.
Setting the source to a dialog element does not seem to work.

$(‘#SaleEnquiryRef’).on(‘change’, function (event) {
map = {};

var url = $(“#resource-planner-actions”).data(“getenquirylisturl”);

var formData = { searchText: $(‘#SaleEnquiryRef’).val() };

$.ajax({
type: “POST”,
url: url,
cache: false,
data: formData,
success: function (retval) {

if (retval.result === true) {
var localdata = [];
// Loop through and push to the array
$.each(retval.lstReference, function (i, item) {
map[item] = item;
var ld = { reference: item.reference, display: item.display }
localdata.push(ld);
//alert(contact.EmailAddress);
//references.push(item.reference);
});

var src = new $.jqx.dataAdapter({
datatype: ‘array’,
datafields: [{
name: ‘display’,
type: ‘string’
}, {
name: ‘reference’,
type: ‘string’
}],
localdata: localdata
});

$(“#SaleEnquiryRef”).jqxInput({ source: src });
}

},

error: function (data) {
console.log(“error Typeahead”);
if (data.errorMessage !== null) {
console.log(data.errorMessage);
$(‘#mainheader’).notify(data.errorMessage, { “status”: “danger”, “pos”: “top-right” });
}
}
});
});

[TodorParticipant]

Hello Gatekeeper,

Please review the following example. It has custom jqxInput (row 130) with autocomplete in jqxScheduler.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[GatekeeperParticipant]

Hi Todor,

Finally I got it all working, Many Thanks!

I also had to add:

.jqx-validator-hint {
z-index: 9999999 !important;
}

To my CSS.
Observation when you validate and then scroll the dialog down the validation tip stays in the same place.

Is there any way to modify the width / height of the dialog?

[TodorParticipant]

Hello Gatekeeper,

You could do it with custom css like you did with jqx-validator-hint.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts