Problem with Chattrbox. Code in book differs from code download for Chapter 18

[lactose]

I was going through the chapters for Chattrbox and encountered an issue near the end of Chapter 18. The chat seems to work as I can see my messages pass through the console. However, In the chat window all I see in the gravatar and not the username, message or time stamp.

I took a took a look at the downloadable solutions to see what I may have missed. The source code folder for chapter 18 contains code for the tracker app that starts in chapter 19. So, I then went to the chapter 17 folder and most of the source code for the app.js and dom.js files differ significantly from the book. Anywhere to get the correct code for this chapter?

Thanks in advance.

[marknoonan]

DOUBLE UPDATE: There’s a useful Errata for this book here for anybody who Googled their way to this post like me Errata: 1st Edition

UPDATE: Solved some of this. The messages were not displaying on the screen because the line on page 352 that reads $(this.listId).append($messageRow); actually needs to read as follows:

$(this.$list).append($messageRow);

I’m guessing listId was the right name in earlier versions of the code, and wasn’t updated for publication when $list was used (for jquery convention reasons maybe?).

Between that and looking at the ChatMessage code from Chapter 16’s downloaded solutions (not sure why it was there but it DOES correctly handle turning data from a string into a {message: data} I seem to be mostly up and running. And ready to somewhat move on.

If I get this chapter completed and have functioning files that match it, I will post them.

-Mark

–

I’m having a similar problem towards the end of Chapter 18. The messages will show in the console but not on the screen.

Something is odd on page 351 - where we add the call to ChatForm.init, the code that is removed is NOT the same as the code we already had there from page 342. We had:

let message = new ChatMessage({ message: 'pow!'}); // this gets pow! to the console when the message is logged

This seems like the right way to call the ChatMessage constructor. However on p351 it shows it called as new ChatMessage('pow!'), which doesn’t work, and it replaces it with

let message = new ChatMessage(data) // this logs message as undefined

which follows that same non-working format. (Or if it is supposed to work that way, we’ve skipped a step in handling that “data” value correctly and setting it to “message”.)

I spent a few instructive hours stepping through things with the debugger to be sure that data is actually captured correctly from the form, and that everything else seemed to work as expected. It does. So new ChatMessage({message: data}) works to get things passed all the way to the console, but it seems to break things in other ways later because now the value for data that is passed around is an object, not the simple message string it is used as elsewhere.

I was sure if I stuck with it I’d see what I had done wrong here (usually this works!) but the fact that the downloadable solutions are so different does suggest to me that something is amiss in this chapter. Would love some help!

[francisngo]

On top of having different solutions from the book and resource, I also found that the chapter book solutions are off. I had to go back to Chapter 17 to find solutions to a problem where I am getting an error in dom.js. In doing that, I also notice that inside the drawMessage function class does not have single quotes while the book does.

chapter 17 resource download:

drawMessage(messageData) {
    var $messageRow = $('<li>', {
      class: 'message-row'
    });
    var $message = $('<p>');
    $message.append($('<span>', {
      class: 'message-username',
      text: messageData.user
    }));
    $message.append($('<span>', {
      class: 'timestamp',
      'data-time': messageData.timestamp
    }));
    $message.append($('<span>', {
      class: 'message-message',
      text: messageData.message
    }));
    $messageRow.append($message);

    var $img = $('<img>', {
      src: createGravatarUrl(messageData.user),
      title: messageData.user
    });
    $messageRow.append($img);

    $(this.listId).append($messageRow);
    $messageRow.get(0).scrollIntoView();
  }
}

chapter 18 book:

drawMessage({user: u, timestamp: t, message: m}) {
  let $messageRow = $('<li>', {
    'class': 'message-row'
  });

  if(this.username === u) {
    $messageRow.addClass('me');
  }

  let $message = $('<p>');

  $message.append($('<span>', {
    'class' : 'message-username',
    text: u
  }));

  $message.append($('<span>', {
    'class': 'timesamp',
    'data-time': t,
    text: (new Date(t)).getTime()
  }));

  $message.append($('<span>', {
    'class': 'message-message',
    text: m
  }));

  $messageRow.append($message);
  $(this.$list)append($messageRow);
  $messageRow.get(0).scrollIntoView();
}

[marknoonan]

My overall impression is that the code went through multiple revisions and what we have in the chapters is not all 100% the final code, and neither is the code in the downloads. I found the errata (Errata: 1st Edition) very helpful in solving the problems I was having. If you haven’t already, you could report this difference there.

[flopy_dv]

I honestly don’t know what to do. My app doesn’t work. The messages show on the console but I can’t get them to work like a proper chat. I followed the book instructions but then checked with the answers provided and they don’t match. I want to cry. I have been working on this project for an entire week.

[chrisaquino1]

@flopy_dv, I am so sorry for the not getting back to you sooner!
We did add a correction for the code in the Errata forum topic, but failed to prompt folks to download a new copy of the resources .zip file.

Check out this thread for the most recent version of the solved example code.

Please let us know if that helps, or tag me in the response if you’re still stuck and need immediate assistance.

[jieliu511]

Thank you so much! These errors really made me headache! You really helped me a lot!