living web page elements - javascript

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.

Related

Dynamic pagination button animations (jQuery)

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 ;)

Render dynamic UI with HTML versioning in Angular JS

I have a challenging requirement. The requirement is as follows.
We are designing a UI today with 10 UI elements.
Users are creating few records.
After a month, a new release comes and it has 12 UI elements on screen.
When the user creates new records, he should see 12 UI elements, when he opens an old record he should see 10 elements.
In order to achieve this, I thought, we could store the version with which the record was created and render the HTML belonging to that version. But, this will unnecessarily keep increasing the project size, as if the code gets 100 revisions, that much of HTML duplicates will be present.
I thought of using "switch-case" or "if-else" statements in front end, but it will slow the UI as too much heavy lifting is done by JS.
Please suggest a way to do this requirement with JS or jQuery or Angular. Any one framework is also fine, until it will work.
Thanks a lot for your responses in advance,
Look at a framework called angular-schema-forms. You write no HTML with this framework. Instead you pass it a JSON object that has the fields you want to display and their corresponding display as attributes. It comes preloaded with its own templates for all common controls and also allows you to write your own.

How To Display List of Sites One At A Time

I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.

Loading/Displaying large amount of data on webpage

I have a webpage which contains a table for displaying a large amount of data (on average from 2,000 to 10,000 rows).
This page takes a long time to load/render. Which is understandable.
The problem is, while the page is loading the PCs memory usage skyrockets (500mb on my test system is in use by iexplorer) and the whole PC grinds to a halt until it has finished, which can take a minute or two. IE hangs until it is complete, switching to another running program is the same.
I need to fix this - and ideally i want to accomplish 2 things:
1) Load individual parts of the page seperately. So the page can render initially without the large data table. A loading div will be placed there until it is ready.
2) Dont use up so much memory or local resources while rendering - so at least they can use a different tab/application at the same time.
How would I go about doing both or either of these?
I'm an applications programmer by trade so i am still a little fizzy on the things I can do in a web environment.
Cheers all.
Regarding the first part, it's called Ajax: display the page without the table, or with an empty table, and then use ajax requests to fetch the data (in html or any data format) and display it.
Regarding the second part, you want something called lazyloading: the possibility to load data only when the user needs it, ie when it's on the visible part of the document. You can look at this question for a DataGrid library capable of handling millions of rows.
Two basic options:
Pagination
Lazy loading (load as user scrolls down). See this jQuery plugin
You could try a couple of things:
Loading data Asynchronously
and
Paging

Problem adding item to sortable list

I'm not entirely sure how to post this question, but here goes...
I have a web app that has a list of sortable items. I sort them ajax style using Sortable. That works like a charm. I can drag and drop the items till my heart is content.
At the same time, there is a button that allows for the creation of new items on my list. This is also ajaxified and works for the most part. The new item appears on my list anyway, and firebug shows that the code being rendered is exactly the same as the other list items. Oh and it is contained in the correct list.
The problem is that the new item is not draggable/sortable/whatever. I can't do anything with it unless I refresh the page. Any ideas why this is the case or how I can get around it? I'd really like to solve this.
I tried to paste code in here, but couldn't quite make it work, so I went with pastie. Anyway, here is the code for a page with 2 sortable items. This is a fresh load and everything works as expected.
http://pastie.org/432585
In this one, I have clicked the button that creates a new section, but not refreshed. So the first 2 sections are DnD-able, but the new one is not...
http://pastie.org/432591
I'm using ruby and rails to do the ajaxing here and admittedly, I'm not very familiar with how it should work. But I believe this behavior comes from prototype.js and maybe dragdrop.js.
On completion of the ajax call that causes the new element to be injected into the page, the new element, I imagine, needs to be bound to the DOM, and delared as a Sortable.
Would be great if you could show us some code, or at least let us know which library(s) you are using for ajax and Sortable elements.

Categories