editor - function on change of select field

editor - function on change of select field

montoyammontoyam Posts: 568Questions: 136Answers: 5

I have a select field and a text box in an editor. When the user selects a value in the select box (TemplateID on change), then I want the text box to get a value (I guess I will need to do an ajax call to get this value.

Is this possible? I did an inspect on the editor field and saw the ID was:DTE_Field_SubmissionNotes-EmailTemplateID
so I tried this, but the alert didn't fire.

            $('#DTE_Field_SubmissionNotes-EmailTemplateID').change( function (e) {
                alert("yup");
            });

I am looking at different editor events but they all seem to be regarding the form, no field events.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2020

    I think you want to use dependent() for this.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5
    edited April 2020

    that link doesn't appear to be working but i found what I think you are talking about.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Fixed it, thanks :smile:

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    oooooh, this opens up a huge amount of potential. I have always wanted to do things where if 'Other' is selected, enable the 'Other' textbox so they can free type that other value.!!!

    Thank you for pointing me to this. There is so much to learn with dataTables. the trick is know what to look for. Luckily there is such great assistance here in the forums.

    But, now back to my original task of doing an ajax call. I will keep this question open for a bit while I experiement if you don't mind.

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    It looks like I will be using this, but before I start going down the ajax road, my select box has TemplateID for value and TemplateName for label. What I need to do is when they select a template, I need to populate another textbox in the editor with the value of a third field, TemplateText. I was going to do an ajax call to get the value of that field because I don't see any way of a select box having three fields, only the value and label, correct?

                            .Options(new Options()
                                        .Table("EmailTemplates")
                                        .Value("EmailTemplateID")
                                        .Label("TemplateName")
                            )
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    There is definitely lots to learn with Datatables. I learn something new all the time. Here is a simple dependent() example:
    https://editor.datatables.net/examples/api/dependentFields.html

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5
    edited April 2020

    Ok. I got it working, but it seems to fire even on open, not just for update of the field.

                SubmissionNotesEditor.dependent('SubmissionNotes.EmailTemplateID', function (val, data, callback) {
                    if (val != 0) {
                        $.ajax({
                            url: 'api/GetTemplateText?templateID=2',
                            dataType: 'json',
                            success: function (response) {
                                //alert(response.Table[0].TemplateText);
                                SubmissionNotesEditor.set('SubmissionNotes.EmailBody', response.Table[0].TemplateText);
                                //need this to now display in SubmissionNotes.EmailBody
                            }
                        });
                    }
                });
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Hmm, maybe dependent() is not the right answer for this. See if this thread helps.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    Yes, that did the trick. Odd, because I believe I read in the dependent documentation that by default only updates trigger this.

    So, the code below works perfectly. that function is a bit deceiving because it says .on('change') yet it triggers even on load of the page. and for some reason the !d in the example didn't seem to work, I had to use d===undefined. But, it works!! Thank you so much. Now I just need to figure out how to send emails in MVC.

                SubmissionNotesEditor.field('SubmissionNotes.EmailTemplateID').input().on('change', function (e, d) {
                    //console.log("D: " + JSON.stringify(d));
                    //console.log("E: " + JSON.stringify(e));
                    if (d === undefined) {
                        // The change was triggered by the end user on update rather than an auto set
                        var templateID = SubmissionNotesEditor.get('SubmissionNotes.EmailTemplateID');
                        var returnText = '';
                        if (templateID != 0) {
                            $.ajax({
                                url: 'api/GetTemplateText?templateID=' + templateID,
                                dataType: 'json',
                                success: function (response) {
                                    //console.log(JSON.stringify(response));
                                    returnText = response.Table[0].TemplateText;
                                    SubmissionNotesEditor.set('SubmissionNotes.EmailBody', returnText);
                                }
                            })
                        } else {
                            SubmissionNotesEditor.set('SubmissionNotes.EmailBody', returnText);
                        }
                    }
                });
    
This discussion has been closed.