I'm working with ASP MVC4 jquery calendar. I'm new to this. I have my jquery calendar built so that it highlights particular dates which i passed through array. But now the question is, I have a table of data in database which I got into Model and then used to it retrieve information based on an 'ID' in controller and returned to VIEW. Now I can get the dates from database in the form of table but I want to know, how I can pass those particular dates to an array of JQUERY CALENDAR in VIEW.
Also I imported package:
with core and datepicker functionalities.
But when i click the next arrow or previous arrow, it doesn't show next or previous months.
I can post the code if you don't understand my question. Please help me since I have already spent more than 15 days understanding this.
well, thats an older question but I had a couple of problem myself with datepicker and took me about 3 hours of research until I found the answer ... this is only for poeple like me who'd end up on this while digging up for answers ... *
Jquery UI is already include in .net mvc4, as is datepicker, its in the bundle. you just have to call it by adding this to your layout ( in the head section )
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
also, make sure you dont have another script render at the bottom of your body, as its by default where the jquery bundle is set (at least it was for me on the default project ) and it cause a bug with datepicker when I used it.
<input id="mydate" name="mydate" class="datepicker" type="text" value="#Model.mydate.Value.ToString("dddd, dd MMMM yyyy")" />
where mydate is the name of the parameter you'll have set in your viewModel, said parameter is a DateTime object ( or DateTimeOffSet ) (the .Value is only if you set the date as a nullable, its not necessary otherwise)
After on the bottom of your view, create a jquery section :
#section scripts{
<script>
$(".datepicker").datepicker({ dateFormat: "DD, d MM yy", altFormat: "yy-mm-dd" });
</script>
}
(dateformat and altformat are optional, give them the value you want or dont use them at all)
as for the array of date ... i'd use a viewmodel, which would contains your array as parameter, and pass this viewmodel between your view and your controller. after that define an Editor template and its should be pretty straighforward to build a table with the dates from there.
Related
I need to do a webpage to finish my uni, and im about 90% done with it, however, im struggling with getting custom Iterators and Charts to work.
Im trying to use Recharts, but i have no idea on how to make it gather the info i want (I need it to get the number of users registered and the number of vaccines they took), but all i see on the documentation is ready results, im not sure if ChartJS will make it any better, and even if it does, im confused on how custom iterators work since i took my "Analytics" one from another StackOverflow question, however that's the least of my worries, since this seems to be simplier than getting the ACTUAL charts to work.
Help would be appreciated since i have 2 weeks to deliver it and im stuck on that, and its CRUCIAL i get that to work.
Oh yes, im also very bad at Javascript so every info is welcome.
EDIT:Forgot to say i've looked around but lots of them are for simplier and static stuff instead of database counts or stuff like that.
Welcome to SO.
1) Recharts wants an array that it needs to iterate over and display. So what I usually do is make the Chart Component a child of a List component.
2) I use the Filter on the List page to select different chart components when the user selects different options from the dropdown (in case your analytics page needs to show different charts from the same page)
^^this is a bit tricky for peeps new to JS but is quite straightforward if you want to get into it.
3) For you i think the best bet will be that you make different List components and resources for each page and just display different charts on their own page.
export const AnalyticsList = (props) => {
return (
<List title="Analytics" {...props} perPage={20} sort={{ field: 'id', order: 'ASC' }}>
<Analytics />
</List>
)
}
here is how the Analytics Component is
import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
export const Analytics = (props) => {
return (
<BarChart width={800} height={400} data={Object.values(props.data)} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis dataKey="charLimit" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Bar dataKey="charLimit" fill="#82ca9d" />
</BarChart>
);
}
Hope this helps.
I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.
We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.
The collection is pre-processed when GlassMapper is retrieving the item:
Validations = glassItem.GetValidations();
#foreach(Validation validation in Model.Validations)
{
<div id="#validation.Identifier" ng-message="#validation.AngularKey" ng-cloak class="mtg-validation-msg">
#Html.Glass().Editable(validation, e => e.ErrorMessage)
</div>
}
Error that I am getting:
Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation
It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.
Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.
Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
{
<div>Edit Validations</div>
}
}
You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.
Chosen is working great for me but I cannot figure out how to get my acceptance test to send in the value on the form submit.
Handlebars template:
<form>
{{#ember-chosen value=country}}
{{#each countries as |country|}}
<option value={{country}}>{{country}}</option>
{{/each}}
{{/ember-chosen}}
{{#link-to 'countries.show' (query-params country=country) tagName='button' type='submit' replace=true class="submit__button"}}Search{{/link-to}}
</form>
Acceptance test:
test 'Searching for a country', (assert) ->
visit '/search'
find('.chosen-select').val('USA')
find('.chosen-select').trigger('chosen:updated')
click('.submit__button')
andThen ->
assert.equal find(".chosen-select :selected").text(), "USA"
This fails because on submit country is not even passed in as a query param, but only in the test.
The same thing happens if I do it in the console. If I open my console and do:
$('.chosen-select').val('USA')
$('.chosen-select').trigger('chosen:updated')
then the selection updates before my eyes! But then clicking submit produces the same results as the test, that is, the country is not passed into the query-params.
Clicking "USA" from the dropdown however, then clicking submit, works perfectly.
UPDATE
Chad Carbert's response below gave me the answer. Here are the specific results:
$('.chosen-select').val('USA')
$('.chosen-select').trigger('chosen:updated')
updates the DOM only. Not the data-bindings with Ember.
$('.chosen-select').trigger('change', {'selected': 'USA'})
updates the data-bindings (which is what I really need), not the DOM.
Since this is for my acceptance tests only and I don't need to see the DOM change, my test now looks like this:
test 'Searching for a country', (assert) ->
visit '/search'
find('.chosen-select').trigger('change', {'selected': 'USA'})
click('.submit__button')
andThen ->
assert.equal find(".chosen-select :selected").text(), "USA"
Which works like a charm! If you wanted to though, there would be no harm in doing all three:
test 'Searching for a country', (assert) ->
visit '/search'
find('.chosen-select').val('USA')
find('.chosen-select').trigger('chosen:updated')
find('.chosen-select').trigger('change', {'selected': 'USA'})
click('.submit__button')
andThen ->
assert.equal find(".chosen-select :selected").text(), "USA"
Thank you Chad!
It looks like this might be an issue with the way that this component wraps the jQuery library. Looking at the documentation for chosen:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.
via chosen docs
However, it doesn't look like the ember component is wrapping that event in any way. It also looks like the chosen:update is updating the chosen UI implementation, but not the data binding within Ember. This would be in a case where you've after the fact added options to the select, and want these reflected ('rebuilt') on the screen.
Looking at the code behind this component and how it's wrapping the chosen library, it appears that this component is only capturing the change event. So try doing a trigger on a change event and that should have things update within ember, and its data binding.
Or try triggering the change the way it's mentioned on the Chosen docs:
Form Field Change**
When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event* on the original form field. That let's you do something like this:
$("#form_field").chosen().change( … );
If that doesn't work, if you're able to provide a codepen I will take a look closer, thanks!
Im am using Play 2.0.4 and
helper.options(myitems)
in my template (inside of a helper.select)
In this case, how can I define the default selected entry, which shall be one entry out of myitems? Thanks for any hint!
A little bit more about my case:
Imagine a news archive, showing all news titles. This news archive uses pagination, pagination uses GET to pass the next/previous page number.
The play framework however will only correctly select the currently selected "select" item (here: news category) when a POST request was used - while pagination uses GET!
Intended behaviour: While a filter is applied / a specific news category is selected, this shall always be visible to the user by preselecting the currently selected news category in the "select" form.
A "screenshot" for illustration:
So, anyone having a good idea on how to cope with this problem? Any way to tell Play manually which entry from the "select" form it shall select? '_default always adds a new entry instead of selecting one out of the given options ): Would be great, if one wouldn't have to build the complete "select" form manually.
Try passing '_default option to select helper:
#import views.html.helper._
#select(form("email"), options(List("first", "third")), '_default -> "second")
It seems, unfortunately, the only way to figure it out is to look up the source.
Update:
Specifying _default property doesn't set selected attribute on option tag. It looks like the only way to preselect entry is to pass prefilled form to the template. For example, suppose you have following form:
case class RegInfo(email: String, color: String)
private val registrationForm = Form(
mapping(
"email" → email,
"color" → nonEmptyText(minLength = 5, maxLength = 32)
)(RegInfo.apply)(RegInfo.unapply)
)
Then in the action prefill form before passing to the view:
def create = Action {
Ok(html.create(registrationForm.fill(RegInfo("user#qwe.com", "blue"))))
}
Then in template use helper:
#select(form("color"), options(List("red", "green", "blue")))
And value will be preselected.
Ended up with the pragmatic approach:
<select id="myfield" name="myfield" >
<option class="blank" value="">-- All items --</option>
#for((key, value) <- MyModel.options) {
#if(key == GETValuePassedToTemplate) {
<option value="#key" selected>#value</option>
} else {
<option value="#key">#value</option>
}
}
</select>
Still wondering if there is a better option / way to do it.
Actually, there is a nicer solution to it. If you call the template having the form partially bound you will achieve your goal. Here's the code for your controller:
Ok(views.html.myForm(myForm.bind(
Map("fieldName1" -> "value1",
"fieldName2" -> "value2"))))
Make sure you map fieldnames to the values of the options you want pre-selected.
Still wondering if there is a better option / way to do it.
Well, if your not hell-bent on using play to solve this particular problem, you could always solve it using JavaScript and jQuery:
$(function () {
$('#yourSelect_id').val(5);
}
Where your select options each has values and the one option you whish to pre select has value 5.
Based on another question I have asked:
How to Remove <a href> Link Tag for a Specific Value using Jquery
where I need to remove the a href tag if the value is 'N'.
All works fine on first load, but since I am using an Oracle ApEx Interactive Report (IRR) and perform a partial page refresh, the solution from my other thread doesn't fire again and so all my values that have a value of 'N' now have a link below it which is not want I want.
Within an IRR, is there a means of firing jQuery code, like on load when the report is partially refreshed, based on column filtering?
Sure is.
With dynamic action: After Refresh
Triggering region: select your IR region
True action: execute javascript code
$('a', this.triggeringElement).filter(function(){
return this.innerHTML === 'N';
}).replaceWith('N');
Or just javascript code
$("#ir_region_id").bind("apexafterrefresh", function(){
$('a', this).filter(function(){
return this.innerHTML === 'N';
}).replaceWith('N');
});
Although you might want to restrict your "a" selector to your actual link column. If you don't, every link in the IR region is selected. It's unnecessary.
$('td[headers="my_link_column"] a')