stevenp32 stevenp32 - 16 days ago 6
HTML Question

Can not get Codemirror textarea Values on multiple elements using js/jquery

I'm trying to get the values of my textarea codemirror to send in a json to the server to save them after edit, but I can't select the ELEMENT...I tried also getting the element by id...same thing. I get this:


Cannot read property 'value' of null


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://esironal.github.io/cmtouch/lib/codemirror.css">
<script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
<div><textarea class="yyyyyy232" id="scripttextarea_1"></textarea><button type="submit" class='yy4e' id='btn_1'>Save1</button></div>
<div><textarea class="yyyyyy232" id="scripttextarea_2"></textarea><button type="submit" class='yy4e' id='btn_2'>Save2</button></div>
<div><textarea class="yyyyyy232" id="scripttextarea_3"></textarea><button type="submit" class='yy4e' id='btn_3'>Save3</button></div>
<script>
$(document).ready(function() {
myTextarea=document.getElementsByClassName('yyyyyy232');
console.log($(myTextarea).length);

for (i=0;i<myTextarea.length;i++){

cm=CodeMirror.fromTextArea($(myTextarea[i])[0], {
mode: "python",
lineNumbers: true,
lineWrapping: true,
indentUnit: 4,
height: 400
});
};
});


$('.yy4e').on('click',function(e){
e.preventDefault();
ppp=$(this).attr('id').split('_')[1];
xx=document.getElementById("scripttextarea_"+ppp);

cm=CodeMirror.fromTextArea(xx).getValue();
console.log(cm);

$.getJSON('/edit_scripts',{
'command' : cm
},function(data){
console.log('edited');
})
});

</script>


Some help would really be great, as this problem is bugging me for some good hours. Thank you

Answer

$(document).ready(function() {
            myTextarea=document.getElementsByClassName("yyyyyy232");
            console.log($(myTextarea).length);
            var cm = new Array();
                 for (i=0;i<myTextarea.length;i++){

                    cm[i]=CodeMirror.fromTextArea($(myTextarea[i])[0], {
                        mode: "python",
                        lineNumbers: true,
                        lineWrapping: true,
                        indentUnit: 4,
                        height: 400
                    });
                };

                $(".yy4e").on("click",function(e){
                            e.preventDefault();
                            ppp=$(this).attr("id").split("-")[1];
                            numcode= parseInt(ppp)-1;
                             xx=$("#scripttextarea_"+ppp).attr("id");
                             console.log(xx);


                              var   Code=cm[numcode].getValue();
                                console.log(Code);

                          $.getJSON("/test",{
                               "command" : cm[numcode]
                           },function(data){
                               console.log("edited");
                            })
                        });


    });
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
        <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
        <link rel="stylesheet" href="http://esironal.github.io/cmtouch/lib/codemirror.css">
        <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
    <div><textarea class="yyyyyy232" id="scripttextarea_1"></textarea><button type="submit" class="yy4e" id="btn-1">Save1</button></div>
    <div><textarea class="yyyyyy232" id="scripttextarea_2"></textarea><button type="submit" class="yy4e" id="btn-2">Save2</button></div>
    <div><textarea class="yyyyyy232" id="scripttextarea_3"></textarea><button type="submit" class="yy4e" id="btn-3">Save3</button></div>
  

this is a working example of your code you have several problem one is mention above about btn name second on click out of document ready third you identify all code mirror as on value cm and it shall be array cm[] you need to call text area value by cm[] array number