Dynamic pagination button animations (jQuery) - javascript

I'm working on a project which involves creating a dynamic search bar which searches through a list of students and dynamically paginates the results (10 students per page):
https://github.com/KyleVassella/Dynamic-Paginated-Search/tree/page-button-animation-broken
I've succeeded in dynamically returning matched students and dynamically appending the correct number of page buttons based on the number of results.
My last requirement is include a simple animation when transitioning between pages. I'm stuck on this.
When you first load the page you'll find the search function works correctly - even clicking the pagination buttons animates like it should. But once you press one of the pagination buttons, the search function partially breaks (try searching something after you change pages). It still returns the correctly matched array of students (see the console.log and the appended page numbers), but some of the results seem to be invisible.
I believe the problem lies in my showArray2() function on line 50 (which contains my animation) or the fact that I called this function inside of a $(document).on(click) function on line 97 - not sure.
Perhaps I need to go about another way such as appending CSS classes - but I still can't figure out how to apply some sort of opacity change fadeout/fadein like I want with that method. Can you solve this using my current jQuery .animate() strategy and if not, what about a different way (CSS classes, etc)?

From a structural standpoint, I believe the issue has to do with you relying on a single allstudents students variable.
Each search needs to be treated as an independent collection, drawn from the true original set of all students.
That being said, I believe you are searching the entire collection when you're searching after paginating, but you need to reset the visibility state of the entire original collection of students upon the start of new search.
Your search is returning the correct results and writing them to the page, but they haven't had their visibility reset so that's why they're not showing up.
...also your git repo as it's currently structured doesn't work ;)

Related

Handsontable - hide specific row ( by cell value)

