CODEWITHSUNDEEP
javascriptjqueryhtmlwebsocket
ARNAB2012
ARNAB2012

Reputation: 400

jQuery With WebSocket

I have a little confusion in the following snippet. I am trying to make a jQuery drop effect with user input data. This is working but only the first value given stays for rest of the click.

Here are the snippets

index.html

<!DOCTYPE html>
<html>
<head>
<title>Pretech blog testing web sockets</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var webSocket = new WebSocket('ws://localhost:8080/jqueryWebTest/websocket2');

        webSocket.onerror = function(event) {
            onError(event)
        };

        webSocket.onopen = function(event) {
            onOpen(event)
        };

        webSocket.onmessage = function(event) {
            onMessage(event)
        };

        function onMessage(event) {
            alert(event.data);
            document.getElementById('messages').innerHTML += '<br />'                    + event.data;
           // var myDiv = document.getElementById('dropDiv');
           // document.createElement(myDiv);

            $(function() {
                setTimeout (function() {
              var $dropDiv = $('#dropDiv');
              var mythis = $('#holder a');
              // get position of the element we clicked on
              var offset = mythis.offset();

              // get width/height of click element
              var h = mythis.outerHeight();
              var w = mythis.outerWidth();

              // get width/height of drop element
              var dh = $dropDiv.outerHeight();
              var dw = $dropDiv.outerWidth();

              // determine middle position
              var initLeft = offset.left + ((w/2) - (dw/2));

              // animate drop
              $dropDiv.css({
                      left: initLeft,
                      top: $(window).scrollTop() - dh,
                      opacity: 0,
                      display: 'block'
                  }).animate({
                      left: initLeft,
                      top: offset.top - dh,
                      opacity: 1
                  }, 300, 'easeOutBounce');
             },1500);
            });

        }

        function onOpen(event) {
            document.getElementById('messages').innerHTML = 'Now Connection established';
        }

        function onError(event) {
            alert(event.data);
        }

        function start() {
            var text = document.getElementById("userinput").value;

            webSocket.send(text);
            return false;
        }
    </script>

    <script type="text/javascript">



</script>

<style type="text/css">

#holder {
 position: absolute;
 top: 200px;
 left: 100px;   
}

#dropDiv {
 display: none;
 position: absolute;
 top: -20px;
 background: #ccc; 
}


</style>
</head>
<body>

 <div>
        <input type="text" id="userinput" /> <br> <input type="submit"
            value="Send Message to Server" onclick="start()" />
    </div>
<div id="messages"></div>
<div id="holder"><a href="javascript:void(0);" id="main">Which ring?</a></div>

<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>
</body>
</html>

websocket2.java

package com.test.websockets;

import java.io.IOException;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.SendResult;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket2")
public class WebSocketTest2 {

    @OnMessage
    public void onMessage(String message, Session s) throws IOException,InterruptedException {

        System.out.println(message);

       // session.getBasicRemote().sendText(message);

        for (Session session : s.getOpenSessions()) {
            session.getBasicRemote().sendText("<div id='dropDiv'>"+message+" </div>");           }

        // Sending message to client each 1 second

    }

    @OnOpen
    public void onOpen() {
        System.out.println("Client connected");
    }

    @OnClose
    public void onClose() {
        System.out.println("Connection closed");
    }
}

What would be a solution?

Upvotes: 2

Views: 38487

Answers (2)

Hunter Frazier
Hunter Frazier

Reputation: 477

try changing these:

<input type="submit" value="Send Message to Server" onclick="start()" />


function start() {
    var text = document.getElementById("userinput").value;
    webSocket.send(text);
    return false;
}

to:

<input id="submitButton" type="submit" value="Send Message to Server" />


function start() {
    var text = document.getElementById("userinput").value;
    webSocket.send(text);
    return false;
}

var subm = document.getElementById("submitButton");
subm.addEventListener("click", start, false);

Upvotes: 2

yahya el fakir
yahya el fakir

Reputation: 562

I think its because you are using same Id for your dropDivs:

<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>

here : 

  var $dropDiv = $('#dropDiv');
  var mythis = $('#holder a');

You excpect that all your dropDivs would get the drop annimation, Unfortunately only the first element with id "dropDiv" will be animated.

Try to use class instead for selecting your html elements.

Upvotes: 0

Related Questions