Way to update specific values in Bootstrap cards - javascript

I apologize for the amateur question here, however, I am experiencing some issues with a quick demo website I am creating for a friend.
The purpose of the site is to take the total of all "credit card values", and then divide it by the total amount of "points" there are to arrive at the "points per dollar"
Once that is done, I'd like to multiply the "points per dollar" by the total amount of "points" that are specified in the dropdown menu by the user, and then update all of the cards that have something selected to be the proper math with their point values.
I've successfully done all the math and created functions, but I am unsure how to actually apply it to the specific cards that need it.
I've created functions to do the math, and update the header numbers, just not apply it to the respective cards.
My code can be found here
My website is running on an express.js server with e.js as the templating engine, with bootstrap and jquery.
Any suggestions/help would be very much appreciated.

Easiest way to do this is to assign a unique id to each card so that you can write the corresponding data.
Then you can simply do something like:
$(`#${id} .whatever-class-name-for-points-element`).html(points);
It's a bit hard to tell what's going on in your code since it's not a minimum, reproducible example, but assuming you're trying to write one "points" value per employee, you could add id="<%= sm._id %>" or similar to each employee card.
FWIW, you probably want to use the id higher up (like on the card) and then use a data attribute (e.g. data-id="<%= sm._id %>") on the input.
Happy to give you further advice if you create a working, minimal CodePen/CodeSandbox/etc.

Related

I am using MEN stack(mongo, express,node)

I'm working on a project wherein I am using a news api to show the contents of a specified user typed topic,for eg "technology" , but the problem is sometimes i get thousands of results and all are displayed on a single page,but i want the number of pages of the search result to change dynamically with the typed topic,
for example tech may have 100 pages while sports may have 500 pages.
How do i do this for my website?
Any sources,links,source code might help me a lot.
Thanks.
Use Aggregate paginate module (https://www.npmjs.com/package/mongoose-aggregate-paginate) for pagination and it will take page number and limit as an input and will provide you with that limit of results.
It will also help you to store how many pages are there with the limit decided.
I think you should look into 'pagination'. Basically, you set a number of items per page to return, divide the total number based on the items set per page, and pass in the starting and last index for fetching the data (like the first 2 parameters in a Array.slice method).

Compare two int columns in SharePoint list

I´m doing a course catalog app for sharepoint. And i have a list called Courses.
in that list i have two columns called: seats and FreeSeats.
When you make a new course the boss decide how many can apply to the course.
So for ex: 5 seats.
When the Fifth person apply there most be a stop.
So i thought if i have the column FreeSeats, it can count up everytime someone apply. And when it is the same as the column Seats it will NOT be able to apply.
So i guess i need some sort of count that add 1 everytime someone apply to the FreeSeat column. And in a if loop check if the value of freeSeats are smaller than Seats, you can apply. If its bigger than Seats it will come a stop message.
Someone have any idea how a code like this looks like? I have never done this before.
Since your new to this I would advise you go through this MSDN tutorial.
It outlines how you would do some basic CRUD functionality in a SharePoint app.
You can then adapt it for your particular purpose. This is how I started out :) good luck. Ignore the fact it mentions Napa the app structure should be similar in VS
MSDN SharePoint CRUD in App
Cheers
Truez
You can actually set this up without any code by creating a list of Free Seats with Titles ranging from 1 to #. In your signup lists you would create a lookup column for each course that points to the corresponding list of free seats and select the "Enforce unique values" option. That way, when a user signs up for the course, they must select one of the free seat values you have created, and cannot sign up for a value selected previously. You can use a workflow to update a list elsewhere to give you your signup counts for tracking if you wish.
To do this programmatically you would need a workflow or event receiver that counted the total number of list items with a Free Seats value selected and then remove the contribute rights for the list that people are using to signup. There is no other way to stop people from adding a new item once your quota is satisfied.

