Question posted in
You can find the official documentation here.

Can't get jquery show() to show the element – Jquery ajax

I’m ready to throw my pc through the window, somehow I can’t seem to find my mistake. I feel like I am going insane. I have a simple login page in which you enter a name and a room code then you press submit. After you press submit I want to hide the form and show an element that says you are connected to the server. I’m using the following ejs/HTML page:

<!DOCTYPE html>
    <html>
      <head>
        <title>Login</title>
        <script
          src="https://code.jquery.com/jquery-3.5.0.min.js"
          integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
          crossorigin="anonymous"></script>
        <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
        <script src="/assets/zoomFriendsAjax.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
      </head>
      <body>
        <script src="/assets/sockets.js"></script>
        <h2>Welcome To ZoomFriends</h2>

        <div id="pagecontent">
          <div id="serverform">
            <form>
              <label for="servercode"><strong>Server Code:</strong></label>
              <input type="text" id="servercode" name="servercode" placeholder="Insert your server code here..." required>
              <label for="nickname"><strong>Your Nickname</strong></label>
              <input type="text" id="nickname" name="nickname" placeholder="Insert your nickname here..." required>
              <button type=submit>join room</button>
            </form>
          <div>
          <div id="connpage">
            <h2>Connected to server</h2>
          </div>
        </div>
      </body>
    </html>

and then there is this ajax js file, which activates on submit and contains a function to show connected which should show the “connpage” and hide the “form” it only does the latter:

$(document).ready(function(){


  $('#serverform').on('submit', function(){

      var player = $('input[type="text"]#nickname');
      var room = $('input[type="text"]#servercode');
      var joindata = {player: player.val(), room: room.val()};

      $.ajax({
        type: 'POST',
        url: '/button',
        data: joindata,
        success: function(data){

          serverconnected();

        }
      });




      return false;

  });

  function serverconnected(){
    $('#connpage').show();
    $('#serverform').hide();
  }

});

Then there is this css in which connpage is set to display: none;

body{
    background: #0d1521;
    font-family: tahoma;
    color: #989898;
    text-align: center;
}

#todo-table{
    position: relative;
    width: 95%;
    background: #090d13;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

#todo-table form:after{
    margin: 0;
    content: '';
    display: block;
    clear: both;
}

#connpage{
    display: none;
}

input::placeholder {
  font-style: italic;
}

input[type="text"]{
    width: 100%;
    padding: 20px;
    background:#181c22;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

label{
    width: 100%;
    padding: 20px;
    background:#23282e;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

button{
    padding: 20px;
    width: 100%;
    float: left;
    background: #23282e;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 80px;
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: arial;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}

li:hover{
    text-decoration: line-through;
    background: rgba(0,0,0,0.2);
}

h1{
    background: url(/assets/logo.png) no-repeat center;
    margin-bottom: 0;
    text-indent: -10000px;
    text-align: center;
}

And this is the part of the server script that deals with the clicking of the submit button:

//if submit button is pressed
    app.post('/button', urlencodedParser, function(req, res){
      //console.log("pushed the button")
      var message = req.body.player;
      var found = rooms.some(el => el.roomcode === req.body.room);
      if (found){
        var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
        io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
        //var currentroom = rooms.find(element => element.roomcode === req.body.room);
        rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
        //currentroom.players.push({nickname: req.body.player, id: socket.id});
        console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
        //console.log(currentroom);
        console.log(rooms[targetindex]);
        res.json(rooms[targetindex]);
      }
    });

as far as I know everything is going as it should, EXCEPT the connpage NEVER SHOWS, i get through every function, all data is logged the way I want, except $('#connpage').show(); does nothing, it doesn’t even have the common decency to send me an error or something ;p. Can anyone please help, I’m going nuts…. Eventually I need lots of show and hide to go on, to go through all the states of the page, without refreshing the page. Any help would really be welcome, thank you for even taking a look.

Tags:

2

Answers


  1. 0

    You have a syntax error in your HTML. You never close your serverform TAG.That way your connpage is INSIDE that container and gets hidden too Change

    <div id="serverform">
    ....
<div>

    to

    <div id="serverform">
...
</div>
    Login or Signup to reply.
  2. 0

    normally $("#connpage").show(); should work, maybe in some part of your app you are overriding it, you can use $('#connpage').css('display', '') as an alternatif.
    if none of them work , you can remove the display none, and at the beginning you can hide it with .hide() .
    i wish it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search