CODEWITHSUNDEEP
javascriptjqueryhtmlcodemirror
stevenp32
stevenp32

Reputation: 3

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

Upvotes: 0

Views: 1421

Answers (2)

Jehad Ahmad Jaghoub
Jehad Ahmad Jaghoub

Reputation: 1383

$(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

Upvotes: 2

Anson
Anson

Reputation: 489

Check here:

ppp=$(this).attr('id').split('_')[1];

And see here:

<div>
    <textarea class="yyyyyy232" id="scripttextarea_1"></textarea>
    <button type="submit" class='yy4e' id='btn1'>Save1</button>
</div>

btn1 could not be split by '_' and it will be fine that you replace btn1 to bth_1.

Remind: You may try to print out the value step by step by yourself first.

Upvotes: 0

Related Questions