How to hide specific rows in Handsontable.
I have buttons in DOM, each of them should hide specific rows.
For example: click button with class `alarm' should shide all rows which second column has value 'alarm'.
For now i do ugly thing. Every button click i loop overy my tableData and delete datas with 'alarm' then just load data and render table. But i can't do that becouse i have some dynamic datas so after render their disapear.
eveGrid.loadData(tableData);
eveGrid.render();
Dynamically hiding rows is quite a complex task which is not documented in the Handosntable documentation. However, there is plenty of functionality available to implement it ourselves. As a matter of fact, I had to do this just last week so I can share with you a potential approach. It's really quite simple and similar to your solution, which is not ugly by the way!
What you want to do is keep two copies of your data. The first we can call data, and the second activeData. Initially, they both equal each other. Now this part is tricky and not easy to grasp but what you have to make sure is that these two arrays are DIFFERENT OBJECTS, but have the SAME REFERENCED ELEMENTS. What this means is that the arrays themselves are not clones, so an equality test would fail. However, their elements are clones. Your activeData elements are just references to the elements on data.
Once we have this set up, it's simple to implement the hiding of rows. Your click should look through data and set a new activeData based on the matching rows you want to display. Then just update handsontable with something like:
hotInstance.updateSettings({data: activeData});
And that's it! Note that that updating method will automatically trigger a render().
Let me know how it goes, I'm curious to see if other people can use this approach.

Efficiently rendering a large number of "select" elements

I'm writing a web application that displays a large number of rows of data (~2000 at present), each of which has a drop-down "select" element with ~100 options. Any of those options can be selected by default. I'm generating all the actual DOM elements client-side. My problem: rendering this beast takes ~4 seconds on my relatively recent machine, which is really suboptimal. I know the problem is specifically with all the select elements, because replacing them with a bit of static text or a single-option list causes render time to be nigh imperceptible.
The vanilla code, minus failed experiments (see below) is here.
Avoiding the suggestions of "paginate your data" and "don't have so many options in a select", what is the most efficient way I can write my append / render code, assuming I do have a legitimate reason to display that much data and have that many options? For my purposes, Firefox is the only platform I care about.
Things I have tried:
Using an async loop to append rows to the table (slower than a regular loop, and oddly didn't render the intermediate results)
Building up a string that represents the body of the table and inserting it into the DOM in a single call (almost identical performance)
Instead of inserting the entire options list, inserting a single-option "select" element, and then populating the entire list when the "select" element gains focus (presumably because someone is trying to change it). This was actually pretty high-performing for the initial render, but then populating the element with the full list caused some weird behavior, losing focus and never actually being able to "open" the select element.
Right now my default assumption is that the third option is the way to go, and I need to figure out how to do some bookkeeping about what has already been populated. But my suspicion is that there is a plainly better / faster / more idiomatic way to do this. Is there?
Yes, I would "lazily" generate and/or populate the dropdowns.
That is, only create and populate the dropdowns when the user clicks on them, as probably almost all of the dropdowns in the 2000 rows will never be used right?
Perhaps a select element might not be the best UI here too, but instead some kind of HTML menu like so: https://jqueryui.com/menu/ that is created, populated and displayed only when the user clicks on some kind of button to display it.

jQuery Show/Hide Multiple Comment Sections on One Page

Presently, I am using a script to show/hide comments on a number of WordPress-based sites. The script works as expected on essentially every site. However, I've run into an issue with a site using the Hero theme. On the index pages, the theme pulls the content from X number of posts. Unfortunately, this has the effect of calling the script multiple times and resulting in the first post getting X number of show/hide buttons and the other posts being unaffected.
I'm uncertain as to how to modify the script in order to target each of the comment sections individually. Naturally, the task would be easier if the theme author had not assigned all comment sections on index pages the same id (#commentBox). I've looked at limiting the scope of the script (i.e., to have each instance of the script affect only the post content within which it's contained) and changing the actual functionality of the script to account for the multiple comment sections. Unfortunately, I've not yet been able to get it working as intended.
Here is a link an index page displaying the issue: http://www.sitestyling.ca/abbyphotography/blog/. The first link (i.e., the one to the script) leads to a page which has the script implemented and functioning as expected.
Any help or suggestions would be greatly appreciated.
So to state the obvious here, having multiple elements with the same ID is very bad mojo. To whatever extent that you can control how these WP sites are loaded I would encourage you to work to modify the repeated injection of your script into the page since even after making a change, your script would be run repeatedly since you have multiple blocks defining document.ready functions. You could ameliorate that with a global to tell if your script had already fired but that's getting a bit hackish...
What I would suggest in principle is that you add logic to your script to do the following:
Find the offending duplicate ID items and rename them to something unique
Add a class that you can reference rather than an ID
Refactor your code to loop through the collection of items returned from the class selector
If really, really necessary you could also then have kept track of your renamed IDs, go retrieve them individually and reset them to the offending original duplicate ID name thus incriminating yourself for future page user
The first couple of points here could be done pretty simply with something like this:
var uniqueAppend = 1;
var tempName = 'commentBox';
while(jQuery("#commentBox").length > 0 ){
jQuery("#commentBox").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
}
Now you can find all your comment DIVs at once with jQuery(".commentContainer") and then iterate through that collection to take whatever actions you need.

living web page elements

I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.

Refreshing "online" users with JavaScript

I have a chat app where it shows users who are online (username + profile pic). I have an ajax poll that basically checks to see which users are still online, and refreshes the list automatically. Also, the list is ordered based on last activity.
The way I've been doing it is:
Get list of current online users
Clear existing elements
Re-add them (will be ordered correctly since the returned list from step1 is ordered)
This works fine in Chrome, but I notice in Firefox that it is causing a "flickering" effect while the images get re-added.
What is the best way to do this? It seems overly difficult to create an algorithm check which elements exist, if they are in the right order and move them, etc. Thoughts?
How often do you poll to see if users are still online?
I think the best way may be to give the user records unique ids so you can then check the list of users that were online against the new list of users that are now online.
fade away the users that have left and fade in any that have logged on.
It will be a much more elegant solution and it solves the problem you are having.
Firstly, I would try to "cache" the images separately, using the "preload" technique. That's when you create an Image object and set it's src to the URL of the userpic. Then you store all those objects in a global array. This will prevent the browser from getting rid of the images when they are no longer on the screen, so that it will not have to load them again when you reload the list.
If that doesn't help, I would actually reuse the existing list elements. I would just go over the elements, one by one, and replace their content with the appropriate content from the list. If I run out of existing elements in the process, I add new ones. If any elements are left over when the list ends, I remove them. This is a bit more complex, but actually not as complex as it looks at first glance.

Categories