I have to hide some rows of a <table> which will contain specific words. I'm searching for these rows by using the :contains selector from jQuery and using .hide().
The problem is that it results in an unpleasant glitter showing those rows momentarily before they hide.
Is there an possibility of reducing that glitter, or bind some event to the document which will analyze each DOM element upon creation and not rendering them if the will meet some requirements?
Most templating engines will do what you want, allowing you to add some logic to decide whether or not to create an element in the first place.
Another option would be to have your table hidden from the start (in CSS display:none), run your jQuery to find the rows you want to hide (or even remove) and only then use jQuery to make your table visible (with .show()). The downside to this approach is that it doesn't degrade gracefully if you have a visitor without JavaScript enabled. They won't ever be able to see the table!
Of course, if you don't have JavaScript enabled, you won't be able to hide the rows on the client side either. You'd have to handle it on the server side.
Related
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.
I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.
I have list of files - and after clicking on one of them it shows the jquery form: here it is: http://jsfiddle.net/GSC3x/11/
But now I noticed, that I will need a table on this page, and I want to this list be one column in my whole table, here is the (ugly) example: http://jsfiddle.net/GSC3x/15/ .
I want the jquery form thing work the same way after changing into the table view. I mean, hide everything and make form appear.
How to do it?
Thanks!
To make the table disappear, you shouldn't hide the individual cells (as you do with $(".show_hide").hide();), but hide the whole table instead.
Also, you are reusing the button that is showing the form for hiding it, but with a completely different styling. That is weird, unnecessary and makes it difficult to use.
Use a separate button to close the form, and don't use the same event handler ($('.show_hide').click). The show and hide parts share no code anyway.
Structuring your code like this also makes it very easy to add smooth transitions like fading or, the sliding you already had implemented.
I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation
I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.
What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page becomes way too big to fit the table and the form on... Any ideas???
If you are willing to use jQuery then you have some options:
For a dialog box / pop-up scenario, simple-modal dialog is quite nice. You can integrate it via div elements on your main page and this way you can avoid having to manage additional windows in javascript.
If you wish to add paging, filtering and search to your large table DataTables is top notch. It can be applied to a standard html table and is very versatile. It will allow you to hide columns as well, so I would think you could store your identity keys in those columns and use the dialog box easily.
JD-Daz -
I wouldn't use a pop-up. Nobody likes pop-ups, because they are not connected to the original window, and they are reliant on the windowing system of the host operating system. Also, this is useless in tabbed browsers. Instead, you should use a free-floating DIV element as the container of the table. You can allow the table to be scrolled inside the DIV element as appropriate.
--
Mark