background:
We have a legacy system running the now dead Autocomplete plugin for jquery. We use it in multiple places on an intranet web UI. Until recently the client ran IE6 (yes, I know...) and this was all fairly static.
We're going to rededevelop the old front end of the UI. At the moment I'm considering using either jQuery UI or Bootstrap + Typeahead.
question:
The fields we use the autocomplete functionality often chain the values of other fields (themselves using autocompleted), passing these values as additional paramaters to our back end script. Is there an easy way to include these with the twitter bootstrap/typeahead method as there is with jQuery-UI?
If it's not too rude an example of each using additional parameters would be amazing.
Thanks in advance
edit:
I'm asking because I think bootstrap is smaller/lighter and less work to generate a nice UI.
We are using the Kendo UI Web (Free Version) autocomplete along with Bootstrap 3 and it is working very well.
The look is not like the other form elements generated by Bootstrap due to KendoUI CSS, but that seems minor.
We are also using MVVM pattern and Kendo Observables (Similary to Knockout) which makes it very easy to pass parameters to the backend systems.
Related
I am developing a hybrid mobile app using jQuery Mobile and AngularJS.
I decided to use a mix of the two for the following:
jQuery Mobile
good UI features
not too heavyweight (compared to Sencha Touch, for example)
AngularJS
good performance and resource management (caching, asynchronous requests)
personal experience
I have little to no experience with jQuery Mobile and, as I was learning, I noticed a potential conflict between the page navigation models of the two.
Should I use only one ?
If yes, which one is better suited for my needs ?
Are there any gotchas with this setup ?
Many thanks.
You can't compare them to each other.
Angular.js (like Backbone, Ember eg.) are MV* Frameworks (for SPA) which used to render html templates/views directly in the client instead of server. So you have a lot of application logic now in your frontend and this Frameworks are made to make your life better, coding this.
jQuery Mobile on the other side is a pure widget/plugin library. The AJAX navigation plugin load pages (something static, like html) into the DOM via AJAX. So you have to pre-render this pages on the server somehow.
If you started to build a SPA with Angular it doesn't make sense to use jQuery Mobile's AJAX navigation at all. (If it's a native mobile app you have no server anyway.)
Sure, you won't get far without an UI component library so use one of your choice (eg. jQM) but work with Angular's directives to init the plugins/widgets correctly on your DOM elements since a $(document).ready(...) or a $(document).on( "pageload", ... ) doesn't know anything about your Angular views.
Take a look at following projects:
http://angular-ui.github.io
https://github.com/angular-widgets/angular-jqm
This has been already addressed in HERE
Basically the article states that trying to intercept the navigation from angular can be painful, so leave all the routing jqm
Is there much point to using angular js on top of asp.net mvc since they're kind of both doing the same thing? What are the advantages to using angular over asp.net mvc + jquery? What kind of scenario would you pick angular in? If you do pick angular in a microsoft environment, what would you run on the server side? Would it be something like Web API? Or is there still benefit of using traditional asp.net mvc?
This question is a bit subjective, however here was our reasoning.
Let the client handle rendering of pages, free up resources on the server.
Leverage built in caching of cache servers since we are just dealing with <html/> content.
Since the pages are cached the only traffic back and forth is json payloads.
We have been using NancyFx, but WebAPI or Service Stack would work just fine.
We wanted to build a responsive single page application and AngularJs fit the bill for testability as full feature rich framework.
AngularJs forces you into a pattern that we needed for JavaScript, in the past our jQuery heavy applications turned into functional spaghetti (That was our fault but being guided by Angular helped out a lot).
As with all frameworks pick the one that suites your needs
On my site http://www.reviewstoshare.com, I am using AngularJS along with ASP.NET MVC. The main reason I did not go all the way with AngularJS was that SEO is not easily achieved with AngularJS.
Keep in mind that my site was already built using ASP.MVC + Jquery for in page interaction as needed.
On the other hand there is still some "Ajaxy" nature to the site like comments, voting, flagging etc. Not too different than Stackoverflow itself. Before AngularJS it was a mess of Jquery plugins and functions within $(document).ready() callback, not to mention the JS code was not testable much.
In the end, I went with both.
If you fancy using Java Script framework then Angular JS rocks.
SEO could be the issue. You need to have deeper understanding of DOM and Java Script as compared to other famous JS Frameworks.
I ve developed a Proof of Concept - using Angular JS with Require JS using ASP.net MVC
You can have a look at it at the below given link
http://angualrjsrequirejsaspmvc.blogspot.com/2013/08/angular-js-with-require-js-front-end.html
I'm doing an app with jQuery Mobile and Angular.js. Cause we have some issues using both libs, exists an adapter that do "teh job".
So I'm trying using routeProvider to route my pages. But I still can't render pages using this.
Here plunker if u can help show me the way.
http://plnkr.co/edit/DNGiT83csWMmfYnHXOop
Thanks in advance!
I ran into a similar problem and maybe what I learned might help you. It comes down to the differences in the way angular and jquery go from one page/section to another (routing).
First, the basics: angular routes by inserting a chunk of html into your view, then on whatever click/action/etc, removing that html from the view and adding a new chunk of html. Essentially you're on the same page all the time; it's just the included html is changing. In contrast, think of jqm as loading up all the html into the same page, with those html chunks as divs. Instead of removing html chunks and replacing them (via routing), it's just turning divs off and on. (There are multi-page jqm apps but SPAs really highlight the differences.)
My suggestion is to pick which set of features you really want: angular's minimalistic loading (only as you need it), or jqm's flashy transitions and other built-in features. If you've got a massive app with a lot of data on every page, you might want to bypass jqm and use angular alone, and see what you can do with angular's new animate functions. It'll mean you'll need to build (via CSS or javascript) duplicates of the jqm features -- and from what I've seen, you can get close but it won't quite be as pleasantly streamlined as jqm.
If the jqm built-in features are what you really want, then skip using angular's routing. It'll just introduce all kinds of complications, anyway. Set up your pages using jqm's pattern, and use angular only where you're dealing with data.
What I've found works best is to treat it like it's a jqm app overall, and only add angular into the sections where you need it. After all, you don't have to add ng-app at the html line; you can add it into a single div as needed. Since jqm is happiest as a system-wide kind of thing, while angular is just fine being confined to pieces within a system, so far I've found jqm-whole and angular-parts to be the simplest way to get the best of both worlds.
As I am newbie to JQuery. I have certain questions in mind regarding JQuery.
Can I make complete website with Jquery?
Means in ASP.Net website we use Server Controls to design page, Can we make all this functionality on .ASPX page using JQuery?
If yes, then how to handle server side events?
For designing .ASPX pages, what we prefer to use? JQuery standard controls or Plugin?
No. JQuery is not a server-side framework. It's a client side DOM Manipulation domain specific language and API that enables client-side code to work cross-browser, and includes a variety of utility and helper functions for AJAX, deferred callback resolution, and generic functional programming.
In short, it is not meant to replace your server-side code.
The jQuery framework is only a javascript library which means it can only handle events or actions on the client-side. It doesn't matter what backend you are using for your website (PHP, ASP.Net, Python), javascript only works once the page has been rendered and sent to the browser. Try reading up on the docs for jQuery here: http://docs.jquery.com/
If you have any questions specifically about jQuery programming, we would be more than happy to answer them.
At my work we have an existing ASP.NET web application and are duplicating some of the pages & functionality to better target our mobile users. We are using the jQuery Mobile framework and ASP.NET Web Forms to do this.
Since this is going to target the mobile web I would like it to be fast & lightweight which means turning off the view state, loading lists on demand (when opened), and I'd like to eliminate post backs (annoying & doesn't work well w/ jQuery Mobile). Of course this means doing a lot more work client side.
One of the pages is a bit complex, it allows the user to log items, however it's layout is fully customizable. Prior to logging the user is able to define what fields they wish to track. Some of these fields are system designated but others are created by the user. They can choose from a checkbox, dropdown list, date box, radio button, text box, or list box. Some fields are also tied to other fields meaning the user can select an item in one drop down list which then reloads another drop down list with the associated data. The user also has the ability to add an unlimited amount of additional fields (drop down lists) while on the actual page used to log their item. Once the page is filled out by the user the selected fields values are saved back to the server in a database table.
I figured this would be a great chance to use a JS Framework like Knockout.js, the dependency tracking would come in great for trying to keep things synced up & reload lists as needed based on selections made in other lists. Even though I am a bit concerned about how it would handle the fact that the form layout is dynamic & can be modified once displayed (anyone know if it can handle this?).
So I started looking around for jQuery Mobile & Knockout.js and apparently there are issues, workarounds, limitations, etc. w/ the two working together and I saw the same thing w/ Backbone.js
Does anyone have any suggestions w/ this? Is it worth the hassle to try and use a JS Framework of some sort w/ jQuery Mobile? Can a JS Framework handle the form I am trying to create w/o me having to jump through hoops? Am I better off looking for some sort of dependency tracking plugin and just using that and if so can you suggest any that will wire up to my model object & other controls on the page & work correctly w/ jQuery Mobile?
Overall, knockout should be a good fit for your requirements. I'm currently using it an MVC3 applicaiton to do similar things to what you are describing.
As for your complex page, this is all doable.
Your highly customizable form. This is one area where knockout really shines. It allows a separation be how data is displayed and the data itself. This can be done with different data-bindings types and you can add your own customized bindings. I actually do this a lot when creating a form and experimenting with what the test control type is.
Dynamic Layout - With Knockout there is no direct connection between the DOM and the data. Knockout's data-bind statements allow you to connect new content to it's data at run time. This currently works well in my current app.
For your requirement about unlimited adds, take a look at the Contacts Editor Demo. It seems to have features to do the unlimited requirements
In general with knockout, once I went to using ajax to handle all my data requirements, things became greatly simplified.
As far as using knockout with jQuery mobile, knockout is now part of the new releases of Asp.Net Mvc4, developer preview. It is my understanding that knockout is key to MVC's design on building single page web offline where the data is stored locally, then dynamically added to the displayed page. Cannot find link right know, but I'll keep looking and post edit later.
Hope this helps out. Also, checkout the links on knockoutjs.net home page. -