How to open specific user profile based on what is clicked on - html

At first this sounded very simple, but actually I couldn't find a way to implement this.
I have Spring web app, with rest controllers and database. I have users in my web app and I want to open specific page in which details of that user will be shown. So how do I send information about what is clicked on (link to that specific user's details) to another page where the details about user are being displayed?
This is what I tried and when I load profile page nothing appears on it:
index.html
<html ng-app="app" ng-controller="appController">
<head >
<script src="js/angular.min.js"></script>
<script src="js/App.js"></script>
<p ng-click = "setProfileDetails(john)">profile</p>
profile.html
Here I use the same App.js file so I can read the same controller.
<body ng-controller = "appController">
<div ng-model = "profileDetails">
{{profileDetails.username}}
</div>
</body>
App.js
$sopce.profileDetails = null;
$scope.setProfileDetails = function(username){
$http.get("services/rest/getUser/" + username).then(function(response){
$scope.profileDetails = response.data;
}, function(Response){
});
}

on jsp page:
<form action="user-details/${userid}">
//list of users or whatever you want
</form>
on controller
#RequestMapping("user-details/{userid}")
public String showUserDetails(#PathVariable int userid, Model model) {
model.addAttribute("userDetails",userDAO.getUserDetailsById(userid);
return "/ac_user/user-details";
}

You should expose an endpoint which returns user details provided some user identifier like userId. So, when someone clicks on a user, send the userId to the API and retrieve the response and display it. You just need to make a simple API call. Details about your front-end implementation are missing.

Related

Spring MVC stop refreshing the page after GetMapping

I am working on a page where I have to retrieve the "tasks" of a specific date from the database. My current approach is to use GetMapping at the server, and return the list of tasks
Below is part of my TaskController
#Controller
#RequestMapping()
public class TaskController {
#Autowired
private TaskService taskService;
#GetMapping("/calendar/{date}")
public String displayTasksByClick(#PathVariable("date") int date, Model model) {
long userId = this.getCurrentUserId(); // just a method to get the user id requesting the task
List<Task> taskList = taskService.findByDateAndUserId(date, userId);
model.addAttribute("taskList", taskList);
return "/calendar";
}
And calendar.html looks like this (I'm only pasting the relevant part)
<html lang='en' xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset='utf-8' />
<title>Dashboard</title>
<link rel="stylesheet" href="../static/css/calendar.css">
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<ul style="list-style-type: none; margin: 0;">
<li><a th:href="#{/calendar/20220228}">show</a></li>
<li><a th:href="#{/calendar/20220301}">show</a></li>
<li><a th:href="#{/calendar/20220301}">show</a></li>
</ul>
......
<div th:each="task : ${taskList}">
<label th:text="${task.name}"></label>
</div>
<!-- the rest is irrelevant to the question --!>
.......
</html>
So whenever I click on the <a> elements, the client sends a request to the server, and the URL is handled by GetMapping method, returning the tasks. But while this happens, the page is also refreshed. Is there a way to display the tasks without having to refresh the page?
I tried returning void from the display method, but Spring ends up automatically returning /calendar/{date}, and it's still not what I want
#GetMapping("/calendar/{date}")
public void displayTasksByClick(#PathVariable("date") int date, Model model) {
long userId = this.getCurrentUserId(); // just a method to get the user id requesting the task
List<Task> taskList = taskService.findByDateAndUserId(date, userId);
model.addAttribute("taskList", taskList);
}
For your current implementation, no, it is not possible. You have to refresh the page for the tasks to be displayed. That's how server side rendering works. The page is created on the server with the dynamic data, then the static page is returned to the browser.

Login to external website on click of button

I am trying to make a button using jquery POST method. When the button is clicked I m trying to send the login credentials to server and log me in to this website: https://kintai.jinjer.biz/sign_in
However I am not getting any response from server.
Any ideas woud be highly appreciated
My code is :
<head>
<title> Approach to Login</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"</script>
<script>
$(document).ready(function() {
$("button").click(function(){
$.post("https://kintai.jinjer.biz/sign_in",{
company_code:"1234"
email:"1234"
password:"d5817096"
},function(response){
alert("success");
});
});
});
</script>
</head>
<body>
<button> Login </button>
</body>
Change the URL of your API from https://kintai.jinjer.biz/sign_in to https://kintai.jinjer.biz/v1/sign_in. This is the URL where API is routing. The link you were trying to navigate is the url to only show login page and there is different URL for login post request with v1 in it
You can also find out API request details by routing to login URL https://kintai.jinjer.biz/sign_in and use the network section
$.post("https://kintai.jinjer.biz/v1/sign_in", {
company_code: "1234",
email: "1234",
password: "d5817096"
}, function (response) {
alert(response);
});
API Response
{"code":500,"message":"入力項目に誤りがあります","data":{}}

Link or button that sends a POST but does not navigate

I need an anchor tag or button that sends a POST to a URL but doesn't navigate to anywhere.
This might not comply with current standards, but it works in Chrome.
<!DOCTYPE html>
<iframe style="display:none;" name="some"></iframe>
<form method="POST" target="some">
<button class="btn" style="margin:0px 10px 15px 0px;" type="submit"
formaction="http://www.example.org:1234/test?P1=X">Test</button>
</form>
In order to post the data without navigating to another page or refreshing the same page, you need to use Ajax.
From your code, I assume you are using jQuery. In jQuery, there are functions that allow to implement Ajax easily.
I will add a sample code below for your reference.
$("#myLink").click(function(event) {
event.preventDefault();
var url = "http://example.com"; //The url/uri where you want to post the data to
var data = {field1: "data1", field2: "data2"}; //Your data
$.post(url, data, function(data, status) {
//Data and status from server after posting your data
console.log(data);
console.log(status);
});
});
And your a tag will remain the same.
Send

I am practicing Angular JS in Brackets. While using Value Recipe, I am not getting correct output

I am not getting the expected message when using value recipe.
I am getting output as {{message}}, but I am expecting "hai services are working!!"
Please share where I am going wrong.
HTML code: Injector.html
<!DOCTYPE html>
<html>
<head>
<title>Practicing Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="Injector.js"></script> <!-- Injector module file name -->
</head>
<body ng-app="injectormodule"> <!-- root module-->
<div ng-controller="controllerInjector">
{{message}}
<!-- controller name-->
</div>
</body>
</html>
Controller: Injector.js
var app = angular.module("injectormodule", ["servicemodule"])//name of service is servicemodule
.controller("controllerInjector", ["$scope", "message", function($scope, message){
$scope.message = message;
}]);
Service:(Value Recipe)
var myapp = angular.module("servicemodule", [])
.value("message", "hai services are working!!");
You have to define your servicemodule before your injectormodule, otherwise its creation will fail (since unable to find the servicemodule dependence).
Since the injectormodule failed from being created, the ng-app="injectormodule" will also be unable to bootstrap Angular on your DOM, thus won't interpret things like double brackets ({{ message }}).
Here is a working codepen.
You need to Inject your service into controller and need to create same module.
See this sample working fiddle which use service method to get text.
See other fiddle link also in comments

Angular fails to bind expression

I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.