Filter not working on Tablesorter 2.17.8 > probably my bad - tablesorter

Been working on getting the UITheme Widget (Bootstrap v3.x) version going to behave exactly the same as this. https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html.
Paging & sorting are working fine. When I click on a search box in the 2nd row to type something, for some strange reason, the sort feature fires & as I type nothing happens.
Ive checked over the head code to compare with the documentation & they are the same. When I inspect with Chrome, I can see an additional class of table sorter-header-inner yet this is not in the code of the 2nd row (search row)
An example page with my code can be found here
It could very well be that I have not added a css file or something. Ive searched the files that come with the download above & can't seem to find any additional files related to a filter widget.
Would really appreciate some assistance getting this nailed.
Thanks in advance.
Todd

Thanks #Mottie, Little bit embarrassing & a trap for new players but I found myself inspecting elements & copying that code directly into the header. not following your documentation to the letter & simply having say English and letting all the magic happen behind the scenes... I'm probably not the first person to have tried this but hope other newbies benefit from me sharing

Related

when removing element from form array with react-final-form, the displayed value of the <input> does not update, but final-form data object does

This is a bizarre situation. I have simplified an example of react-final-form-array that allows me to add elements to my form, and i can extend an array of objects. It is very similar to the simple example provided by react-final-form-arrays. The array works just fine, but the issue im having is that when i try to REMOVE a specific element, the actual value displayed in the inputs doesnt change. So for example, with images:
Here we can see i can add customers to a list, which makes an array of objects. This works great. Now, let's say i want to get rid of the first element. i click the X, and what happens?
Here we can see that the form data properly removed the first element i wanted to remove, however, the actual value DISPLAYED on the inputs is still John Doe, though the form knows it's Mary Jane. When i click on the inputs, they seem to update to the correct values. But this is not what should be happening.
The STRANGEST thing though, is that i made a codesandbox you can see here https://codesandbox.io/s/agitated-wilson-5xlqq
It has the exact same code I have on my app, and it works as expected! So i cant even recreate the bug and i made sure the dependencies are the same versions im working with. I can only recreate it in my own setup, and i dont understand why that is.
I tried with chrome, safari and firefox and they all seem to be doing the same thing on my computer and i even tried on my phone by connecting to my react server that runs on my laptop, and they all show the same behavior.
I dont know what i could be, versions, react, if anyone has any idea or has had a similar issue in the past, PLEASE HELP. I won't paste my code here so as not to bloat this post, but you can see it's literally the exact same code in the sandbox i linked above.
EDIT: I want to point out another bug that occurs, and thats once i remove the first element, if i try to edit it, it pushes another field into the array with the input i just added, as if it were bound or something. I wish i could recreate it on codesandbox
Try deleting your node_modules folder and reinstalling them. Are you seeing any errors in your console log?

OrangeHRM Custom Fields

I am trying to change the number of custom fields I can create in OrgangeHRM PIM section.
I have found a few articles on this site that say what part of the code to change but non saying where to find the file where the code is stored is in.
If anyone can help then that would be great.
I am running version 4.0 of OrangeHRM.
Thanks
orangeHRM have slots for custom field (i dont remember, but i think 10 slot in orange 4.0), you can use this for put what you need.
Out the box, you can follow guides for add more custom or pre-format fields, but not is more recomendable, this can make broken code.
meanwhile, you think work out the box, remember orangeHRM is a symfony based software, if you know how work symfony (MVC framework), work it whit OrangeHRM is more easy
good luck

Why does the angular-material `Getting Started` example not actually work?

Is it just me, or is the angular-material "Getting Started" example broken?
On that page (link above), there's an inline codepen to show using angular-material. But the demo doesn't work! (In particular, I don't see a button to collapse the sidebar.)
Since I used this example in my started project, I spent quite some time troubleshooting it -- to no avail. Then, I realized the example itself it may be broken. And sure 'nuff, it is!
Does anyone know what the actual bug is, so I can work around it on my test app? It must have worked at some time; but I can't figure out why it's broken now.
Thanks!
That particular pen is working fine for me but I have noticed a few are not working, and it's due to the angular-material.js link being incorrect in the dependencies (under the pen's settings) the link provided redirects to the CSS.
This is intentional - the sidebar only becomes collapsable on smaller screens and is open on larger screens. Shrinking your browser window will show the collapse button.
That being said, the Getting Started page is definitely in need of an update. It is a good guide for a basic page structure, but the individual demo pages will be a lot better if you're looking to try out some of the components. (Every demo has a CodePen link to open an editable version.)

