|
It's a famous Framework but not the one and the best.
|
|
|
|
|
Somebody wrote a bunch of useful functions in JavaScript that were easier to use than native JavaScript. They called it jQuery.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
It’s some functions that are easier to use than JavaScript
|
|
|
|
|
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
|
|
|
|
|
So I created this user interface to manage the sub categories of a category.
I have the whole document loaded in Angular V7+ as a model, and I just list the sub categories in a table.
Now I have a search interface in which I'd like to query to sub categories to find a specific one.
In all my other uses of search, I call a service to .Net Core and let core find the answer and return them. Well that's easy because I'm loading documents. But this time I'd like to just search the model in the DOM. In other words find the data within the document. This way I can edit the document and return the whole document upon a change and let Core update it.
So I can find the Sub Category, but I'd like to reorder the array. Show the search results first and then the rest in TypeScript. Right now I'm just loading the result in a Modal UI for editing. But I will run into this in the future so I should figure it out.
Not sure if I'm approaching this right or not as far as my document design goes. Of if it's not feasible to do and I should write a service for it and let Core do the work.
I looked at this javascript - Reordering arrays - Stack Overflow. I can sort the list, and splice, but this is more complicated to me.
By the way, result just returns 1 record even if 2 exists.
eg.
{
"_id" : "5d702eab43c22b1674a8e680",
"Name" : "SSD Drives",
"Description" : "Solid State Hard Drives",
"Image" : {
"_id" : null,
"Name" : null,
"Alt" : null,
"Data" : null,
"Base64" : null,
"Url" : null,
"Type" : null
},
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-04T21:37:47.331Z"),
"UpdatedOn" : ISODate("2019-09-06T16:58:16.464Z"),
"Selected" : false,
"SubCategories" : [
{
"_id" : "5d717a48675cc0229cf15ee5",
"Name" : "SATA",
"Description" : "2 1/2\" Sata 3 Drive",
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-05T21:12:41.633Z"),
"UpdatedOn" : ISODate("2019-09-05T21:12:18.721Z"),
"Selected" : false
},
{
"_id" : "5d717b54c4653d1c24753241",
"Name" : "PCIe",
"Description" : "PCI Addon Card with NVMe",
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-05T21:17:08.370Z"),
"UpdatedOn" : ISODate("2019-09-05T21:17:04.806Z"),
"Selected" : false
},
searchSubCategories() {
this.query = this.subCategoriesForm.controls["searchQuery"].value;
if (this.query) {
const result = this.model.SubCategories
.find(q => q.Name.toLowerCase().includes(this.query.toLowerCase(), 0)
|| q.Description.toLowerCase().includes(this.query.toLowerCase(), 0));
if (result) {
this.subCategoryEditorForm.controls["subCategoryId"].setValue(result.Id);
this.subCategoryEditorForm.controls["subCategoryEditorMode"].setValue("EDIT");
this.subCategoryEditorForm.controls["name"].setValue(result.Name);
this.subCategoryEditorForm.controls["description"].setValue(result.Description);
this.subCategoryEditorForm.controls["createdBy"].setValue(result.CreatedBy);
this.subCategoryModal.show();
}
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I'm getting closer now.
Getting better with push, unshift and splice now.
I changed the way the interface works, where I can now reload the original sub categories after search with a reload button. And instead of sending the category back to the .Net API, I rewrote the API to work with one sub category at a time.
Just need to figure out how to get more than 1 result back.
searchSubCategories() {
const query = this.subCategoriesForm.controls["searchQuery"].value;
if (query) {
const results = this.model.SubCategories
.find(q => q.Name.toLowerCase().includes(query.toLowerCase(), 0)
|| q.Description.toLowerCase().includes(query.toLowerCase(), 0));
if (results) {
const index = this.model.SubCategories.indexOf(results);
this.model.SubCategories.splice(index, 1);
this.model.SubCategories.unshift(results);
}
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Okay, the reason that you're getting one result is that everything that you're doing is intended to operate on only one element. Array.find(), for instance, is basically the JS version of .FirstOrDefault(). Array.indexOf() is a single element as well.
The best thing to do in this case is to create a new array, populate it with your search results, and sort it based on your criteria.
For instance:
searchSubCategories() {
if(this.subCategoriesForm.controls["searchQuery"].value){
let query = this.subCategoriesForm.controls["searchQuery"].value.toLowerCase();
this.model.searchResults =
this.model.SubCategories.map(sub => {
if(sub.Name.toLowerCase().includes(query)){
return {
subCategory: sub,
foundIn: 'name'
}
}
if(sub.Description.toLowerCase().includes(query)){
return {
subCategory: sub,
foundIn: 'description'
};
}
});
this.model.searchResults.sort((a,b) => {
if(a.foundIn !== b.foundIn){
if(a.foundIn === 'name'){
return -1
}
if(b.foundIn === 'name')
{
return 1;
}
}
return 0;
});
}
}
This will give you an array attached to your model that has your subcategories, then you can data-bind that array to your result widget.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Wow!
Nathan Minier wrote: Okay, the reason that you're getting one result is that everything that you're doing is intended to operate on only one element. Array.find(), for instance, is basically the JS version of .FirstOrDefault(). Array.indexOf() is a single element as well.
I didn't know that but it makes sense since it behaves like that. I really need to take a night and read up on modern JavaScript/TypeScript and arrays. I was wondering if it was possible to do.
Map then Sort. I would of never guessed that "Map" would return multiple results, and it's use looks complicated but I get it. Nice job on this! You must have a ton of experience with modern JavaScript or was just curious last night and did the research I should of done. I can see where this knowledge can be really handy for me working with Angular/React/Vue.
Thanks Nathan.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Sure thing!
Map is honestly really easy. It just performs an operation on each element in the array (as defined in the anonymous function there) and will return a new array of items returned from that function.
If you're familiar with LINQ, think ".Select(x => function(x){ return something;});"
And yes, I've been putting myself through a Vue "upload" over the last couple of weeks, after finally biting the bullet and hopping on the webpack train, so this stuff is all fresh 
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
I opted for this. The foundIn forced me to create another class for search Results that wasn't compatible with what I have already. But your example works great, and I did rewrite it from scratch.
export interface SubCategorySearchResults {
subCategory: SubCategories;
foundIn: string;
}
export class SubCategories {
Id: string;
Name: string;
Description: string;
CreatedBy: string;
CreatedOn: Date;
UpdatedOn: Date;
Selected: boolean;
}
[{"subCategory":{"Id":"5d7fd71ef9a41e064ce3cbd9","Name":"Super Thick","Description":"Non moving gel","CreatedBy":"admin","CreatedOn":"2019-09-16T18:40:30.887Z","UpdatedOn":"2019-09-16T18:40:30.859Z","Selected":false},"foundIn":"Name"},{"subCategory":{"Id":"5d7fd63bf9a41e064ce3cbd8","Name":"Thick","Description":"Very Slow Moving Gels","CreatedBy":"admin","CreatedOn":"2019-09-16T18:36:43.762Z","UpdatedOn":"2019-09-16T18:36:43.718Z","Selected":false},"foundIn":"Name"},{"subCategory":{"Id":"5d7fd418f9a41e064ce3cbd6","Name":"Thin ","Description":"Fast moving","CreatedBy":"admin","CreatedOn":"2019-09-16T18:27:36.675Z","UpdatedOn":"2019-09-16T18:27:36.645Z","Selected":false},"foundIn":"Name"}]{
What I wrote, I went back to the const because it self creates a model and just rewrote my this.model.SubCategories.
It's a work in progress. Thanks!
searchSubCategories2(): void {
const query = this.subCategoriesForm.controls["searchQuery"].value.toLowerCase();
if (query) {
const results = this.model.SubCategories.map(sub => {
if (sub.Name.toLowerCase().includes(query)) {
return { subCategory: sub, foundIn: "Name" };
}
if (sub.Description.toLowerCase().includes(query)) {
return { subCategory: sub, foundIn: "Description" };
}
});
if (results) {
results.sort((a, b) => {
if (a.foundIn !== b.foundIn) {
if (a.foundIn === "Name") { return -1; }
if (b.foundIn === "Name") { return 1; }
}
return 0;
});
this.model.SubCategories = [];
results.forEach(result => {
this.model.SubCategories.push(result.subCategory);
});
console.log(JSON.stringify(results));
console.log(JSON.stringify(this.model.SubCategories));
}
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I changed the way how interface work and reloaded. It’s working.
|
|
|
|
|
$(document).ready(function(){
var obj1 = { }
var obj2 = { }
if(obj1 === obj2)
{
alert('true');
}
else
{
alert('False');
}
});
Why if(obj1 == obj2) returns false eventhough obj1 and obj2 are objects of same type?
|
|
|
|
|
Because the comparison is to see if they are references to the same object. And as you see they are two different objects.
|
|
|
|
|
OK, but then why then does this return True?
var obj1 = 2;
var obj2 = 2;
if(obj1 === obj2){
alert('true');
} else {
alert('False');
}It's the same code but for assigning an integer to the obj variables rather than an empty JSON string.
|
|
|
|
|
Because the value 2 is a constant so the references will point to the same item.
|
|
|
|
|
If I "Inspect" a pop-up window/message box on chrome browser (by right clicking a web-page in chrome browser) there is a field called "Accessibility".
Under "Accessibility", there are "GenericContainer" which has "list". this list has a number of names as values (e.g. different type of pen).
I would like to copy all values (names) of "list" and separate each value (names) by ";" when I click that pop-up/ message box using a Add-On in Chrome.
How can I make that Add-On?
I understand that I have to write javascript to execute with other .js file, for example, codes in this tutorial-
https:
But I don’t know related function I need to call.
Please keep it in your mind that I am new. Thanks in advance!
PS:
At least provide some tutorial, where I can find related instruction.
|
|
|
|
|
Member 14567950 wrote: Please keep it in your mind that I am new.
Then I suggest you start with something simpler. there are many articles around that explain how to writ Chrome addins, but you need a good technical background first.
Member 14567950 wrote: codes in this tutorial-
https://markb.uk/building-a-simple-google-chrome-extension.html
But I don’t know related function I need to call.
Try contacting the author for advice.
|
|
|
|
|
<SCRIPT language="javascript" type="text/javascript">
function salary()
{
a=Number(document.calculator.hourlyrate.value);
b=Number(document.calculator.hoursworked.value);
c=Number(document.calculator.weeks.value);
d=(a*b*c);
document.calculator.total.value=d;
}
function points()
{
a=Number(document.calculator.age.value);
b=Number(document.calculator.yos.value);
c=((a*2)+b);
document.calculator.total2.value=c;
if (c < 60) {
document.calculator.EmployerContribution.value="You are at 1% Employer Contribution";
}
else if (c > 60 && c < 89) {
document.calculator.EmployerContribution.value="You are at 3% Employer Contribution";
}
else if (c > 90 && c < 119) {
document.calculator.EmployerContribution.value="You are at 5% Employer Contribution";
}
else if (c >= 120) {
document.calculator.EmployerContribution.value="You are at 7% Employer Contribution";
}
}
</SCRIPT>
I am trying to take the value from for the salary() function and use it with the points function().
|
|
|
|
|
Add a return statement to the end of the salary function so you can capture its result. See JavaScript Functions[^].
|
|
|
|
|
I have the same problem with you, hope someone could help this pout
|
|
|
|
|
wrote: I have the same problem with you, hope someone could help this pout
An answer was given 5 days previous to your post. And it's very, very basic understanding of programming.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
The account you're replying to was a spammer:
spammer in forums - rinave - gone[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
As Richard already answered, but it appears another user did not understand, at the end of the salary function add
return d But you really should change the variable names to something that makes sense.
Then, in the point function you can do something simple like this:
var sal = salary();
sal will now have the return value from the salary function and you can use it however you need to.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I would expect the following two expressions to both evaluate to false:
2 < "12"
"2" < "12"
The second one returns false. That makes sense to me "1" is before "2". In the first case,
we are comparing a number with a string. I would expect the number 1 to be converted to the
string "1" and therefore to evaluate to false. However, it is evaluating to true. What am I missing?
Thanks,
Bob
|
|
|
|
|
BobInNJ wrote: it is evaluating to true
BobInNJ wrote: 2 < "12"
12 is getting converted to int.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
