Question

Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.

Currently it does what I want when I open the page (i.e. the first time)…

function changeParent() {

    }

tinymce.create('tinymce.plugins.MoePlugin', {
            createControl: function(n, cm) {
                switch (n) {
                    case 'mylistbox':
                        var mlb = cm.createListBox('mylistbox', {
                            title: 'Inserts',
                            onselect: function(v) {
                                tinyMCE.execCommand("mceInsertContent",false,v);                                                                
                            }
                        });

                        <% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET 
                            yourobject = '<%= insert %>'; // This is JS AND .NET
                            mlb.add(yourobject, yourobject); // This is JavaScript
                        <% } %>                       

                        // Return the new listbox instance
                        return mlb;
                }
                return null;
            }
        });             


<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>

I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the ‘mylistbox’ object and reassign it, but am unsure how to put it all together.

Answer 1

Step 1 – Provide a JsonResult in your controller

    public JsonResult GetInserts(int containerId)
    {
        //some code to get list of inserts here 
        List<string> somedata = doSomeStuff();

        return Json(somedata);
    }

Step 2 – Create javascript function to get Json results

function getInserts() {
    var params = {};
    params.containerId = $("#184").val();
    $.getJSON("GetInserts", params, updateInserts);
};

updateInserts = function(data) {
    var insertsElem = document.getElementById("183_mylistbox");

    insertsElem.options.length = 1;  // Remove all but the first option.

    var optElem = document.createElement("option");
    for (var item in data) {
        optElem = document.createElement("option");
        optElem.value = item;
        optElem.text = data[item];

        try {  
            insertsElem.add(optElem, null); // standards compliant browsers  
        }  
        catch(ex) {  
            insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list) 
        }
    }
};

Step 3 – Create NativeListBox (code above provided by ZoogieZork above)

var mlb = cm.createListBox('mylistbox', {
    title: 'Inserts'
}, tinymce.ui.NativeListBox);

// Set our own change handler.
mlb.onPostRender.add(function(t) {
    tinymce.dom.Event.add(t.id, 'change', function(e) {
        var v = e.target.options[e.target.selectedIndex].value;
        tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
        e.target.selectedIndex = 0;
    });
});

//populate inserts on listbox create
getInserts();