Changing a subarray in document will not rerender with proper order

I am using jQuery UI sortable to update the order of an array stored in a container document. When the sort fires the "stop" method, it rebuilds the array and orders it based on the new DOM layout. It all works fine and the updated document reflects the proper order. HOWEVER, the dom reloads and the order is back to what it was.
When I physically refresh the page it actually shows the proper order. It's just that on-the-fly changing of the array won't just re-render itself properly.
Interestingly enough, this problem has only cropped up in 0.9.4, so it may be a bug with meteor, just not sure if there was a change that would affect what I'm trying to accomplish.
I'd provide code examples if needed, but since the code itself seems to be working properly and the each not updating to reflect the order, i'm not sure it'll help at all.
Thanks!
UPDATE
I've put together a standalone demo of the problem, listed out in my comment below:
Ok, here's a crazy example of the issue:
demo: app-9ryym2m2.meteorpad.com
source: meteorpad.com/pad/uQ42DRH95JcHtKnb9
Try doing some sorting of items to see part1 of the issue. Next, after sorting, try hitting the togglers a few times, especially within the list of items you sorted. That's part2 of the issue. Now, if you refresh the page, everything gets caught up. Wat.
Double Update
Thanks to aldeed over at Github, I've got a solution: https://github.com/meteor/meteor/issues/2944
By changing my sub-document reference key from 'id' to '_id', Blaze seems to pick up on the changes to sorting no problem!
I confess that I haven't dug into your code, but the way it is updating indicates that you are picking up the previous state rather than the updated state. Wherever you drag, the final state reflects the last place you dragged to (even though it was probably in the wrong place when you started). Perhaps an order-of-execution/async bug?
Have you seen the drag and drop demo that was put together for blaze by Avital Oliver (Meteor core dev) when the blaze rendering engine came out? You can watch a video and check out the repo. If you try the demo and it fails on the current version of Meteor, you can submit an issue there and get some support from the pros :)

Why does my CSS go screwy "sometimes"

A website of mine is behaving weirdly. The layout sometimes is fine, and sometimes it is screwy. An example page that I see the problem on is this one: link
Disclaimer: I have yet to start my investigation into cause in earnest. I am turning to Stackoverflow because I am lazy and I hope someone will say "That happened to me once, it is probably this...". So please, no one get stuck into this working out this issue if it is something you have never seen before, as it wouldn't be fair as I have not done it myself.
Ok, some background:
The problem usually (maybe always) occurs when first viewing the page
The problem does not show up always, only sometimes
When the page shows up munged, if you refresh it usually reloads looking as it should
The site is a rails app
The css is passed through the neat Smurf Gem, which automatically minifies the CSS and Javascript on the page.
The layout problems happen in firefox (both linux and winXP)
The CSS is served up in the production environment using the ":cache => true" option which concatenates all the css files into one file
Anyway, I am hoping that this has happened to someone before and it will be really simple to fix. If not, I'll go and investigate and return with the solution (or a request for more help).
Thanks in advance!
James.
[edit]I added the first two bullet points, inspired by the comments and first answer[/edit]
We have had something similar when using HAML and SASS that resulted in the CSS being completely unavailable. It only happened on deploys. We determined it was a combination of the Rails stylesheet merging and the generation of the CSS from SASS. Sass was not done generating the CSS, which it did so on the first request to the application, when Rails attempted to merge it all together. The result, a corrupt useless CSS file. Then we stumbled upon this article which has a solution for preventing this issue.
Based on all this, my best guess is that the Smurf gem is attempting to generate your file on the first request, but Rails is serving it out before its done. The generation completes then each following request is fine. If this is the problem then the only solution i know of is to get the file generated before the first request. Of course, this does assume that it is related to deployments or application restarts in some way.
Peer
I had such a problem. The problem was only at the first time the page was loaded. Just reload it and it was fine.
The problem in my case was that the images where not there in the cache for the first time so the browser didnt know it's dimensions when preparing the page which caused the problem
If an image doesn't have a height/width assigned to it, a place is created on the page and it's put there. If the image doesn't quite fit, the browser may not know this until it's refreshed. Then it already knows the size and can properly fit it onto the page.

Resources