Migrating from jquery/select2

[zli-programer]

Hi!

I have some serenity based legacy code (.net framework 4.8) that I am trying to migrate to new (@serenity-is/corelib": "8.3.1") version, and I have noticed some error(s) on lookups/filters/comboboxes on client side. It seems like they don't affect main functionality of the application, however this error (when user clicks on combobox) is bugging me:

Uncaught TypeError: el.hasChildNodes is not a function
    empty                                                                           fluent.ts:82
    callback                                                                        select2.ts:1943
    then                                                                            combobox.ts:109
    typeTimeout                                                                     combobox.ts:121
    setTimeout handler*createSelect2/select2Opt.query                               combobox.ts:95
    loadMoreIfNeeded                                                                select2.ts:1925
    callback                                                                        select2.ts:2122
    setTimeout handler*callback                                                     select2.ts:2122
    then                                                                            combobox.ts:109
    typeTimeout                                                                     combobox.ts:121
    setTimeout handler*createSelect2/select2Opt.query                               combobox.ts:95
    updateResults                                                                   select2.ts:2071
    opening                                                                         select2.ts:2321
    open                                                                            select2.ts:1638
    initContainer                                                                   select2.ts:2519
    jQuery 2
        dispatch
        handle

select2.ts is from https;//localhost/corelib/ui/editors/select2.ts

Striped down page (.cshtm) that produces error looks like this:

<div class="col-md-8">
    <label for="lookup_mm" class="control-label">title</label>
    <div style="width: 100%;" id="lookup_mm" name="lookup_mm"></div>
</div>

Serenity.Fluent.ready(
    function () {
        lookup_mm = new Serenity.LookupEditor({ element: "#lookup_mm",  lookupKey: "Module.MM})
    }
);

Row is defined as:

[LookupScript(Expiration = -1)]
public sealed class MMRow : Row<MMRow.RowFields>, IIdRow, INameRow

It is quite possible that I missed some steps because my base was very old version of serenity/serene, but I am hoping that someone will recognize that TypeError: el.hasChildNodes is not a function and give me some idea what I am missing or doing wrong.

Thank you Serenity Software (and all contributors) for making Serenity what it is today.

[VictorTomaili]

Check release notes https://serenity.is/docs/release-notes/8.2.1
The el object here is load more in select2 editor. And it is not HtmlElement for your case. I don't know why.
Your cshtml code looks like it has missing quote. Please check it.
Outdated version server codebase not supported by latest version of JavaScript library.

[zli-programer]

I checked release notes and didn't find solution, however it is still possible that I did miss something.
Missing quote in .cshml due to incomplete copy & paste. Quotes are ok in source, and my old server side source is updated to be compatible with Serenity 8.3.1 nuget packages. Retrive handler for MMRow is based on RetrieveRequestHandler and looks somewhat like this:

using MyRow = Module.MMRow;

public interface IMMRetrieveHandler : IRetrieveHandler<MyRow, RetrieveRequest, RetrieveResponse<MMRow>> { }
public class MMRetrieveHandler : RetrieveRequestHandler<MyRow, RetrieveRequest, RetrieveResponse<MMRow>>, IMMRetrieveHandler
{
    public MMRetrieveHandler(IRequestContext context) : base(context)
    {
    }
}

You are right about el object - at some point it becomes string "Loading more results…".
That happens after clicking on lookup, when there is more data to fetch. Seems like that at 9th call of Fluent.Empty() el is mentioned string "Loading more results…". In first 8 calls el is HtmlElement.

So, at 9th call (in my case) here is what happens:

select2.ts, line 1942:
var loadMore = evaluate(self.opts.formatLoadMore, self.opts.element, page + 1);

sets loadMode to the string "Loading more results…".
Then loadMore goes into Fluent.Empty(el) where .hasChildNodes() is called on string "Loading more results…".

export function empty(el: Element) {
        if (!el)
            return;

        if (el.hasChildNodes()) {
            let $ = getjQuery();
            if ($)
                $(el).empty();
            else {
                cleanContents(el);
                el.innerHTML = "";
            }
        }
        else
            el.innerHTML = "";
    }

That call ends in TypeError: el.hasChildNodes is not a function error.

[volkanceylan]

Select2 should be created on an input, not a div, might be the issue

[zli-programer]

Thank you for suggestion. I tested with input but the error is persistent.

    <div class="col-md-8">
        <label for="lookup_mm" class="control-label">title</label>
        <input type="text" style="width: 100%;" id="lookup_mm" name="lookup_mm">
    </div>

I tracked error a bit deeper, and now I can confirm that it is raised when there is additional data to load.
Error starts after data.more === true in select2.ts, line 1940.

                    if (data.more === true) {
                        results.appendChild(more);
                        var loadMore = evaluate(self.opts.formatLoadMore, self.opts.element, page + 1);
                        Fluent.empty(loadMore);
                        if (loadMore instanceof Node)
                            more.appendChild(loadMore);
                        else
                            more.textContent = loadMore ?? "";
                        window.setTimeout(function () { self.loadMoreIfNeeded(); }, 10);
                    } else {
                        more.remove();
                    }

I am guessing that error is related to self.opts.formatLoadMore which is set to the constant string that ends in Fluent.empty() where hasChildNodes on it is called. I have no idea how whole async fetch procedure should work, so there is no way for me to find what I am doing wrong.
So, if nobody has idea I'll wait for new serenity release and check if the same error happens with lookup on larger number of Customer or Product records.

Setting Serenity.Select2.defaults.formatLoadMore = null; bypasses the error.

[volkanceylan]

Hmm, it should be Fluent.empty(more), thanks