Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. [Answered]RSS

1 reply

Last post Mar 09, 2020 08:36 AM by yij sun

‹ Previous Thread|Next Thread ›

Shortcuts

Programming...

Member

16 Points

31 Posts

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Mar 07, 2020 10:09 AM|Programming and Design|LINK

I have list which is display using web method in asp.net c#. The list gets display perfectly fine. Now what i want is when i am trying to use/drag that value and drop is some other place it shows me error.

<script type="text/javascript">
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }

    function dragging(event) {
        //    document.getElementById("demo").innerHTML = "The p element is being dragged";
    }
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
        console.log(ev);
    }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
   
    $(document).ready(function () {
        var section = new Array();
        //Drag Drop Start
        
        //Drag Drop End
        function getSectionData() {
            $.ajax({
                type: "POST",
                url: "../Provider/webmethodcall.aspx/GetAllSectionConfiguration",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    section = JSON.parse(data.d);
                    //var list = document.createElement('li'); 
                    var list = "";

                    $.each(section, function (i, jsondata) {
                        if (jsondata.CSectionType == '1') {
                            list += "<li>" + "TX&nbsp;";
                        }
                        if (jsondata.CSectionType == '2') {
                            list += "<li>" + "#&nbsp;" ;
                        }
                        if (jsondata.CSectionType == '3') {
                            list += "<li>" + "D&nbsp;";
                        }
                        //list += "<button id='dragToDiv' type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' data-target='#myModal'>" + jsondata.CSectionName + "</button></li><br/>";
                        //list += "<button type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' id='btn" + jsondata.CSectionName + "' data-section='" + jsondata.CSectionName + "' draggable='true'>" + jsondata.CSectionName + "</button></li><br/>";
                        list += '<a href="javascript:void(0);" class="remCF" data-marker="' + jsondata.CSectionName +'" draggable="true" ondrag="drag(event)">' + jsondata.CSectionName +'</a></li><br/>';
                        //$('#dragToDiv').draggable();
                    });
                    $("#sectionlist").append(list);
                    //List.innerHTML += ListUser

                }
            });
        }
        getSectionData();
        
        $("#sectionlist").on('click', '.remCF', function () {
          
            //Imp Start
            marker_ref = $(this).attr('data-marker');

            console.log(marker_ref);
            
        });
       
});
</script>

Here is the div where i wish to place the data.

                        <div class="col-xs-3" id="layer1" >
                            <fieldset>
                                <div style="border-top: 1px dashed #ffffff; margin: 15px 0px 30px 0px" class="pad">

                                    <span class="badging bg-primary">Layer 1</span>
                                    <br />

                                    <div class="form-group" id="layer1sub" >
                                        <label for="FirstName">User Type:</label>
                                        <p class="">
                                            <asp:Literal ID="ltusertype" runat="server" Text="-"></asp:Literal>
                                        </p>
                                    </div>
                                    
                                </div>
                            </fieldset>
                        </div>

I want to display the the DROP LINK value in the below code.

<p class=""> </p>

<div class="col-xs-3" id="layer1" ondrop="drop(event)">

yij sun

Participant

1190 Points

532 Posts

Re: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'No...

Mar 09, 2020 08:36 AM|yij sun|LINK

Hi Programming and design,

Accroding to your description,I don't understand your requirment clearly.Do you want to drag the whole list?

I suggest you could create a new div.Your function is returning a string rather than the div node. appendChild can only append a node.

More details,you could refer to below codes:

 <script type="text/javascript">
        function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
        }

        function dragging(event) {
            //    document.getElementById("demo").innerHTML = "The p element is being dragged";
        }
        function allowDrop(event) {
            event.preventDefault();
        }
        function drag(event) {
            event.dataTransfer.setData("Text", event.target.id);
            console.log(event);
        }
        function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            //event.target.appendChild(document.getElementById(data));
            var s = document.createElement('div'); // is the node
            s.innerHTML = document.getElementById(data).innerHTML;
            document.getElementById('layer1').appendChild(s);
        }



        $(document).ready(function () {
            var section = new Array();
            //Drag Drop Start

            //Drag Drop End
            function getSectionData() {
                $.ajax({
                    type: "POST",
                    url: "2164795.aspx/GetAllSectionConfiguration",
                    contentType: "application/json; charset=utf-8",
                    data:'',
                    dataType: "json",
                    success: function (data) {
                        section = JSON.parse(data.d);
                        //var list = document.createElement('li'); 
                        var list = "";

                        $.each(section, function (i, jsondata) {
                            if (jsondata.CSectionType == '1') {
                                list += "<li>" + "TX&nbsp;";
                            }
                            if (jsondata.CSectionType == '2') {
                                list += "<li>" + "#&nbsp;";
                            }
                            if (jsondata.CSectionType == '3') {
                                list += "<li>" + "D&nbsp;";
                            }
                            //list += "<button id='dragToDiv' type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' data-target='#myModal'>" + jsondata.CSectionName + "</button></li><br/>";
                            //list += "<button type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' id='btn" + jsondata.CSectionName + "' data-section='" + jsondata.CSectionName + "' draggable='true'>" + jsondata.CSectionName + "</button></li><br/>";
                            list += '<a href="javascript:void(0);" id="' + jsondata.Id + '" class="remCF" data-marker="' + jsondata.CSectionName + '" ondragstart="dragStart(event)" draggable="true">' + jsondata.CSectionName + '</a></li><br/>';
                            //$('#dragToDiv').draggable();
                        });
                        $("#sectionlist").append(list);
                        //List.innerHTML += ListUser

                    }
                });
            }
            getSectionData();

            $("#sectionlist").on('click', '.remCF', function () {

                //Imp Start
                marker_ref = $(this).attr('data-marker');

                console.log(marker_ref);

            });
        });
    </script>


<div id="sectionlist">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-3 droptarget" id="layer1" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <div style="border-top: 1px dashed #ffffff; margin: 15px 0px 30px 0px" class="pad">
                            <span class="badging bg-primary">Layer 1</span>
                            <br />

                            <div class="form-group" id="layer1sub">
                                <label for="FirstName">User Type:</label>
                                <p class="">
                                    <asp:Literal ID="ltusertype" runat="server" Text="-"></asp:Literal>
                                </p>
                            </div>
                        </div>
        
                </div>
                <div class="col-xs-9">
                </div>
            </div>

        </div>

Result:

Best regards,

Yijing Sun

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›