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

Contributor

3730 Points

1425 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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›