TechQA.

How to trigger onchange event in an IFrame mithril element when a codemirror editor in the srcdoc of the IFrame changes?

325 views Asked by At

Let's say I have a HTML called post.html that has a codemirror editor in it. the post.html looks something like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/mode/python/python.min.js"></script>
    </head>
    <body>
        <textarea id="editor">Hello World</textarea>
    </body>

<script>
window.onload = function () {
    var editor = CodeMirror.fromTextArea($("#editor")[0], {
        lineNumbers: true,
        lineWrapping: false,
    });

    editor.on('change', (editor) => {
        window.postMessage({'data': 'some data'}, '*')
        // somehow trigger the IFrames onchange event??
    });

}
</script>
</html>

I have a mithril IFrame element. The snippet for this looks something like

mithrilIFrame = {
    oncreate: function(vnode) {
        vnode.dom.addEventListener("message", function(event) {
              console.log("event found in listen!", event);
            });
    },

    view: function(vnode) {
        data.src = "post.html";
        data.onchange = myFunc;

        return m("iframe", data);
    }
};

myFunc = function(){
    // get the text from the codemirror editor and do something with it
}

Now, whenever new text is entered in the codemirror editor, I would like to trigger the onchange event in my mithril IFrame element that would grab the text in the codemirror editor and do something with this text. I know how to grab the text from the codemirror editor in the onchange event. But I cant figure out how to trigger the IFrame's onchange event every time something is changed in the editor.

The addEventListener in my mithril dom, does not seem to listen to the postMessage in triggered from the editors onchange. (I also tried window.parent.postMessage it did not help either).

Please help. I'm clueless. Also I'm no expert in js, jquery, or mithril, so please pardon any very stupid mistakes I might have made

javascript html jquery codemirror mithril.js
Original Q&A
1

There are 1 answers

1
nigh-knight On

The code in the script tags seem to be giving a SyntaxError, the error states SyntaxError: expected property name, got '{' this is because your Window.onload function has two opening brackets, and your CodeMirror.fromTextArea object, once again, has two opening brackets. The error was the reason why you can't trigger the onchange event every time you change something in the editor.

The code in the script tag should look like this

window.onload = windowLoad;

function () {
  var editor = CodeMirror.fromTextArea($("#editor")[0],{
  lineNumbers: true,
  lineWrapping: false,
  });

  editor.on('change', (editor) => {
    window.postMessage({'data': 'some data'}, '*')
  });
}

Now every time something changes window.postMessage gets called

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in CODEMIRROR

Related Questions in MITHRIL.JS

Popular Questions

Trending Questions