jQuery UI Widgets Forums Scheduler typeahead this.$element.val(…).text is not a function

This topic contains 9 replies, has 2 voices, and was last updated by  Todor 2 months, 2 weeks ago.

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

  • Gatekeeper
    Participant

    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?


    Todor
    Participant

    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


    Gatekeeper
    Participant

    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?


    Todor
    Participant

    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


    Gatekeeper
    Participant

    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” });
    }
    }
    });

    }


    Todor
    Participant

    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


    Gatekeeper
    Participant

    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” });
    }
    }
    });
    });


    Todor
    Participant

    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


    Gatekeeper
    Participant

    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?


    Todor
    Participant

    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

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

You must be logged in to reply to this topic.