Remove From My Forums

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

Question

User-1241097802 posted

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)">

Saturday, March 7, 2020 10:09 AM

Answers

User1535942433 posted

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

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, March 9, 2020 8:36 AM

Answered by:

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

Question

Answers