B4J Question Websockets vs JQuery events

Discussion in 'B4J Questions' started by wl, Nov 25, 2015.

  1. wl

    wl Well-Known Member Licensed User

    Hi,

    I'm writing a websocket application but I was wondering: a soon as I connect my webpage to the server the click events of any of the HTML buttons trigger a method on the server.

    How would I handle the button clickevent in JQuery (client-side) and call a method on the websocket from within this JQuery event ?

    This does not seem to work:

    Code:
    $(document).ready(function() {
      b4j_connect(
    "/overview");
      $(
    "#enter").off();
      $(
    "#enter").click (function() {
        alert(
    'foo');
      });
    });
    This code is working neither:

    Code:
    $(document).ready(function() {
      b4j_connect(
    "/overview");
      $(
    "#enter").unbind("click");
      $(
    "#enter").bind ("click", function (e) {alert('foo');});
    });
    Thanks
     
    Last edited: Nov 25, 2015
  2. Daestrum

    Daestrum Well-Known Member Licensed User

    Did you dim the 'enter' button as a JQueryElement ?
    If you did, maybe removing it might help as B4J would be unaware of the button.
     
  3. wl

    wl Well-Known Member Licensed User


    Thanks Daestrum, but this does not work as the b4j_ws javascript file binds all events client-side (b4j_addAutomaticEvents), regardless of any server code.
     
  4. wl

    wl Well-Known Member Licensed User

    Found a solution:

    Modify the b4j_ws.js file so that the b4j_connect accepts an event handler as second param. This eventhandler/function will be called as soon as the events have been linked automatically:

    Code:
    function b4j_connect(absolutePath, fnc) {
      
    if (typeof WebSocket === 'undefined') {
      window.alert("WebSockets are not supported by your browser.");
      
    return;
      
    }
      var l = window.location, fullpath;
      fullpath = ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + ":" + l.port + absolutePath;
      b4j_ws = new WebSocket(fullpath);
      b4j_ws.onmessage = function (event) {
      var ed = JSON.parse(event.data);
      if (ed.etype === "runmethod") {
      $(ed.id)[ed.method].apply($(ed.id), ed.params);
      } else if (ed.etype === "runmethodWithResult") {
      b4j_sendData($(ed.id)[ed.method].apply($(ed.id), ed.params));
      } else if (ed.etype === "setAutomaticEvents") {
      b4j_addAutomaticEvents(ed.data);
      if (fnc !=null) fnc();
    Then you can write code like this in your page:

    Code:
    $(document).ready(function() {
      b4j_connect(
    "/overview", function() {
        $(
    "#enter").unbind("click");
        $(
    "#enter").bind ("click", function (e) {alert('foo');});
      });
    });
    Anyone any comments on this solution ?
     
  5. Daestrum

    Daestrum Well-Known Member Licensed User

    I got it working like this with no changes to b4j_ws.js file
    Code:
    $( document ).ready(function() {
        b4j_connect(
    "/ws");
    });
    $("#fred").click(function(){
        window.alert("hello");
    });
    and like this
    Code:
    $( document ).ready(function() {
       b4j_connect(
    "/ws"); 
       $(
    "#fred").click(function(){
          window.alert(
    "hello");    
          
    });
     });
     
    Last edited: Nov 25, 2015
  6. wl

    wl Well-Known Member Licensed User

    Hi Daestrum,

    In your option I guess you will notice that when there is a server side implementation of the click event it will be called as well. This is because you added an additional click event without detaching the event that was linked by the b4j_ws code.

    It seems that even without server side code you would have some performance hit.

    Thanks !
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice