Dynamic drop down menus using JavaScript without using a database - javascript

Is there a quick and dirty technique of creating dynamic drop down menus without using a database backend? There will be three levels of drop down menus and there are an awful lot of items in them, hence the quick and dirty!
Thanks

The fact that you choose to load the items from a database is pretty much unrelated to the drop-down menu itself. You can always read from a JSON, .csv or xml file. Depending on the implementation, you could even have the items loaded straight into the HTML page (but that would be painfully slow if you have many of them, so not recommended).
Load the file (preferably JSON) containing your items via AJAX, parse it and create the markup dynamically.
It's pretty hard to give details as the source of the contents shouldn't be so important. If you plan to use the classic <select> tag, just create that element. jQuery is your friend for quick and dirty.
Using JSON.parse() will return the structured object which you can use to loop through elements and add children to the <select> node.

Your question is a bit vague, so I'll give you a "general" answer.
There are tools like jQuery and knockoutJS out there. You could use knockoutJS to represent a client side view model and use it ( maybe combined with jQuery ) to populate the view with your data.
I think you should take a look at knockoutJS and especially observables, observable arrays, the options binding, and its support for AJAX requests - that sounds like a reasonable place to start.
The knockoutJS documentation can be found here: http://knockoutjs.com/documentation/introduction.html

Related

Build backbone models from existing html

I'm not particularly good at javascript frameworks, I decided to use Backbone to help organize my code since my project got bigger.
The problem is, I didn't had javascript templates (or Views) in mind when I designed the first 10k lines on my project. I'm already using a templating engine (PHP smarty).
The premises: I already have a good HTML template. As an example I have an <article> element which contains the content of a blog post. It's ok, because I can build a Model out of this element. But what about the View? I don't have a template nor do I want to actually use one (because I have to reorganize everything).
The question is: how do I bind all the possible variables in an <article> (which could be for example the value of <timestamp> element, outerHTML of the content div, etc) to an object view?
All the examples, tutorial I've seen, uses a template which is used to generate the HTML. I'm not really comfortable in defining a underscore.js template.
The CRUD operations on articles, comments, etc would be done with $.ajax(). I don't want to do additional http requests just to get all the posts of a page (since the backend already does this).
You can use the setElement method to do what you want (or at least attach your view to an existing element in the dom, then your view will need to know what to do with it)
http://backbonejs.org/#View-setElement

How to use JavaScript MVVM/MVC with pre-loaded data

I want to load an HTML page with existing data (a list of comments or widgets or whatever), then use Javascript to render additional data in the same format as it is input by users interacting with the page.
I'd like to use a model stored in a JavaScript object that represents both existing data on the page as well as new data from user input, then observe to the model to update the DOM when it changes.
I'd like to render JS templates to display data entered by users quickly, without hitting the server again.
I would like to avoid writing server-side and JavaScript templates that render the same data.
To solve the first problem of building the initial model it seems like the options are, in order of preference:
Use JavaScript to pull the data rendered in HTML to build the initial model, or
Render JSON directly to the DOM and build the JS object from that, or
Hit the server again after the page is loaded as an ajax call to get the data as JSON
To avoid having server-side and client-side templates to display the same thing:
Use use something like Pure to build templates from the DOM, or
Only use JS templates and use one of the second options above to initially render the page (populate them from JSON rendered to the DOM or make an ajax call to get JSON to populate them).
Use a templating system that works on both the server and client.
I feel like none of these solutions are particularly elegant, and I'm curious as to what other patterns I may not have thought of or if there is a common solution.
My environment is Rails 3, but the problems are applicable to any server -> HTML/JS setup. I can see how some of this might be easier with something like Node.js but I'm principally interested in solutions that would apply to Rails.
There's so many ways to accomplish this. I have been struggling with this same issue. I think that once the complexity of your web app reaches a certain threshold you have to resort to javascript to keep the state correct. Jquery (among other dom manipulation frameworks) really help but at a certain point it can become spaghetti code.
I just touched this binding javascript library called Knockout. It's pretty elegant and simple to use it tries to follow the MVVM pattern by allowing you to create a ViewModel with observables that you can bind html elements so that their values and attributes change based on your ViewModel values.
If you're creating dynamic html you can always embed the initial values of the javascript ViewModel along with the html of the page so that you can avoid that initial ajax call.
Out of the box it is compatible with jquery templates which just makes dom manipulation a breeze. I've just started using it and I'm loving it so far.
Hope that helps.

