We Keep Coding

ng-select not displaying search values properly after pasting in values

When trying to update array of strings acting as the model for ng-select, the values do not display properly in the search box itself.
the values that are showing up properly, are the ones that are selected from the dropdown, the ones that do not display properly are numbers I am trying to add on to the list manually
select box in template:
<ng-select
id="oNumberSelect"
[items]="ownerNumberResults | async"
[typeahead]="typeAhead$"
bindLabel="desc"
bindValue="code"
dropdownPosition="bottom"
[(ngModel)]="selectedOwnerNumbers"
(ngModelChange)="handleSelectionChange()"
[multiple]="true"
[searchable]="true"
multiple="true"
style="overflow-y: auto; width: 100%"
appendTo="body"
(paste)="handlePaste($event)"
minTermLength="3"
[addTag]="true"
>
</ng-select>
methods referenced:
handlePaste(pasteEvent: ClipboardEvent): void {
pasteEvent.stopPropagation();
pasteEvent.preventDefault();
const clipStrings:string[] = [...pasteEvent.clipboardData.getData('Text').trim().split(/[\s,)]+/)]
this.selectedOwnerNumbers = [...this.selectedOwnerNumbers, ...clipStrings];
}
searchOwnerNumbers(): void {
this.ownerNumberResults = this.typeAhead$.pipe(
distinctUntilChanged(),
debounceTime(500),
switchMap(term => {
return this.ownerHttpService.searchOwnerProperty('ownerNumber', term);
}
)
);
}
handleSelectionChange(): void {
console.log(this.selectedOwnerNumbers)
}
select variables:
selectedOwnerNumbers: string[];
typeAhead$ = new Subject<string>();
ownerNumberResults: Observable<Option[]>;
I have tried using sets, arranging arrays differently, concatenating the pasted values, but i cant get them to show up in the UI correctly

this usually happens if the bindValue and bindLabel are different.
try changing the handle paste logic like this
handlePaste(pasteEvent: ClipboardEvent) {
pasteEvent.stopPropagation();
pasteEvent.preventDefault();
const clipStrings: string[] = [
...pasteEvent.clipboardData
.getData('Text')
.trim()
.split(/[\s,)]+/),
];
this.selectedOwnerNumbers.push(this.ownerNumberResults.find(result => result.desc === clipStrings[0]).code);
this.selectedOwnerNumbers = [...this.selectedOwnerNumbers]
}

React.js - Done a API fetch that renders all items, now I want to be able to route on each item to their "own" page with JSON info

