I have problems doing a simple ajax method and I have zero idea how to do it since most of my work was done by tutorials that don't explain the backend part of their app and don't have good examples.
I want to show a message from my backEnd and also want to put some text and show also a message with that text
I'm using html/css/javascript
HTML Part (Will be my UI)
<template id="checkHello">
<h3 class="hello">{{ hello }}</h3>
</template>
<template id="checkType">
<h2>Type Something:</h2>
<div id="Type_1">
<input type="text" id="edit type" placeholder="Type here something" />
<button id="type_s">Check</button>
<h2 class="type">{{ type }}</h2>
</div>
</template>
<!-- Here I have other code that works perfect-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
I also try something more simple but it didn't work
<div id="users_B">
</div>
<div id="users_C">
<input type="text" id="type" placeholder="Type here something" />
<button id="type_s">Check</button>
</div>
<!-- Here I have other code that works perfect-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
Javascript (here i have a little trouble and maybe my problem is here (where? idk))
$(function b() {
var $users_B = $('#users_B');
var $users_C = $('#users_C');
var $hello = JSON.stringify($('#hello'));
var $type = JSON.stringify($('#type'));
var myUser = $('#checkUser').html();
var myHello = $('#checkHello').html();
var myType = $('#checkType').html();
function checkHello(arroz_1) {
$users_A.append(Mustache.render(myHello, arroz_1));
}
function checkType(arroz_2) {
$users_A.append(Mustache.render(myType, arroz_2));
}
//-------------Hello-----------------------
//debugger;
//Just Here gives me error 400 idk why, not makes sense at all
$.ajax({
contentType: 'application/json; charset=UTF-8',
url: uri_hello,
type: 'GET',
dataType: 'json',
beforeSend: function (request) {
request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem("key"));
},
//this should return a simple string from de backEnd
success: function (data1) {
$.each(data1, function (i, arroz_1) {
//checkHello(arroz_1);
$users_B.append('<h3>' + arroz_1 + '</h3>');
});
},
error: function (xhr, textStatus, errorThrown) {
//gives me error but dont shows the error, shows something like this [Object: object]
console.log('XHR:' + JSON.stringify(xhr) + '\nTextStatus:' + JSON.stringify(textStatus) + '\nErrorThrown:' + JSON.stringify(errorThrown));
}
});
//-------------Type-----------------------
//This is Now the Problem, thu button doesn't work at all idk why
$users_C.delegate('.type_s', 'click', function () {
$.ajax({
contentType: 'application/json; charset=UTF-8',
url: uri_Type,
type: 'GET',
dataType: 'json',
beforeSend: function (request) {
request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem("key"));
},
success: function (data2) {
$.each(data2, function (i, arroz_2) {
//checkType(arroz_2);
$users_C.append('<h3>' + arroz_2 +'<p>' + $type + '</p></h3>');
});
},
error: function (xhr, textStatus, errorThrown) {
console.log('XHR:' + JSON.stringify(xhr) + '\nTextStatus:' + textStatus + '\nErrorThrown:' + errorThrown);
}
});
});
}
HttpGet Methods
[HttpGet("HelloWorld"), Authorize] //helloReply is a string //null
public async Task<ActionResult<HelloReply>> Hello([FromQuery] Empty_2 empty_2)
{
var hello = await _greetClient.SayNormalHelloAsync(empty_2);
return Ok(hello);
}
[HttpGet("TypeSomething"), Authorize] //string
public async Task<ActionResult<HelloReply>> Type([FromQuery] HelloRequest empty_2)
{
var hello = await _greetClient.SayHelloAsync(empty_2);
return Ok(hello);
}
GreeterService.cs
public override Task<HelloReply> SayNormalHello(Empty_2 request, ServerCallContext context)
{
return Task.FromResult(new HelloReply
{
Message = "Good Morning User, I hope you have a Good Day"
});
}
public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
{
return Task.FromResult(new HelloReply
{
Message = "You Type this:" + request.Name
});
}
This is what the User Need to See
So in the Message 1 will show the Greeter.cs message "Good Morning User, I hope you have a Good Day"
In the second message if I write the word "hello" in the input, and if I click on the button afterwards, the message that has to appear is this "You Type this:Hello"
So my question is: Whats is wrong with this? Is is the javascript Ajax Method? How to do it without destroying the part I have correct in HTML? Is there other way to do this without javascript and using the html file I have?
Any help is welcome.
Edit:
Now my problem is just in message 2, the old problem I need to change de [FromBody] to [FromQuery] and the url works fine. The first Message shows correct the string from the Greeter.cs, now my problem is getting data from that input and the button don''t work idk why.
