CODEWITHSUNDEEP
jquery
TungLoGach
TungLoGach

Reputation: 51

jQuery code not producing expected results

I try write code HTML , see look like 

 socket.on('listUser', function(data){
          console.log(data);
          console.log(socket.id);
          for(var i =0 ; i<data.length; i++){
            $('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+data[i].socketId+'">' +data[i].name+ '</a>'); 
          }
        });

        $('a').each(function(){
          console.log($(this).attr('id'));
          /*$(this).click(function(){

          });*/
        });

and I have two element HTML

 <a  id ='list' class = "list-group-item active">List User</a>
<a  id ='message' class = "list-group-item active">Your name</a>

but when I try run my code js, I get only 2 value: id=list and id = message. Why is that?

Upvotes: 1

Views: 42

Answers (1)

TungLoGach
TungLoGach

Reputation: 51

this my code :

<!DOCTYPE html>
<!-- saved from url=(0040)http://getbootstrap.com/examples/signin/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>Signin</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <style type="text/css">
    #viewContent{
      color: black ; 
      height: 400px;
      background-color: #F5F5F5;
      overflow: scroll;
    }
    #listUser{
      height: 400px;

    }
    </style>
  </head>

  <body>

    <div id='header'>
      <h2 class="title">This is chat box</h2>
    </div>

    <div id='content' >
      <div id='listUser' class='col-md-4'>
        <a  id ='list' class = "list-group-item active">List User</a>
      </div>

      <div name='chatbox' class='col-md-8'>
        <a  id ='message' class = "list-group-item active">List User</a>
        <div id='viewContent'>
        </div>

        <div name='formInput'  >
          <form class='' id='formChat'>
            <div class="form-group">
              <label class="sr-only" for="contentChat">Enter message</label>
              <input type="text" class="form-control" id="contentChat" placeholder="Enter message" >
              <input type='submit' class='btn btn-primary ' value ='Send'>
            </div>
          </form>
        </div>

      </div> <!-- chat box div -->
    </div>

    <script type="text/javascript">
      jQuery(function($){        
        var socket = io.connect('http://localhost:8080');
        var $contentChat = $('#contentChat'),
            $send =$('formChat');
        var emailLogin = '';
        var listID = [];
        var idSocket ;

        socket.on('listUser', function(data){
          console.log(data);
          console.log(socket.id);
          for(var i =0 ; i<data.length; i++){
            $('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+
              data[i].socketId+'">' +data[i].name+ '</a>').click(function(){
                showSocketid(data[i].socketId,data[i].name);
            }); 
          }
        });

        $('a').each(function(){
          console.log($(this).attr('id'));
          /*$(this).click(function(){
          });*/
        });

        function showSocketid(socketID , nameUser){
          alert(socketID +'and'+ nameUser);
        };

      });
    </script>

  </body>
</html>

Upvotes: 1

Related Questions