I have created an React site that renders all items inside an API Fetch on a page. What I want now is to be able to press each item that renders and be able to get routed to a new component that shows "more" info about that item.
Below I have the following code that takes in the "input" that you can use to search for all items or for a specific item.
const AgentSearch = (e) => {
e.preventDefault();
function capitalizeName(input) {
return input.replace(/\b(\w)/g, (s) => s.toUpperCase());
}
console.log('you hit search', input);
dispatch({
type: actionTypes.SET_SEARCH_TERM,
term: capitalizeName(input),
});
//do something with input
history.push('/findagent');
};
return (
<form className='search'>
<div class='search__input'>
<SearchIcon className='search__inputIcon' />
<input value={input} onChange={(e) => setInput(e.target.value)} />
</div>
Here is the code that renders all items:
eachName = data.map((item) => {
return (
<tr>
<td class='text-left'>{item.name}</td>
<td class='text-left'>{item.agency}</td>
</tr>
);
});
Basically what I would like to do is to "catch" the {item.name} and put that into a new query into the fetch once you press that item on the list that got created.
I tried to create a button that covers the whole class and then put {item.name} as input, but that does not work, also tried to make a "fake" input window that has the {item-name} stored for each item on list, even though the {item-name} gets onto the input window, once i push the button that its connected to, it says it doesn't have any value.
Does anyone know of any clean idea for this? I'm new to React so this might be really easy, haha.
Thanks!

The simplest way is to do onCLick on the td. See the code below.
const eachName = data.map((item) => {
return (
<tr>
<td class='text-left' onClick={() => handleNameClick(item.name)}>{item.name}</td>
<td class='text-left'>{item.agency}</td>
</tr>
);
});
You can define the handleNameClick function. You'll get the item.name as the parameter. See below.
const handleNameClick = itemName => {
//your code to send request for the clicked name
}

Changing an Input value in Blazor by javascript doesn't change it's binded property value

I'm building a website using app.net core 3.1 with blazor.
In one of my components I have :
<input #bind="Message" type="text" id="input-message"/>
Message is just a string property.
and I have javascript:
document.getElementById('input-message').value = 'some text';
The problem is after running the above js, <input> value changes but Message value doesn't, and of course if I type or paste something inside <input> , Message value changes too.

Apparently changing <input> value or any other changes in DOM by javascript doesn't change State, so blazor won't re-render the component. Even calling StateHasChanged(); manually in your razor page won't work.
To get this done, you just have to trigger the same DOM events that occur if the user modifies the <input> normally, just like below:
var myElement = document.getElementById('input-message');
myElement.value = 'some text';
var event = new Event('change');
myElement.dispatchEvent(event);

You shouldn't change the input value directly in javascript, what you should do is call a c# function that updates the value and then it will update the javascript.
Instead of doing
document.getElementById('input-message').value = 'some text';
You should do something like
DotNet.invokeMethodAsync('UpdateMessageValue', 'some text');
Where you have
public void UpdateMessageValue(string value){
Message = value;
}
And because you are using bind in the input, the value of document.getElementById('input-message').value will be changed, and the value in the c# will also be changed.
This answer isn't complete, I'm passing you the idea on how to do it and not the correct code to solve your case, but if you want more information on how to do it, you can take a look at Call .NET methods from JavaScript functions in ASP.NET Core Blazor.

If you don't have control over the third-party lib script that is modifying your input field you can always use the following solution. The concept is the following:
After rendering the component we call JS to start intercepting the all input fields value setters, then we get our callback in Blazor from JS. Blazor then dispatches to appropriate field.
Fields example:
<div class="input-group input-daterange" data-date-format="dd.mm.yyyy">
<input type="text"
id="InputDateFrom"
#bind="InputDateFrom"
class="form-control text-center" placeholder="От">
<span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input type="text"
id="InputDateTo"
#bind="InputDateTo"
class="form-control text-center" placeholder="До">
</div>
JS:
function WatchInputFields(callbackChangedName, dotnetRef) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
var originalSet = descriptor.set;
// define our own setter
descriptor.set = function (val) {
console.log("Value set", this, val);
originalSet.apply(this, arguments);
dotnetRef.invokeMethodAsync(callbackChangedName, this.id, this.value);
}
Object.defineProperty(HTMLInputElement.prototype, "value", descriptor); }
BLAZOR: Inside OnAfterRenderAsync call InitInputFieldsToTrackOnce on first rendering (or second one in case of server with prerendering):
private async Task InitInputFieldsToTrackOnce()
{
_objRef = DotNetObjectReference.Create(this);
await JS.InvokeVoidAsync(
"WatchInputFields",
"OnInputFieldChanged",
_objRef);
WatchInputField("InputDateFrom", (value) => { _InputDateFrom = value; Console.WriteLine($"Setting FROM to {value}"); });
WatchInputField("InputDateTo", (value) => { _InputDateTo = value; ; Console.WriteLine($"Setting TO to {value}"); });
}
void WatchInputField(string id, Action<string> onChanged)
{
InputFieldChanges.TryAdd(id, onChanged);
}
private ConcurrentDictionary<string, Action<string>> InputFieldChanges { get; } = new ConcurrentDictionary<string, Action<string>>();
private DotNetObjectReference<ShopDesk> _objRef;
[JSInvokable]
public async Task OnInputFieldChanged(string id, string value)
{
var ok = InputFieldChanges.TryGetValue(id, out Action<string> action);
if (ok)
action(value);
}
And dispose _objRef when disposing your component.

