Control front-end javascript from node.js back-end

Question

I am building a chat app and I want to ask users to input their username. JQuery front-end code slides a form into view (on ready), stores the data into variables and then loads the chat (when enter key or button is pressed). How do I stop that animation until I validate user input on server-side? I am using node.js for backend. Any ideas?

Thanks in advance!

Front-end jQuery:

var nameChoice, roomChoice; //to store user input

var initName = function() {

		nameChoice = $("#init-name input").val(); //save chosen name in nameChoice
		$("#current-name").text("Username: " + nameChoice); //put chosen name in chat header
		$("#init-name").animate(
			{"left" : "-35%"}, 300,
			function() {
				$(this).addClass("hidden");
				$("#init-room").removeClass("hidden");
				$("#init-room").animate({"left" : "35%"}, 300);
		});  //remove name form and slide in room form in callback
	} //end initName

var initRoom = function() {
		roomChoice = $("#init-room select").val(); //save chosen room in roomChoice
		$("#current-room").text("Room: " + roomChoice); //put chosen room in chat header
		$("#init-room").animate(
			{"left" : "-35%"}, 300,
			function() {
				$(this).addClass("hidden");
				$("#chat-main").removeClass("hidden");
		}); //remove room form and show page in callback
	} //end initRoom

var btnHover = function() {
	$(".btn-form").hover(
		function() {
			$(this).stop().animate(
			{
				backgroundColor : "#FFBD7A"
			}, 300);
		},
		function() {
			$(this).stop().animate(
			{
				backgroundColor : "white"
			}, 300);
		});
}

var init = function() {

	$("#init-name").removeClass("hidden").animate({"left" : "35%"}, 300); //slide in name form
	
	$(document).keydown(function(event) { //submit choice on enter key
		if (event.which === 13) {
			if (!$("#init-name").hasClass("hidden")) { //if user is choosing name
				event.preventDefault();
				initName(); //call initName function
			}

			if (!$("#init-room").hasClass("hidden")) { //if user is choosing room
				event.preventDefault();
				initRoom(); //call initRoom function
			}
		}
	}); //end enter key submission

	$("#init-name .btn-form").click(initName);
	$("#init-room .btn-form").click(initRoom);

	btnHover();	
} //end init
$(document).ready(init);

I'm still learning node, so no back-end code yet...

But to answer you question in the general sense, when the user hits the enter key, send the data to the back end (AJAX) and have it return a response of either success or failure, then continue with loading the chat if a success comes back, else keep the user on the form. — SoluableNonagon
– SoluableNonagon, Commented Dec 23, 2015 at 16:34
Alright, now, where is the call that sends the user name to the server? — SoluableNonagon
– SoluableNonagon, Commented Dec 23, 2015 at 16:52
It can be in another file, but THIS code needs to make a call to the back end asking it to validate the user, you can achieve this with jQuery Ajax. If there is no backend then you don't really have a chat application, you just have a page that looks like chat should exist there; since you need to validate users in some manner. — SoluableNonagon
– SoluableNonagon, Commented Dec 23, 2015 at 17:23
I recommend looking at these: github.com/IgorAntun/node-chat , github.com/tamaspiros/advanced-chat, and socket.io/get-started/chat you can see how they implemented chat. This is really not about your question, but next steps. — SoluableNonagon
– SoluableNonagon, Commented Dec 23, 2015 at 17:26

danday74 · Accepted Answer · 2015-12-23 17:36:50Z

2

rough code for this ...

$http.post("/login", {"username":username, "password": password}).then(function(response) {

   console.log("success - do animation here");

}.catch(function(response) {

    console.log("failure a non 2xx HTTP response - handle error here");
});

This code is crude since the http request should prob be in a service, also I have not linted this code, BUT you should get the general IDEA!

APOLOGIES THIS IS ANGULAR, JQUERY WAS ASKED FOR ... HERE GOES ...

$.ajax({
  method: "POST",
  url: "/login",
  data: { username: username, password: password }
})
.then(
  function( data, textStatus, jqXHR ) {
    console.log("success - do animation here");
  }, 
  function( jqXHR, textStatus, errorThrown ) {
    console.log("failure a non 2xx HTTP response - handle error here");
  }
);

Never tried this in Jquery before but the docs suggest this approach. Check the docs at ...

http://api.jquery.com/jquery.ajax/

Thanks

Edit: in case promise based jQuery code not available:

$.ajax({
  method: "POST",
  url: "/login",
  data: { username: username, password: password }
})
// for older versions of jQuery, replace .done and .fail with .success and .error
.done(function( data, textStatus, jqXHR ) {
    console.log("success - do animation here");
})
.fail(function( jqXHR, textStatus, errorThrown ) {
    console.log("failure a non 2xx HTTP response - handle error here");
});

edited Dec 23, 2015 at 17:36

answered Dec 23, 2015 at 17:12

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SoluableNonagon Over a year ago

Are you assuming Angular here? along with promises being available? But the general idea applies. Can you also provide a jQuery Ajax example?

danday74 Over a year ago

I do apologise, I'm so used to answering Angular questions! I've provided the comparative jQuery solution. Hope it helps.

dzenesiz Over a year ago

Thank you very much for the answer and examples. I have just one more question: should I just call jQuery functions that I defined (initName, initRoom and so on) instead of console.log("success - do animation here");, or not?

danday74 Over a year ago

sorry for delay in reply, Christmas and all :) Yeah replace the console.log statement with the code that triggers your animations

Collectives™ on Stack Overflow

Control front-end javascript from node.js back-end

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related