Alter edit dialog window title

stuartsjb-icr

I'm trying to alter the edit window title dynamically so that it's set from a JavaScript variable. I have limited experience in using jQuery and am still unfamiliar with its syntax usage, so while there may be a way of doing this, I have not yet found it. Is it possible or can the title be set only once in the original Editor initialisation?

function enrolledModuleChange(moduleID, moduleTitle) {

//Change Panel Titles
    document.getElementsByClassName("moduleStudentsPanelHeader")[0].innerHTML = ': ' + moduleTitle;
    document.getElementsByClassName("moduleStudentsPanelHeader")[1].innerHTML = ': ' + moduleTitle;
    document.getElementsByClassName("moduleStudentsPanelHeader")[2].innerHTML = ': ' + moduleTitle;

    drawResultsTable(moduleID);

    $("#module-results").editor({
        i18n: {
            edit: {
                title: moduleTitle
            }
        }
    });
}

The code above results in a "Uncaught TypeError: undefined is not a function" error in Chrome for "#module-results", despite that being the correct id for the table.

Unfortunately the site is hosted on an intranet server so I'm unable to give a link to the page it's running on.

allan

Use the title() method to set the form title dynamically.

Allan

stuartsjb-icr

Thanks Allan. I have read that article but am still confused regarding how to change the title.

Should it simply be a matter of including editor.title(moduleTitle); within my JS function, or is it more involved?

allan

Exactly that.

You can try it on my demo pages (like this one):

1. Load the above page
2. Click the "New" button to show Editor
3. Open the console in your browser
4. Type: editor.title('Dynamic title'); and hit return

My demos have a global variable called editor which is why it works there (normally you wouldn't have a global variable, but I needed it for the demos to work correctly on the site!).

Allan

stuartsjb-icr

Thanks again. I think I have narrowed the issue down to that I was trying to set the title before the window appears. I've added the code to my initComplete option instead:

$('#module-results').dataTable({
            "ajax": {
                url: "../includes/EBR.php?moduleID=" + newModuleID,
                type: 'POST'
            },
            serverSide: "true",
            responsive: "true",
            "dom": "flitTp",
            "pagingType": "full",
            "columns": [
                {data: "Student.Surname"},
                {data: "Student.Forename"},
                {data: "Modules.ModuleShortTitle"},
                {data: "CourseParts.PartDescription"},
                {data: "ExamBoards.ExamBoard"},
                {data: "ExamBoardResults.MCQScore"},
                {data: "ExamBoardResults.OverallMark"},
                {data: "CourseWorkOutcomes.Outcome"}
            ],
            "tableTools": {
                sRowSelect: 'os',
                aButtons: [
                    {sExtends: 'editor_create', editor: editor},
                    {sExtends: 'editor_edit', editor: editor},
                    {sExtends: 'editor_remove', editor: editor}
                ]
            },
            initComplete: function (settings, json) {
                editor.field('ExamBoardResults.CWOutcomeID').update(json.CWOutcomes);
                editor.field('ExamBoardResults.ModuleID').update(json.ModuleCodes);
                editor.field('ExamBoardResults.ExamBoardID').update(json.ExamBoards);
                editor.field('ExamBoardResults.StudentID').update(json.Students);
                
                editor.on('initCreate', function (e, node, data) {
                    editor.show("ExamBoardResults.StudentID");
                    editor.show("ExamBoardResults.ModuleID");
                    editor.show("ExamBoardResults.ExamBoardID");
                    editor.show("ExamBoardResults.Notes");
                    editor.show("ExamBoardResults.CWOutcomeID");
                });
                
                editor.on('initEdit', function (e, node, data) {
                    editor.hide("ExamBoardResults.StudentID");
                    editor.hide("ExamBoardResults.ModuleID");
                    editor.hide("ExamBoardResults.ExamBoardID");
                    editor.title(moduleTitle);
                });
            }
        });

...and it's now working as expected. :)

allan

That looks like it should work to me. When you edit a row the title should be set to whatever moduleTitle is.

As a quick test I've just tried running the following code on this demo page:

editor.on( 'initEdit', function () {editor.title('My title');} )

When a row is selected for editing the title is set as expected.

Could you link to your page so I can try to debug it please?

Thanks,
Allan

stuartsjb-icr

Hi Allan, as I wrote at the end of my last post it is now working as expected, thanks for your help!

allan

Doh - I missed the last line... Good to hear it is working now!

Regards,
Allan