React Child Component Loop not redenring

Well I have one of the views from my single page application that is a Quiz, But when a click to generate the Components through a loop based on information on my array state he doesn't render it. I'm using react-router in the index.js maybe this information can help.
Gabarito.js
return(
<div>
<h1 className="display-1">Resposta-#{this.props.chave}-
{this.props.alternativa}</h1>
</div>);
Quiz
state = {
respostas:[10],
gabarito:['Verdadeiro','Falso','Falso','Verdadeiro','Verdadeiro','Falso','Verdadeiro','Falso','Verdadeiro','Verdadeiro'],
correcao:[],
novogabarito: this.eachcomponent
}
alterarevento = (evento,index) =>{
let array = this.state.respostas;
array[index] = evento.target.value;
this.setState({respostas:array});
console.log(this.state.respostas[index])
}
gerargabarito = () =>{
for(let n=0;n<10;n++){
if(this.state.respostas[n]===this.state.gabarito[n]){
this.state.correcao.push('Certa');
}
else{
this.state.correcao.push('Errada');
}
}
console.log(this.state.correcao);
}
eachcomponent = () =>{
return(this.state.correcao.map(resposta=><Gabarito chave={this.state.correcao.indexOf(resposta)} alternativa={resposta}/>));
}
Render of function
<div className="row justify-content-center">
<span id="teste">{this.state.novogabarito}</span>
</div>
</div>
);
}
}

Perhaps I am overlooking something...but it does not look like you are ever invoking your alterarevento and gerargabarito functions. So when you call your eachcomponent your correcao array in your state is still empty so you are not mapping anything.
Before your return statement in your eachcomponent function, try logging correcao to the console to see if it is empty.
A word of caution: you should never manipulate your state directly. So, your this.state.correcao.push('Certa');
line should be:
this.setState({ correcao: [...this.state.correcao, 'Certa'] });

How do I populate a list field in a model from javascript?

