PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, September 6, 2022

[FIXED] Why is removeChild() not working in my code? Javascript

 September 06, 2022     ajax, html, javascript     No comments   

Issue

So I'm creating a search website where the user enters a part of a name or a full name and then presses a button. And based on the string entered, it displays a hint of names of actors that contain the string or sub-string. The names are stored in a mysql database.

I was able to accomplish all of that by using ajax to interact with php and php to interact with mysql database. However, if the user enters nothing, it's supposed to display nothing.

So I though of just deleting all names when the field text is empty (in other words, I just delete all p elements of a div).

That's where the problem is. Even though I used element.removeChild(), It doesn't delete anything. Instead, even when the string is empty and the user presses the button, it keeps the same info from the previous search. I already searched on similar questions about removeChild(), but none of the answers or hints I found have worked for me.

Here is the javascript and html code below.

        var array = [];
        var str = "";
        var clicked_id = "";
        var body = document.getElementsByTagName('BODY')[0];
        var actors = document.getElementById('actors');
        var roles = document.getElementById('roles');

        actors.addEventListener("click", function(){
            getData(this.id);
        }, false);
        roles.addEventListener("click", function(){
           getData(this.id); 
        }, false);
        
        function getData(myid) {
            str = document.getElementById('mytext').value;
            clicked_id = myid;
            var id = "roles";
            console.log(clicked_id);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {
                    array = JSON.parse(xmlhttp.responseText);
                    
                    var element = document.createElement('div');
                    element.id = "mydiv";

                    if (str == "" && element.hasChildNodes() != null) {
                        while (element.hasChildNodes()) {
                            element.removeChild(element.lastChild);
                        }
                    } else {
                        for (var i = 0; i < array.length; i++) {
                            var p = document.createElement('p');
                            p.append(array[i]);
                            element.append(p);
                        }
                        body.append(element);
                    }
                }
            };
            xmlhttp.open("GET", "controller.php?q="+str , true);
            xmlhttp.send();
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Search for either all roles or all actors in the database imdb_small</h2>
    <hr> Search string <br>
    <input type="text" id="mytext"> <br>
    <input type="button" value="Actors" id="actors">
    <input type="button" value="Roles"  id="roles" > <br> <br>
    <hr> <br><br>
</body>


Solution

        var array = [];
        var str = "";
        var clicked_id = "";
        var body = document.getElementsByTagName('BODY')[0];
        var actors = document.getElementById('actors');
        var roles = document.getElementById('roles');

        actors.addEventListener("click", function(){
            getData(this.id);
        }, false);
        roles.addEventListener("click", function(){
           getData(this.id); 
        }, false);
        
        function getData(myid) {
            str = document.getElementById('mytext').value;
            clicked_id = myid;
            var id = "roles";
            console.log(clicked_id);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {
                    array = JSON.parse(xmlhttp.responseText);
                    
                    // Check for an existing mydiv first here, before creating a new one
                    // If it exists then get it and check its child nodes

                    var element = document.getElementById('#mydiv');
                    element = element ? element : document.createElement('div');
                    element.id = "mydiv";

                    if (str == "" && element.hasChildNodes() != null) {
                        while (element.hasChildNodes()) {
                            element.removeChild(element.lastChild);
                        }
                    } else {
                        for (var i = 0; i < array.length; i++) {
                            var p = document.createElement('p');
                            p.append(array[i]);
                            element.append(p);
                        }
                        body.append(element);
                    }
                }
            };
            xmlhttp.open("GET", "controller.php?q="+str , true);
            xmlhttp.send();
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Search for either all roles or all actors in the database imdb_small</h2>
    <hr> Search string <br>
    <input type="text" id="mytext"> <br>
    <input type="button" value="Actors" id="actors">
    <input type="button" value="Roles"  id="roles" > <br> <br>
    <hr> <br><br>
</body>



Answered By - 8bit
Answer Checked By - Gilberto Lyons (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing