This question comes out making use of the HTML helpers in ASP.NET MVC and jQuery. For example, if I define an extension method like the following:
<:% Html.DatePickerFor(x => x.StartDate) %>
I would want it to make use of the jQuery DatePicker. However, this either means I need to manually add to the header the invocation of the DatePicker method (in which case there is no point to the DatePickerFor method), or clutter up the HTML with a whole bunch of script tags that are invoked upon document.ready.
One thought I had was the idea that instead of add the appropriate jQuery UI behavior to a HTML element via Javascript, you could do it via additional attributes, such as the following:
<input id="foo" css="widget-ui-datepicker" widget-alt-field="#fooalt" />
jQuery could then just looks for all elements with the right css class and collect together all the widget-* values and use them to build the "options" that is used to invoke the datepicker method in the first place.
This is the type of idea that could go directly into the widget factory. What are people's thoughts on this?
I typically have this line in my master page:
$(".datepicker").datepicker();
and then just stick the datepicker class on any textbox that I want to use it on.
but it would be a timesaver to have an extension method instead of always writing new { #class: "datepicker" }
I like it.
Related
I'm trying to make a drop down menu that has a bunch of items (Amelia, Cerulean, Cosmo, Cyborg, Flatly, Journal). Each of these items represent a css file.
When one of them is selected I want my website to take this selected css file and apply it to the website.
I would like the drop down menu to interact with jquery, meaning when a item is selected jquery takes over and makes a asyn/ajax call to some mvc actionresult.
By the way I'm using MVC 5.
I hope someone can help me sketch the initial groundwork.
I've implemented this in my application.
I'm not sure what to tell you though. It's easier when we have an attempted solution to fix.
Here's an overview of how mine works:
I have created a controller called SharedController. The purpose of it is to contain various actions that render common actions. All of the actions are considered ChildActionOnly.
My _Layout uses RenderAction to render the action NavbarPartial which is in my SharedController.
More importantly the Navbar partial then uses RenderAction to render the action ThemeListPartial. This action is responsible for getting a list of available themes. The list of available themes is determined at applications startup. I've created a ThemeFinder class and ThemeRepository class that are responsible for finding and storing themes. The ThemeFinder finds themes by expressions that you give it. In a new class called App_Start/ThemeConfig I've given it only one expression - "~/Content/themes/{name}.bootstrap.css". This will find all themes with that naming convention in that location.
My razor code will take the ViewModel and display a dropdown menu in the navbar.
To get the themes to change my dropdown menu contains an AJAX link to an action called SaveTheme in ThemeController. This action takes a theme name as a string and tries to save it in a cookie for the user.
If the theme is found and saved successfully, the action responds with a success message.
jQuery then changes the theme by finding the associated link attribute and changing the HREF contents to the new theme. It knows the new theme relative URL because I have it stored in data attributes.
I completed this before I made the switch to AngularJs. The one thing I plan to go back and change is to cut out as much (maybe all) jQuery as possible and replace it with better code.
I would like a for loop in jquery using .html()
like this:
.html('<select property="doctype" name="doctype"><%for (String number : list)
{%>'<option value="'<%=number%>'>'<%out.println(number); %>'</option>'<% } %>'</select>');
In Java's for each loop list it uses an object of java.util.ArrayList<String>.
Here the .html(); function will call when we click on add button.
Here my question is it possible to write jsp scriplet code in .html() of jquery.
function will call when we click on add button.
No you can't.
Jsp is compile time.
More over java script plays on client side and jsp playes on server side.
jsp ,jsf and other kinds of java web technologies are rendered on the server side. Since jquery is a client side technology, it's not possible.
Instead, you can make ajax calls via jquery and update the html.
You cannot have the client execute Java in your scriptlet. Fortunately, what you want to do is very common.
Don't try to dynamically generate JavaScript in a scriptlet or jsp. It's very easy to make a mistake and end up with malformed JavaScript.
Instead, use a .jsp to spit out HTML. Then use static JavaScript to grab that HTML and put it where you want in the DOM.
For example, your jsp file could look something like this:
<div id="destination">The select element will be added to this div.</div>
<select id="my-select" property="doctype" name="doctype">
<c:forEach items="${list}" var="number">
<option value="${number}">${number}</option>
</c:forEach>
</select>
<script>
$('#destination').append($('#my-select'));
</script>
Hi i have a form in GSP and I want to make all the form elements read only after submit.
Is there any way to do it. I have form elements like textboxes, dropdowns attachment field......
I am using G:Form
I am also using java script in my GSP.
Please help me out
Thanks.
Keep in mind that even if you set the tags as readonly on the server side, users can still change them through a variety of means, and whatever the value on the form is before it gets sent back to you.
You can use an onsubmit event in the form tag, calling a JavaScript function which will disable any form elements you want to affect. Since GSP is server pages, not the browser, it will not normally be able to help you in this respect.
Certainly the easiest way is client-side with jQuery:
$(function() {
$('input, select, textarea').attr('disabled', 'disabled');
});
I have a form with two selects, but the second select is optional depending on the value selected from the first. For instance:
<select name="country" from="['US', 'CA']">
<select name="language" from="['FR', 'EN']" disabled=true>
Only if CA was selected from country do I want language combobox active.
Grails doesn't provide a way to do this by default. Since GSP tags allow you to use normal HTML events you would need to write JavaScript to enable and disable the second select based on the value of the first. You will want to look at the onchange event to do this. If you need to do a lot of custom UI type stuff you may want to look at using a JavaScript plugin for Grails. Prototype is included with Grails by default. Several other java script libraries are available as Grails plugins including jQuery and YUI
I agree, javascript is what you want. I'd recommend writing this in JQuery, since Grails is going to making that the default (over Prototype) in, I believe, v1.4. To do this in JQuery it would be something like this:
$("[name=country").change(function() {
$("[name=language]").attr("disabled", ($(this).val() == "CA"));
});
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