Are there helpers for jquery ui?
#Html.DatePicker(m=>m.Date)
or
#JQueryUI.DatePicker('DateFieldId');
I think it can be more conveniently...
No, are not any builtin Jquery UI helpers in framework. But there're many blog posts about implementation of datepicker (on of the most needed widgets, indeed). Take a look at Stuart Leek's blog post for example
You can add custom attributes/classes to your standard Html controls and then write Jquery selectors to wire them up:
Build this HTML (you could write a helper method extension to do this):
<input class="ui-datepicker" data-min="1/1/2000" type="text" />
Then in your javascript:
(function($) {
$(".ui-datepicker").datepicker({
minDate: Date.parse($(this).attr("data-min"))
});
})(jQuery);
I know this is an old post, but for anyone looking for the answer to this question:
Try this:
http://jqueryuihelpers.apphb.com/Docmo/GettingStarted
I've been using it for quite some time now.. very, very nice
Related
I'd like to make a masked input field with autocompletion. In my example i have a field with article numbers _.___.___. I have also a list of often used articles. The user can select existing article numbers from the list and can add new articlenumbers.
How can i combine these two primefaces components?
Thanks for your help
Lepo
To achieve this you have two possibilities: Create a custom component or set the inputmask manually via jQuery. I implemented the second method this way:
Use the normal Autocomplete Widget
<h:form id="myPanel">
<p:autoComplete id="number" value="#{myBean.number}" completeMethod="#{myBean.complete}" />
</h:form>
Activate Inputmask via this little Javascript
<script>
//<![CDATA[
$(document).ready(function() {
$(':input[id="myPanel:number_input"]').inputmask("mask", {"mask": "(999) 999-9999"});
});
//]]>
</script>
(3. Make sure you have included the inputmask jquery library:)
<script src="jquery.inputmask.js" type="text/javascript"/>
Although this solution does what it should do, i think the custom component would be the more cleaner way.
Hope my Snippet helps you anyway.
Please anyone suggest me, it's good idea to use Durandal and JuqueryMobile for mobile based application (Browser). I am planning to develop an application using Durandal, Jquerymobile, MVC4, KnockoutJs, and BreezeJs.
Thanks
I wouldn't recommend using jQuery mobile because it has a lot of overlapping features w/ durandal. Unless you want to just use jQuery mobile for the controls.
I asked on the google group forums and ratchet was suggested instead.
Not exactly the answer your looking for but.. it might be good to consider other options too.
Yes I believe this is a sound approach. We're using jquery UI (not the mobile version) with the durandal framework with success on a large web app.
If you include the jquery ui widget bindings by Steve Saunderson (https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets) you can achieve a fully declarative UI approach.
It will allow you to declare something like the jquery ui autocomplete control within the HTML like this:
<input type="text" data-bind="
css: { 'song-valid': isValid, 'song-invalid': isInvalid },
value: songSearchText,
valueUpdate: 'afterkeydown',
attr: { placeholder: placeholderText },
jqueryui: {
widget: 'autocomplete',
options: {
source: function(request, response) { return $data.songAutoCompleteSource(request, response); },
minLength: 2,
select: function (event, ui) {
$data.songSelected(ui.item.id, ui.item.value);
$parent.songSelected();
}
}
}" />
Simply include the jquery ui widget bindings found in this gist: https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets
Make sure you include the above javascript after you have already loaded jquery and knockout.
I would say no. I made a simple PhoneGap app with 3 pages with JQuery Mobile. It looked good. I then tried to implement Durandal and it broke all my JQuery mobile styling. I came to the conclusion that the 2 do not play well together as Jquery Mobile tries to implement it's own page navigation model. I am now going to try Bootstrap instead or possibly handcode the css for the UI.
If anyone can prove otherwise, please let me know!
I'm currently using PagedList (https://github.com/TroyGoode/PagedList/) to manage my paging in an ASP.NET MVC application.
As of today I have started converting some parts of the application to use AJAX, which ASP.NET MVC makes quite easy.
The first problem I have run into however is that the PagedList.MVC helper #Html.PagedListPager is not in any way compatable with unobtrusive AJAX.
All I really need to do is add some attributes to the paging links (see below) and the rest would be taken care of automatically. PagedListPager does not provide any way to do this however.
data-ajax="true" data-ajax-mode="replace" data-ajax-update="#SearchResults"
Has anyone run into this and found an elegant solution?
I have added support for unobtrusive AJAX:
https://github.com/TroyGoode/PagedList/issues/26#issuecomment-6471793
I believe this may be the most elegant solution.
#Html.PagedListPager((IPagedList)Model.Articles, page => Url.Action("Index", new { s = Model.SearchString, page = page }))
<script>
var pages = $('#pages a[href^="/"]');
pages.attr('data-ajax', 'true')
.attr('data-ajax-mode', 'replace')
.attr('data-ajax-update', '#SearchResults')
.attr('data-ajax-method', 'post');
</script>
Quick jQuery hack to add the necessary attributes to all links in order for them to be picked up by the unobtrusive ajax module.
The [href^="/"] part ensures that only the clickble links will be modified. If you don't use this, the greyed out Previous link will be clickable.
I am trying to understand how the integration between jQueryUI and Emberjs should be done. I am new to both libs and to javascript so this might be a newbie question.
I have this jsfiddle set up: http://jsfiddle.net/pSKgV/1/ and it renders this resulting document:
<body class="ember-application">
<div id="ember129" class="ember-view">
<div id="ember163" class="ember-view ui-draggable"></div>
</div>
</body>
The code is mostly taken from this blog post: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Questions: How do I put something inside the inner div? I want to put some content that i can bind to something.
I have tried the following:
{{view App.Draggable}}Drag Me{{/view}} but that gives an error. I’ve also tried
adding this to the App.Draggable object:
didInsertElement: function() {
this.$().html(“Drag Me”)
}
but that did not give the expected results. How is the best way to use/access the jquery/jqueryui functions such as .html() in this situation?
Also, is the outer div necessary or can I make this view only render one div element?
regards
Oskar
http://jsfiddle.net/ud3323/XMgwV/
You forget the # symbol {{#view App.Draggable}}Drag me{{/view}}. You should also create namespaces in Ember using Ember.Namespace.create() instead of just using an empty {}
Is there a tutorial or explanation how MVC3 implements unobstrusive javascript using HTML5 data tags? I would like to know how I can extend this practice for my own javascript, espescially, how are the data tags efficiently parsed to execute javascript, to attach event handlers, etc.?
In ASP.NET MVC 1 and 2, client side validation and any AJAX behavior meant that ASP.NET MVC would automatically generate javascript for validation or AJAX class. The result was a <script> tag with javascript embedded that would be outputted on the HTML page or data in the event handlers of an input (like onclick).
Unobtrusive javascript eliminates the need to embedded javascript in the HTML page by placing all necessary things in data- attributes on the element. With this in place, jquery.validate.unobtrusive will validate and do AJAX class based on the information in the data- attributes of the input control.
For more details, take a look at this asp.net mvc 3 tutorial which offers a quick example. The unobtrusive explanation is towards the end under the second Enabling Client-Side Validation.
Take a look at this blog post which displays the difference of output for unobtrusive and normal validation.
Basically it's just using jQuery to attach event handlers rather than putting script directly in the html attributes.
For example a document ready event containing
$("#button1").click(DoStuff);
and the html
<button id="button1" />
is equivalent to
<button id="button1" onclick="DoStuff()" />
In this example it's not a huge difference, but for more complex cases it makes the code much cleaner, especially if you want to use anonymous callback functions.
Look in the unobtrusive script files (like jquery.unobtrusive-ajax.js) where you'll find it's just a case of using selectors to find elements with data- attributes.
For example:
$("a[data-ajax=true]").live("click", function (evt) {
evt.preventDefault();
...
});
$("form[data-ajax=true]").live("submit", function (evt) {
...
});
I've started using my own data- attributes to hookup features like autocomplete and datepicker. For example, adding an input with a data-autocomplete attribute pointing to a remote data source, then using jQuery to wire it up unobtrusively.
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
Demonstrated here, if you are interested: http://www.pluralsight-training.net/microsoft/players/PSODPlayer.aspx?author=scott-allen&name=mvc3-building-ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro