Having a bit of a nightmare getting a jQuery UI to load so that I can make a pop up with a suitelet. So far i've got a UE script that creates a sublist button linked to a client script and also loads a custom HTML file into an inlinehtml field that is added on beforeload, this HTML file contains links to the jquery ui file. In the client script i've got a fairly standard jQuery("#_add_dialog").dialog call that is aimed at the div added in the previous HTML file, however when activating the button that contains the dialog code I get the following error "bootstrap.js:184 Uncaught TypeError: jQuery(...).dialog is not a function". can anyone see an obvious mistake in that approach?

you would need to share your setup

This is my UE script that adds the button / field / html

if(scriptContext.type != scriptContext.UserEventType.VIEW) {
                scriptContext.form.clientScriptFileId = 44511;
                var list = scriptContext.form.getSublist('item');
                list.addButton({
                    id: 'custpage_add_po_items',
                    label: 'Add PO Items',
                    functionName: 'addPOItems'
                });

                const dialogHTMLField = scriptContext.form.addField({
                    id: 'custpage_jqueryui_add_dialog',
                    type: 'inlinehtml',
                    label: 'add po lines html field'
                });
                dialogHTMLField.defaultValue = file.load({
                    id: 'SuiteScripts/ContractPurchasing/dialoghtml.html'
                }).getContents();
            }

The contents of the HTML file:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="<https://code.jquery.com/ui/1.12.1/jquery-ui.js>"></script>
<div id="_add_dialog" title="Add dialog"></div>
<style type="text/css">
    .ui-dialog .ui-dialog-title {
        text-align: center;
        width: 100%;
    }
</style>

The Client script call

jQuery("#_add_dialog").dialog({
                    width: 400,
                    height: 450,
                    modal: true,
                    src: "<https://xxx-sb1.app.netsuite.com/app/site/hosting/scriptlet.nl?script=444&deploy=1>",
                    close: function () {
                       // $("#thedialog").attr('src', "about:blank");
                    }
                });

have you tried logging the contents of the file before setting, to make sure you are actually putting the correct value in the field

The contents of the html file are being loaded into the form successfully

the contents of the html and the code look reasonable

True, I wasn't sure what the consequences of loading in a more recent version of jQuery would do, so started with just UI for the dialog function

You could try adding a

type="text/javascript"

before the

src

inside the script tag, not sure that is really the problem

i personally stopped with the script tags

I don't suppose you would have an example of how that works? sounds better than this inline hacking

it allows you to add your own version of jQuery without playing with no conflict

I will have a read through the docs now