JavaScript / Jquery effects not working when creating table in HTML

Navigation
0

Good morning everyone,

I have a problem when displaying a table in html, I want to add an effect while it is displaying for example I am using

  

$ ("# delayed"). click (function () {               $ ("tr"). delay (1000) .show ("slow");           })

But the time it displays the table it goes fast and n comes with the effect below the code in HTML, JS and CSS. 

$(document).ready(function(){
    $("button").click(function(){
        $("#hide").click(function(){
            $("p").delay(200).hide("slow");
        })
        $("#show").click(function(){
            $("p").delay(200).show("slow");
        })
        $("#delayed").click(function(){
            $("tr").delay(1000).show("slow");
        })
        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
            var i;
            out = "<table border='0'>";
            for(i = 0; i < dado.length; i++){
                out+= "<tr id='delayed'><td>"+dado[i].id+"</td>";
                out+= "<td>"+dado[i].name+"</td>";
                out+= "<td>"+dado[i].email+"</td></tr>";
            }
            out += "</table>"
            document.getElementById("teste").innerHTML = out;
        });
    });
});
*{
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
}
h1{
    color: #fd9500;
}
header{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top:0;
    left:0;
    text-align:center;
}
.button{
    border: none;
    color: #daf5ff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
    background-color: #0022ff;
}
.button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
}
.button span:after{
    content: '
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="functionJS.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Treinamento Front-End</title>
    <link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="style" type="text/css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Lista de Pessoas</h1>
    <button class="button"><span>Get Back Requests</span></button>
    <button class="button" id="hide"><span>Hide Request</span></button>
    <button class="button" id="show"><span>Show Requests</span></button>
    <p  id="teste"></p>
</header>
</body>

</html>
bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding-right: 25px;
}
.button:hover span:after {
    opacity: 1;
    right: 0;
}
table{
    border-collapse: collapse;
    width: 100%;
}

th, td{
    border-bottom: 1px solid #8578f7;
    padding: 8px;
    text-align: center;
    color: #fd9500;
}
$(document).ready(function(){
    $("button").click(function(){
        $("#hide").click(function(){
            $("p").delay(200).hide("slow");
        })
        $("#show").click(function(){
            $("p").delay(200).show("slow");
        })
        $("#delayed").click(function(){
            $("tr").delay(1000).show("slow");
        })
        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
            var i;
            out = "<table border='0'>";
            for(i = 0; i < dado.length; i++){
                out+= "<tr id='delayed'><td>"+dado[i].id+"</td>";
                out+= "<td>"+dado[i].name+"</td>";
                out+= "<td>"+dado[i].email+"</td></tr>";
            }
            out += "</table>"
            document.getElementById("teste").innerHTML = out;
        });
    });
});
    
asked by anonymous 03.05.2018 / 14:36

2 answers

0

$(document).ready(function(){
		    	var teste = $("#teste").hide();
		        $("#hide").click(function(){
		            $("p").delay(200).hide("slow");
		        })
		        $("#show").click(function(){
		            $("p").delay(200).show("slow");
		        })
		        $("#get").click(function(){
		            $("p").delay(1000).show("slow");
		        })
		        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
		            var i;
		            out = "<table border='0'>";
		            for(i = 0; i < dado.length; i++){
		                out+= "<tr class='a'><td>"+dado[i].id+"</td>";
		                out+= "<td>"+dado[i].name+"</td>";
		                out+= "<td>"+dado[i].email+"</td></tr>";
		            }
		            out += "</table>"
		            document.getElementById("teste").innerHTML = out;
		        });
		});
*{
			margin:0;
			padding:0;
			font-family: 'Lato', sans-serif;
		}
		h1{
			color: #fd9500;
		}
		header{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			top:0;
			left:0;
			text-align:center;
		}
		.button{
			border: none;
			color: #daf5ff;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			transition-duration: 0.4s;
			background-color: #0022ff;
		}
		.button span{
			cursor: pointer;
			display: inline-block;
			position: relative;
			transition: 1s;
		}
		.button span:after{
			content: '
<link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="style" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><header><h1>ListadePessoas</h1><buttonclass="button" id="get"><span>Get Back Requests</span></button>
	    <button class="button" id="hide"><span>Hide Request</span></button>
	    <button class="button" id="show"><span>Show Requests</span></button>
	    <p id="teste"></p>
	</header>
bb';
			position: absolute;
			opacity: 0;
			top: 0;
			right: -20px;
			transition: 0.5s;
		}

		.button:hover span{
			cursor: pointer;
			display: inline-block;
			position: relative;
			transition: 1s;
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
			padding-right: 25px;
		}
		.button:hover span:after {
			opacity: 1;
			right: 0;
		}
		table{
			border-collapse: collapse;
			width: 100%;
		}

		th, td{
			border-bottom: 1px solid #8578f7;
			padding: 8px;
			text-align: center;
			color: #fd9500;
		}
    $("#delayed").click(function(){
        $("tr").delay(1000).show("slow");
    })
  

