Javascript solution for huge size value multiselect - javascript

I'm developing a web application where I need to allow to the users to select one or more values I'm usig Jquery 1.11 I was think to use a picklist and not an autocomplete mainly for the following reason: it's not sure that users know what they want to add; they may want to select what to add by seeing a list The problem I'm facing is that in my database I can have thousands of values and a picklist showing all these elements is not comfortable to use I was wondering is there is some kind of Javascript library who can offer to me a paged picklist Otherwise.... what is the best way to show this huge size of data? By taking care that users often don't know what they can add
My situation is the following one: in my project i'm using a WCM (Liferay) and I'm doing some extension to the redactional side of contents. I must provide to the user to fill a field by selecting 1 or N (with N>1) other web contents taken from WCM DB
Often redactors don't use tags and/or categories when they write web contents and some web contents can be written from some user groups and others web content can be written by others user groups; virtually each user group don't know/communicate with other user groups and this means that each user don't know what other user adds so I can't use some autocomplete solution
At the beginning I'll have few Web Contente, but after some time, by seeing the old web site, i can reach huge values (around 4000/5000 web contents and also more)
I already used select2 and I like it, but I have only two option for select2:
full load all data from DB but this means to kill performances and
show users all the data in a combobox
offer a search to users but users may not know what to search and so
they can do a lot of research without finding what they are looking
for
Now I was seeing also this JQuery plugin: https://github.com/yanickrochon/jquery.uix.multiselect but this plugin doesn't offer pagination options so I should always load all data from DB
I'm wondering if I can use some kind of Javascript utility to solve my issue or if I should take another kind of solution
If I should use another kind of solution.. what would be the best one?
I premise that this form will be only used on the redactional side and so I don't need a multi-device solution

https://github.com/lucknerjb/PaginationSelect
Couldn't find a verified project, however this one seems legit.
If you download zip and run index.html you will see this widget at work.
However personally I would rather implement some sort of server side user cart and download items range from a database dynamically instead of serving entire list of items to the user at once.

Related

Dynamically create UI Components from User Uploaded Templates

TL;DR: Need to create UI pages dynamically from user provided custom templates. These templates should contain enough information so that front-end as well as back-end can be created dynamically, for all user cases.
Keeping the TLDR on top. Also, I am not sure if this has been asked here before, so sorry if this is a duplicate question.
A little background, I am trying to create a Angular 7 based web application that will serve as a single interface for users to configure network devices (routers, switches, etc.). To cover as many different devices and vendors as possible, I cannot make my UI pages static. They should have the capability to change based on user requirements and specifications.
To achieve something like this, common logic states that we should let users create custom templates for their data and data attributes, and then let them upload it to the portal, so that the UI can be rendered dynamically from there.
For example, user A might need a form with 2 input parameters(device name and IP address), while user B in the same organization might need a form with N input parameters, M dropdowns, etc., for some complex configurations.
So coming to the question finally, What is the best way to generate UI pages in case your pages cannot be static and have to change based on user's requirements? In case we go with user uploaded templates, what information should these templates contain?
I am right now using Angular 7 to build my app but I am flexible in this regard. Here for ideas and brainstorming.
The answer is to implement a Data Driven UI. For beginners such as myself, NPM - Data Driven UI is a good starting point.
To satisfy my use case, I implemented a Java platform to generate my UI metadata based on user-input, which is then fed to UI to generate web-pages revolving around a central schema/theme.

Basic WebApp Questions

I am currently thinking about coding my first webapp.
I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.
The problem is that i do not really know how to achieve my goal.
My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.
Now what want to know is:
Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
How can I create these cards which are automatically getting added to the homepage ?
How can I save the data for each individual card? (especially without a login procedure...)?
I know these are quite easy questions but I really want to learn how to do it.
Please check the images below.
(check:
I would say try to use your existing skills to achieve your goals. When you run into problems you cannot solve or problems that could be solved by a specific framework such as react, try using them. It's better to understand what these frameworks are doing before you rely on them for every development.
You need to use an http framework like express to return your api values from node js to a web client.
Needs more info but as you're already talking about component based libraries, a good approach would be to keep the cards in a json array and render your page from that. If you are persisting the card data in a database you will also may want to render them server side as the page is loaded using a server side technology like node.
To keep things simple, you can store the info client side using something like localStorage or indexeddb. If you want to store something on the server side, you will need to introduce a way of identifying the user.

Filtering contentEditable on client and server

I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.

How to send static HTML to database via PHP

I am working on a simple "task list" project right now. I have built the I have so far using jQuery and Javascript to insert/delete/manipulate the "tasks". Because all of the elements are created/removed/changed in the DOM, every time the page is refreshed, all changes to the list are lost. I dont want to use a caching system because the aim is to create a system that can be accessed from multiple devices. I would like to set up some sort of PHP database that would allow me to create user profiles and have each users "tasks" separated.
I am familiar with Wordpress so I'm thinking I could use that and its user profile system to accomplish what I need. The issue I have is that I cant find any information as to how I could send the changes that were made to the DOM to a separate database entry associated with each user.
My strategy from there (unless anyone could suggest a better method of storing the data) would be to essentially make a copy of a set section of the raw HTML and post that to the database entry when the user hits a "save" button. Each time they log in, the most recent HTML would be loaded into the DOM as a starting point. They could then make the changes they desire, hit "save" before leaving the site and the cycle would repeat.
I am new to development side of things, so I could be making this way harder than it needs to be. Any links to topics similar to this, suggestions, advice would be appreciated. Im not asking for an in-depth how-to guide (though that would be nice) but to just be pointed in the right direction.

looking for a rails example using ajax, simpler the better

I am trying to locate an decent example of ajax json interaction with Rails. I have a Rails app that uses standard forms and wish to improve it with some ajax, but I have not found a good example to inform me.
I have a large investment portfolio model object, which requires multiple views to input all the data. I have a mechanism that allows page-to-page transition, using divs with a style of display:none or display:block around wrapping each 'pane'. I can selectively hide/show each pane as I move off-screen to the next pane. The user can navigate around, setting values, some of which need to be fetched from the server (such as look up a stock quote). When all is done, a commit sends it all back to the server, since it is one single form. So far, so good.
Now, I need to interact with the user when he is picking individual stocks, performing auto-complete on the ticker symbol during typing and then updating a table of stocks picked. This part has me stumped, since I don't understand how I can get interactive behavior while the input form is displayed. I am hoping to review some clean examples of ajax interacting with rails.
Oh, by the way, the app is a Facebook application, so I can't use prototype or any rjs templates, but must use FBJS.
I can't seem to find an example that shows ajax updating page sections dynamically.

Categories

Resources