Fast managing of tables with ~10k rows in Javascript [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've been working with tables and a huge amount of data. There are a tables in my website with 10 thousand rows. This table has dynamic search, filters, etc. I've been using pure JavaScript considering performance, but it gets laggy with this amount of rows.
Do you guys know any alternative for pure JavaScript with better performance?
EDIT> I REALLY need to load the 10 thousand rows at once. I can load them all in the browser in 5 seconds. The main problems are the filters and search...
EDIT2> The search is dynamic. I can search by name and filter it by first character.
I've been working on it for months...
SEARCH:
search when the field has more than 3 characters and only when its length and characters has changed (onchange event on input may trigger multiple times when a character changes, so I make sure it only triggers once using some verifications)
each row that matches the searched string is coppied to another table. The original table is hidden and the new one is displayed.
when the user changes the search field or cancel the dynamic search, the new table is erased.
Conclusion: it's faster to create a new table with desired elements than hide the undesired ones.
FITLER
The rows are actually in 25 tables (A to Z + non-alphabetical characters)
When you select a character, only that table is shown
Conclusion: it's faster to hide a whole table than hide the
undesired rows
Thanks for the repplies. I've edited with some extra info so we can narrow the possible solutions...
I'm asuming you get the contents from database and load with with something like PHP (I'm going to asume PHP for now)
You could make the Javascript make an ajaxcall to a php-file which does the filtering (actually you should make the database do it, a lot faster!) and place the resulting table back on screen.
A faster method combined with the above might be this: Get all id's on the initial rows in an array and save those (in a session might work pleasant).
When you have to filter, don't make PHP get the whole table, just apply the filter to only the stored id's and send javascript the matching rows.
Then make javascript do something like this:
- set all visible
- set resulting id's to hidden (hidden in favor of remove, because I think a user might perform multiple filter actions?)
Another idea just popped in my head: If you don't need to display it on load, you can start the initial load with all tables hidden and a message "please search to display".
A common technique to handle this case is to load the data in memory or a subset of the data, and recycle your table rows such that you aren't actually ever creating thousands upon thousands of rows. You can get creative with this and create a web interface that seemingly scrolls endlessly but in reality you are just reusing dom elements and shuffling them around.
Most well-built data grid widgets whether they are on the web, mobile or even a desktop interface will employ this technique to handle your particular problem.
In most cases a user will never actually find themselves benefiting from seeing 10's of thousands of rows of data at once anyway.
fetch from the server only the things to be seen by the user, Like everyone has pointed out 10,000 rows needn't be there on that page.
you can use the concept of pagination and for every page few rows are fetched and shown . JQuery's Ajax is capable of calling the server side function to fetch rows to add them to your page.
don't know any backend details here, but in struts framework there is display:table tag and I believe in .NET framework there is GridView for pagination in the client side that you can look into
I'm just a student, newly joined to the community. Take what I say with a grain of salt.
I'm not sure why everyone is so much as blinking at the ten thousand rows business when we're measuring modern personal computers' memory in gigabytes.
Alright. I'm going to assume that what you're doing needs to be done in the browser, and so you can't switch to doing native code. In that case, looking for an alternative to Javascript won't get you much of anywhere. In the context of a browser, you're looking at an interpreted language. In terms of number of instructions the program ultimately has to run, the difference between one language or another is negligible in the face of how long it takes to be interpreted. Besides, Javascript has gotten nicely polished over the years.
So never mind that. There's a much more important thing to consider here, and it applies no matter what you're programming in or on: The cache(s). Igor Ostrovsky explains it beautifully; read it until you grok it.
So I'm guessing you have objects that would stringify to something like, "obj1 = {field-1:'a', field-2:'b', ..., field-n:'n'}". And you can select a field-i to sort by. The trouble with this is that when you sort by field-i, you're loading the entirety of obj1 into the cache, even though you don't need it. What you really want to do is load the field-i's forobj1, obj2, obj3, ..., objm all at once. So you look at an array, stringifying to something like: "field1 = [refToRow1, field1inRow1, refToRow2, field1inRow2, ..., refToRowM, field1inRowM]".
You might not be able to do fit all M rows in the cache, after all M==10000! But you can group them together into chunks that you could reasonably expect a cache to manage. Anyone got a good number for this? Say, 64kB? So you figure for each i in M you've got a reference, and a field that's probably just a reference to a short string (it'd be better if you could have the string itself right there, but I don't think Javascript works that way). So that's 8B? 8B*1024 = 64kB? Hell, if that's right, you could fit it all into the cache in two chunks, which means you'd want to do it in 4.
So now you've got a collection of smaller arrays, and you want to sort them. This is a classic application for B-trees. And while having a separate B-tree for each and every column in the table may seem like a lot, it's not.
Okay, so that handles sorting. You tell it to sort by a column, and the truth is it's already sorted! You're just repopulating the visible table using a different b-tree. You still need to handle filtering, but that's fine. You do some cache juggling as you find something to display and follow the reference to get the other fields, but I'd still expect this to go fast since you're skipping over so many rows.
Normally, I would say if you want to speed things up, look into multiprocessing. But I think browsers are still working to make that a thing with their Javascript implementations. Plus, while it would be well-suited for sorting, it would be a lot of effort to make it useful for the filtering part, and I expect you can do fine without.
I hope this isn't too scatter-brained, and that it gives you some ideas. Good luck!