I have a Kendo.MVC project. The view has a model with a field of type List<>. I want to populate the List from a Javascript function. I've tried several ways, but can't get it working. Can someone explain what I'm doing wrong?
So here is my model:
public class Dashboard
{
public List<Note> ListNotes { get; set; }
}
I use the ListNotes on the view like this:
foreach (Note note in Model.ListNotes)
{
#Html.Raw(note.NoteText)
}
This works if I populate Model.ListNotes in the controller when the view starts...
public ActionResult DashBoard(string xsr, string vst)
{
var notes = rep.GetNotesByCompanyID(user.ResID, 7, 7);
List<Koorsen.Models.Note> listNotes = new List<Koorsen.Models.Note>();
Dashboard employee = new Dashboard
{
ResID = intUser,
Type = intType,
FirstName = user.FirstName,
LastName = user.LastName,
ListNotes = listNotes
};
return View(employee);
}
... but I need to populate ListNotes in a Javascript after a user action.
Here is my javascript to make an ajax call to populate ListNotes:
function getReminders(e)
{
var userID = '#ViewBag.CurrUser';
$.ajax({
url: "/api/WoApi/GetReminders/" + userID,
dataType: "json",
type: "GET",
success: function (notes)
{
// Need to assign notes to Model.ListNotes here
}
});
}
Here's the method it calls with the ajax call. I've confirmed ListNotes does have the values I want; it is not empty.
public List<Koorsen.Models.Note> GetReminders(int id)
{
var notes = rep.GetNotesByCompanyID(id, 7, 7);
List<Koorsen.Models.Note> listNotes = new List<Koorsen.Models.Note>();
foreach (Koorsen.OpenAccess.Note note in notes)
{
Koorsen.Models.Note newNote = new Koorsen.Models.Note()
{
NoteID = note.NoteID,
CompanyID = note.CompanyID,
LocationID = note.LocationID,
NoteText = note.NoteText,
NoteType = note.NoteType,
InternalNote = note.InternalNote,
NoteDate = note.NoteDate,
Active = note.Active,
AddBy = note.AddBy,
AddDate = note.AddDate,
ModBy = note.ModBy,
ModDate = note.ModDate
};
listNotes.Add(newNote);
}
return listNotes;
}
If ListNotes was a string, I would have added a hidden field and populated it in Javascript. But that didn't work for ListNotes. I didn't get an error, but the text on the screen didn't change.
#Html.HiddenFor(x => x.ListNotes)
...
...
$("#ListNotes").val(notes);
I also tried
#Model.ListNotes = notes; // This threw an unterminated template literal error
document.getElementById('ListNotes').value = notes;
I've even tried refreshing the page after assigning the value:
window.location.reload();
and refreshing the panel bar the code is in
var panelBar = $("#IntroPanelBar").data("kendoPanelBar");
panelBar.reload();
Can someone explain how to get this to work?
I don't know if this will cloud the issue, but the reason I need to populate the model in javascript with an ajax call is because Model.ListNotes is being used in a Kendo Panel Bar control and I don't want Model.ListNotes to have a value until the user expands the panel bar.
Here's the code for the panel bar:
#{
#(Html.Kendo().PanelBar().Name("IntroPanelBar")
.Items(items =>
{
items
.Add()
.Text("View Important Notes and Messages")
.Expanded(false)
.Content(
#<text>
#RenderReminders()
</text>
);
}
)
.Events(e => e
.Expand("getReminders")
)
)
}
Here's the helper than renders the contents:
#helper RenderReminders()
{
if (Model.ListNotes.Count <= 0)
{
#Html.Raw("No Current Messages");
}
else
{
foreach (Note note in Model.ListNotes)
{
#Html.Raw(note.NoteText)
<br />
}
}
}
The panel bar and the helpers work fine if I populate Model.ListNotes in the controller and pass Model to the view. I just can't get it to populate in the javascript after the user expands the panel bar.

Perhaps this will do it for you. I will provide a small working example I believe you can easily extend to meet your needs. I would recommend writing the html by hand instead of using the helper methods such as #html.raw since #html.raw is just a tool to generate html in the end anyways. You can write html manually accomplish what the helper methods do anyway and I think it will be easier for you in this situation. If you write the html correctly it should bind to the model correctly (which means it won't be empty on your post request model) So if you modify that html using javascript correctly, it will bind to your model correctly as well.
Take a look at some of these examples to get a better idea of what I am talking about:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
So to answer your question...
You could build a hidden container to hold your list values like this (make sure this container is inside the form):
<div id="ListValues" style="display:none">
</div>
Then put the results your ajax post into a javascript variable (not shown).
Then in javascript do something like this:
$('form').off('submit'); //i do this to prevent duplicate bindings depending on how this page may be rendered futuristically as a safety precaution.
$('form').on('submit', function (e) { //on submit, modify the form data to include the information you want inside of your ListNotes
var data = getAjaxResults(); //data represents your ajax results. You can acquire and format that how you'd like I will use the following as an example format for how you could save the results as JSON data: [{NoteID ="1",CompanyID ="2"}]
let listLength = data.length;
for (let i = 0; i < listLength; i++) {
$('#ListValues').append('<input type="text" name="ListNotes['+i+'].NoteID " value="' + data.NoteID +'" />')
$('#ListValues').append('<input type="text" name="ListNotes['+i+'].CompanyID " value="' + data.CompanyID +'" />')
//for your ajax results, do this for each field on the note object
}
})
That should do it! After you submit your form, it should automatically model bind to you ListNotes! You will be able to inpsect this in your debugger on your post controller action.