how to interface jquery ui components to backend - jquery-ui

i don't have a lot of RIA experience, so please excuse my ignorance.
Currently, I'm looking at jQuery UI components to build an RIA. For example, there is a listbox style componenet. Do I have to provide the custom js code to make an XHR connection, code the backend to return an json object, then populate the jQuery UI component as desired?
I guess what I'm trying to find out is, where does the responsibility end for jQuery UI components? Do the components themselves offer any methods for connecting to the backend?

In contrast to, say, ExtJS, jQuery and jQuery UI don't deal with data loading at all. It's entirely up to you how data gets loaded.
That said, they do provide conveniences for doing so: the ajax function and its friends are much nicer to work with than XHR (and deal with JSON quite painlessly); the data facility is great for annotating your UI elements with the data they control or represent; and the templates plugin makes it easy to render your controls once you have the data.

Related

Migrate from Legacy jQuery plugin to Bootstrap+Typeahead or jQuery UI Autocomplete

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.

jQuery Mobile vs AngularJs page navigation

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

Can JQuery do all this functionality?

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.

javascriptMVC jqueryMX Controller VS. widgets - can we all get along?

We built a ajax website and are thinking of migrating to javascriptMVC.
Our site has our own home-made controller which handles ajax calls for html and JS and the UI uses JQuery UI widgets extensively.
I read a bit about javascriptMVC and liked the notion of how models are being handled.
especially how easy it is to interact with ajax to read you data.
I guess i always though of models as JSON objects (structs in a way) and forgot how powerful adding methods to the models could prove to be.
However, going deeper into the javascriptMVC i noticed the controller takes much of the JQuery UI widgets responsibilities. i hate to drop our already working widgets. What are our options?
Can we adopt just the model of the JQueryMX? is it wise?
Should we change our controller and widgets completely and do an all-in into JavascriptMVC?
Any other options?
Speaking of goals - we wish to have a framework for future Ajax sites (controller + widgets).
You can wrap JQuery UI widgets inside of JMVC controllers as an intermediate step but you are losing an important advantage controllers have over typical JQuery plugins. Most JQuery plugins are written in an all-or-nothing style (look at jqGrid as an example) - mixing multiple JQuery plugins is typically impossible or at least quite hard and leads to an ugly codebase that does not perform well (memory leak issues etc.).
JMVC controllers can be designed to be more lightweight so they work well in combination with other controllers. Look at mxui for the "right" way to build widgets in JQueryUI
https://github.com/jupiterjs/mxui
http://forum.javascriptmvc.com/topic/what-are-the-plans-for-mxui

Pros and cons of MS Ajax vs. jQuery in an ASP.NET MVC app?

Now that RC1 is out I need to decide once and for all whether to use MS Ajax libraries or just jQuery for AJAX requests. The application is a new application. Essentially the way I'll decide is whether or not i get any significant benefit from the Microsoft libraries that I wouldn't get from jQuery. I already HAVE jQuery loading and I am concerned about the extra overhead of file size more than anything.
As far as I'm aware -- the only benefit really is that there are helpers like Ajax.BeginForm, but perhaps these will work with jQuery at some point anyway? I was also told today by a government employee friend of mine that MS Ajax library has a LOT of bugs in it - which concerns me.
With Microsoft now having officially befriended jQuery I wouldn't be too worried about them doing anything in future to leave jQuery in the dust by enhancing their own libraries.
I really don't know a whole lot about exactly what MS Ajax actually does for me. Are there certain pros and cons. Or is it just 90% bloat to support 'update panel' ?
I also find it very interesting that the ASP.NET MVC in Action book just skips over the MS Ajax libraries and jumps straight into jQuery :
In this chapter the reader will
examine how the ajax technique is
applied to ASP.NET MVC in a more
seamless way than with Web Forms. The
reader will see how to leverage an
increasingly popular, lightweight
javascript library called jQuery.
(from free sample chapter on AJAX)
Would very much appreciate hearing from anyone about their experiences workin with both, expecially on the following additional questions :
is it easy to convert code between the two libraries - assuming relatively simple ajax requirements ?
is debugging notably better or faster in either library
anybody know how ASP.NET 4.0 is progressing and any announced plans for the AJAX library that might be beneficial to MVC?
what in a nutshell could MS AJAX do for an MVC app beyond sending requests and sticking the response in a DIV?
how do i do the equivalent of Ajax.BeginForm(...) and use jQuery ?
what was your deal killer one way or the other?
what are most people out there using?
Personally, I would stick with JQuery. MS AJAX is pretty heavyweight in terms of size and you can do so much with JQuery. As far as whether it is easy to convert code, well it depends on how much of the MS AJAX stuff you are using. I don't think there is really much appreciable difference in debugging from one to the other. You will have a larger community of JQuery users from which to pull resources.
You can (and I do) use both depending on the need. When I want a particular form to be non-javascript friendly AND I'm generating content on the server, I'll use MS AJAX via the AjaxHelper. It builds everything I need on the client side to handle the non-javascript enabled browser. I only need to detect AJAX/non-AJAX in the controller and return a partial or a full view depending. If I need to use AJAX as part of a plugin (say autocomplete), then I'll use jQuery. The point is I use the tool that best suited (easiest to implement) for me. Granted, most of my apps run on an intranet so I'm much less concerned about the size of the downloads.
I also found the jQuery announcement about MS incorporating the library
Apparently :
Additionally Microsoft will be
developing additional controls, or
widgets, to run on top of jQuery that
will be easily deployable within your
.NET applications. jQuery helpers will
also be included in the server-side
portion of .NET development (in
addition to the existing helpers)
providing complementary functions to
existing ASP.NET AJAX capabilities.
So I'm thinking its quite probable that they'll end up having jQuery helpers that exactly mirror the AJAX helpers for the MS stuff.
I guess solution I'll take is to use Html.BeginForm, and then intercept the submit button to use jQuery. I'm not especially worried about people without javascript losing functionality, but its not that much harder to do so I may as well.
JQuery is much easier to code than Ajax allot of the problems with overhead can be remedied by adding more memory rather than by stream lining code. Ajax just does not make any sense to me although I'm just a beginner at it. After dealing with the overly criptic Ajax syntax, jQuery is like a breath of freash air.
Well there is one thing that I found with MS Ajax framework that cannot be done elegantly with jQuery. User controls build MS Ajax are very object oriented. This cannot be easily done with jQuery. For example, lets assume you are building a "address" user control, that will have address1, address2, city, state, zipcode and country. You can build this control with jQuery and Ajax but the benefit that's provided by Ajax library is that it will compartmentalize the address control. You can define a function "reset()" on that control that would reset the contents of address control. Lets say that you want "reset()" to set address1, address2, City to Empty string but State to "AL" and Country to USA. You define the code for Ajax control in (.js) file and that function will be associated with your address control. Same is not possible with jQuery. Any function you define will be global in scope and there is no easy way to tie that function Address control. You can very well call the "reset" function on textbox control on the form!!!
So if you want to create a pure object oriented user controls then i guess better choice is using MS Ajax framework.

Resources