Calculate html input field and allow user to modify said field

I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.
First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.

How to create an N:N relation editor in web page?

I have to create a small "who does what" web application for incoming letter routing:
there is a relatively long list (about 600 items) of employees;
there is a short list (about 5 items) of tasks;
when assigning a task to an employee, due date must be specified;
As a result, i need a list (sequence of items matters in this case, since the first employee in the list is considered the "main responsible person"):
John Smith - write a response letter - 20.01.2010
Frederica Minoso - review the incoming letter - 18.01.2010
Robert Geer - review the incoming letter - 18.01.2010
If we had, say, 10 employees, the design would be quite easy - a drop-down list of employees, a drop-down list of tasks, a date picker for due date, a "Add to list button"
Like this alt text http://naivist.net/tmp/layout.jpg
And of course, I would add a result list with "move up"/"move down" buttons besides it.
However, a drop-down list of 600 items is obviously too much; this means that some user searching by name, surname, department must take place.
I am skilled enough to technically create the application (JavaScript, jQuery and ajax requests being my friends), but the trouble is - how to design the interface of the web form so that the users would understand what exactly they are doing? How to lay out the items in form? What to show in the beginning, what to hide?
Maybe there are there some modern UI form patterns I could use here? For instance, maybe a text box where user can type in and auto-suggest with closest matches drops out?
Maybe some draggable/droppable pattern can be applied (for instance, after you have entered user's name, you drop it on an appropriate task)? How easily do users typically adopt to such non-standard interfaces?
To state a question - how do people typically solve this kind of data input problems? Have you seen good examples of this somewhere on the web? Tell me, because I can't think of any right now.
Sorry, there are many questions and many of them are discussable. Should I mark it as "community wiki"?
As soon as I saw the problem, I thought AutoComplete. Since you thought the same, it is probably the obvious solution to the problem. The "To" field of emails has the same issue - how to select that one person from 1,000s of contacts.
Yahoo has some good accessibility considerations to be sure that the AutoComplete field works in a manner that is obvious and consistent with typical behavior.
Since the task contains 5 items, drop downs are acceptable. The recommended upper limit for drop downs is 7 items, so you are within the limit. One suggestion would be to end the tasks with "by" or "on" so that the line reads like a sentence - John Doe writes a response letter on 22/01/2010. Also, including a little visual aid in the drop down could increase conprehension in some situations.
To begin with with, I'm not sure I agree with the non-standard interface part. I suppose it depends on who the users actually are, but I would definitely say that that kind of text box/auto search functionality is becoming very standard from airline booking forms to search engines.
About the selection method, I would go for the text box method, so that when a user types in text a search starts the results of which are displayed in a drop down. The search should of course search both surnames and first names with some kind of intelligent regex at least.
On top of that I would still add a selection field, maybe not a drop down but perhaps a list box that contains all the employees, possibly with options to order the names by surname or first. This would be for those who don't know the spelling of a persons name, or can't quite remember the name.
Otherwise the layout you have there seems to work for me. I wouldn't play around with dragging and dropping anything. This of course creates a nice feeling to it, but is way more unclear on what should be done to assign the tasks. If you find yourself writing instructions on how to use the thing then you've gone overboard.
The other thing that I thought of would be to have an appleish menu where you have an empty list at first and when you click on the list, the input fields appear. The problem with this is that since the UI doesn't have indication on what you should do to add stuff to the list, people are easily left baffled.

Categories