Should I store data in a Javascript object, or just use the table on the screen?

I have a pretty big chat app I'm working on, and had a question about best practices for JS data storage...
I have a table populated with AJAXed data from the server, and the Javascript gets some info from that, and also from an internal object, also populated with AJAXed data. I was starting to store information about each chat in an object, like user status, name, etc., and realized... I have this table right here that I can use as data storage. It's persistent, it stays there at least as long as they're in the chat, so why not just add some hidden TDs or spans to it to hold this data, rather than dealing with a Javascript object? I don't know if there'd be a noticeable change in speed (dealing with an object vs having to parse ID tags and strings), but I was just wondering if there was any fundamental reason why using the table for data storage was A Bad Thing.
And, on the flip side, should I cease looking up data using the table altogether, and instead store all the data in an object (along with displaying it in the table)? Or is my current hybrid system (looking up in table for things that are in the table; using an object for things that aren't, rather than using hidden spans/tds) pretty good?
Populating the table, whether using innerHTML or DOM methods, is going to be worse performance-wise. Retrieving the data (particularly if via iteration) also becomes less verbose, easier to maintain and, again, better performance-wise. Using an HTML table is also a more fragile option, as if something goes wrong, other markup on the page could become invalid or, worse, it might end up displayed to the user.
There's also the simple fact it just seems hacky, workaroundy and dirty. It's an HTML table that is to present tabular data, it's not an SQL table for data storage.
JavaScript objects are pretty much made for what you're describing. Using an object makes even more sense and is a nice and clean option if the data you're getting from the server is already in a suitable form (i.e. JSON). Then it's ready for you and all you have to do is parse it.
I was just wondering if there was any fundamental reason why using the table for data storage was A Bad Thing.
I'd say it's fundamentally "bad" for the same reasons we strive not to mingle javascript or css in with the markup. The page HTML should be used for presentation purposes only. I don't think there's going to be a huge difference performance wise whether you use the table or a javascript object, but the javascript object would be much cleaner, IMO.
Set eg. each <tr> element to have a custom property eg .customData and place your javascript object there. Its a nice compromise - the data is seperated from the markup but directly related in the dom.
Storing the data in an object would make it easier to manage, but it would be good practice to also store a reference alongside of that to the element (makes crud easier).

Data contained in an array/json, want to inject into page via DOM, does jQ have templates?

Say I have an array, that contains data that I want to display in a html table. (sort of how gmail has all the data in js objects)
I have this data in an array so I can do ajax type operations like updating/deleting/sorting of the data.
Does jQuery have templates where I can create a template for a given row, and then just loop through my javascript array/json object and then inject the row into the table?
this is a common pattern, but I don't have any experience with it so I am looking for the best practice. I know people use templates for this.
There is a jQuery plugin available for this called jTemplates. You can get it here. I also dug up this SO question which lists some other alternatives you may want to consider.

jQuery: Templating data

I have a unique situation where I'm building a site that will call data via AJAX and load it into "containers" (basically just divs styled and arranged according to elements retrieved from the AJAX callback).
I'm not sure how many of these unique container types will be created (styled and rendered) when all is said and done, so I'm looking for a solution that will allow me to store containers in a separate file(s), load them dynamically as they are needed, populate the content, and rendered them on page.
I'm not sure if I should write my own loading/template solution or use an existing JavaScript template engine (e.g.: Pure).
The reason I'm hesitant to use an existing JavaScript template solution is they all seem focused on binding and looping on existing page elements, whereas I'm more concerned with the ability to load-up and binding to dynamic content.
You might want to give jQote a try, it's the most powerful jQuery templating engine as it let's you use scripting inside your templates.
Go check it out, it'll suit your needs, I promise.
http://aefxx.com/jquery-plugins/jqote
After starting with JST, we moved to EJS:
http://embeddedjs.com/
It's more powerful, syntactically simpler, and you can put your templates in different files.
The website is pretty nice too.
I found http://code.google.com/p/trimpath/wiki/JavaScriptTemplates pretty useful for this.
I am planning to use jTemplates for a future project that will need to do something like this, it is very fast and has a nice jQuery plugin

Categories

Resources