This function does not execute because in HTML it did not find any id delayed 

$(document).ready(function(){
		    	var teste = $("#teste").hide();
		        $("#hide").click(function(){
		            $("p").delay(200).hide("slow");
		        })
		        $("#show").click(function(){
		            $("p").delay(200).show("slow");
		        })
		        $("#get").click(function(){
		            $("p").delay(1000).show("slow");
		        })
		        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
		            var i;
		            out = "<table border='0'>";
		            for(i = 0; i < dado.length; i++){
		                out+= "<tr class='a'><td>"+dado[i].id+"</td>";
		                out+= "<td>"+dado[i].name+"</td>";
		                out+= "<td>"+dado[i].email+"</td></tr>";
		            }
		            out += "</table>"
		            document.getElementById("teste").innerHTML = out;
		        });
		});
    
03.05.2018 / 14:45
0

The first problem I check is repeating id='delayed' . You can remove it because it seems unnecessary, just getting: 

...
out+= "<tr><td>"+dado[i].id+"</td>";
...

Another problem is these events within another event: 

$("button").click(function(){
        $("#hide").click(function(){
            $("p").delay(200).hide("slow");
        })
        $("#show").click(function(){
            $("p").delay(200).show("slow");
        })
        $("#delayed").click(function(){
            $("tr").delay(1000).show("slow");
        })

You do not have to do this, put the events apart, and remove the $("#delayed").click( , leaving only: 

$("#hide").click(function(){
   $("p").delay(200).hide("slow");
})
$("#show").click(function(){
   $("p").delay(200).show("slow");
})

Another thing is <p id="teste"> that should start hidden with: 

#teste{
   display: none;
}

Also change the selector of the event that will call Ajax, to get the click of only the first button : 

$("button:eq(0)").click(function(){...

And after Ajax returns, click on div #show to show the result in effect: 

$("#show").click();

The whole code would look like this: 

$(document).ready(function(){
      $("#hide").click(function(){
         $("p").delay(200).hide("slow");
      })
      $("#show").click(function(){
         $("p").delay(200).show("slow");
      })
    $("button:eq(0)").click(function(){
        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
            var i;
            out = "<table border='0'>";
            for(i = 0; i < dado.length; i++){
                out+= "<tr><td>"+dado[i].id+"</td>";
                out+= "<td>"+dado[i].name+"</td>";
                out+= "<td>"+dado[i].email+"</td></tr>";
            }
            out += "</table>"
            document.getElementById("teste").innerHTML = out;
            $("#show").click();
        });
    }).trigger("click");
});
*{
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
}
h1{
    color: #fd9500;
}
header{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top:0;
    left:0;
    text-align:center;
}
.button{
    border: none;
    color: #daf5ff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
    background-color: #0022ff;
}
.button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
}
.button span:after{
    content: '
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><h1>ListadePessoas</h1><buttonclass="button"><span>Get Back Requests</span></button>
    <button class="button" id="hide"><span>Hide Request</span></button>
    <button class="button" id="show"><span>Show Requests</span></button>
    <p id="teste"></p>
</header>
bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding-right: 25px;
}
.button:hover span:after {
    opacity: 1;
    right: 0;
}
table{
    border-collapse: collapse;
    width: 100%;
}

th, td{
    border-bottom: 1px solid #8578f7;
    padding: 8px;
    text-align: center;
    color: #fd9500;
}

#teste{
   display: none;
}
...
out+= "<tr><td>"+dado[i].id+"</td>";
...
    
03.05.2018 / 15:33
Redirect application in IIS when pool is stopped Access non-existent key of a JS object