CODEWITHSUNDEEP
javascriptjquerynode.jsfrontendbackend
dzenesiz
dzenesiz

Reputation: 1552

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

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...

Upvotes: 1

Views: 1375

Answers (1)

danday74
danday74

Reputation: 57146

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");
});

Upvotes: 2

Related Questions