I'm working on flat-pickr. And now to the config part. I have 1 fields date_range. I want to trigger a event only after user choses date_range.
<flat-pickr
class="form-control shadow-none"
name="date_range"
:value="date_range"
#input="$emit('update:filter', $event.target.value)"
#onClose="$emit('updateTrigger')"
:config="configRange"
placeholder="Select date range"
/>
Here I want to emit updateTrigger only after user chooses a date_range, not after chosing a single date. Here It triggers the updateTrigger after closing the datepicker, but on filter, I only get the one date .
You can check if selectedDates.length === 2 in the onChange event. So put to flatpickr #on-change="updateTrigger" and then make function:
const updateTrigger = (selectedDates, dateStr, instance) => {
if (selectedDates.length === 2) {
$emit('update:filter', selectedDates);
}
};
Related
In Laravel 5.1, I need to update multiple values from checked checkbox.
I can edit some registries from a table by clicking the edit button for each registry, and that button send me to the edit view
(This is de edit view for a single registry)
With the url: http://myapp/someroute/2246/edit where 2246 is some id.
Inside that edit I can update 4 fields. One of those fields is called "my state" and can have the values 1, 2 or 3.
Now, I have to make a multi select edit feature, where I can check every row of the table that I need to update simultaneously (each have the name=someid) and then click some button called "Validate", and update for evey row only 1 field, the my state field, and the new value will be always 1 (in the picture the values are string but thats only for the view).
The question is: how can I call the method update for every id that I'm selecting in the view? every input checkbox has it's own name which is the id of the registry that I will update.
The update method just validate some values from the view and then call some myeditmethod, but in this case I will jump the update and go directly to myedit which is someting like:
public function myedit(Request $request, $id) {
$obj = Self::findOrFail($id);
$obj->fk_id_comuna = $req['fk_id_comuna'];
$obj->fk_id_user = $usuario_id;
$obj->date = \Carbon\Carbon::now();
$obj->fk_id_my_state = $estado; //THIS IS THE ONLY FIELD THAT I WILL EDIT, ALWAYS WITH THE SAME VALUE `1`
$obj->save();
I was trying the make a form for that Validate button but I don't know how to handle multiple id in one call on the edit method.
<form action="{!! route('myroute.update', ['id' => [HERE, HOW CAN I PASS MULTIPLE ID FROM THE CHECKED CHECKBOX] ]) !!}" method="POST">
<input type="submit" class="btn btn-primary pull-right" value="Validar" />
</form>
I was thinking on a javascript function which collect in a array every checked checkbox name and call the myedit method directly, without the formof the view, could be?
About passing multiple values as one Request value.
Assume you have form like this:
<form method="post">
<input type="checkbox" name="options[]" value="foo"/>foo<br/>
<input type="checkbox" name="options[]" value="bar"/>bar<br/>
<input type="checkbox" name="options[]" value="buz"/>buz<br/>
<input type="submit" value="Submit" />
</form>
Your request('options') would be an array: ["foo", "bar", "buz"].
Than you can iterate over options using foreach.
Inside your update method you can go with:
foreach ($option as request('options')) {
//put your previous code here, so it'd be applied for every option
}
In JS I did this:
var optionsChecked = [];
$('.options:checkbox:checked').each( function(){
optionsChecked .push($(this).val());
});
Then in ajax:
$.ajax({
type: 'POST',
data: {'id': optionsChecked },
etc
Then in PHP:
$all = $request->input('id');
foreach ($all as $id){
//whole obj->* = *;
$obj->save();
}
I have a WebGrid on my form, inside that I have a column called 'duration'. In this column I'm displaying 2 radio buttons, so the Admin should select one validity period for that user on every row, either 30 days or 90 days and submit. And here I want to get the selected radio button value submitted value and the Id of that row so that I can perform the database activities with that values.
grid.Column("Duration", format: #<text><div style="width: 30em"><table><tr><td><input type="radio" name="group1" value="30"> 30 Days<br>
</td><td><input type="radio" name="group1" value="90"> 90 days<br>
</td></tr></table></div></text>)))
Here the problem is when I'm giving the same group name the radio buttons we can only select one radio button in the entire grid, but how I want is that he should select one radio button on each row. Also how can retrieving be done?
A separate name should be used for each 'group' of radio buttons. Out of all radio buttons that have the same name, only one can be selected.
With MVC, you can use model binding; when your form posts back, the model is built and the properties are assigned based on the name or id values.
To use this, you need to create inputs using methods such as:
#Html.RadioButtonFor(Function(m) m.MyProperty) #* ... *#
******* edit -- clearer explanation *****************
Let's use two 'groups.' A user can select a first name and an occupation. To limit the number of selections within a group, each control group needs its own value for the radio button's 'name' property.
#Html.RadioButtonFor(Function(m) m.NameSelected, "Jane", New With { .name = "UserName" }) Jane <br />
#Html.RadioButtonFor(Function(m) m.NameSelected, "Jack", New With { .name = "UserName" }) Jack <br />
#Html.RadioButtonFor(Function(m) m.Occupation, "Lumberjack", New With { .name = "Occupation" }) Lumberjack <br />
#Html.RadioButtonFor(Function(m) m.Occupation, "Waiter/Waitress", New With { .name = "Occupation" }) Waiter/Waitress
The radio buttons for the names will now be selectable without affecting the radio button selections in the occupation group, and vice versa.
I have a kendo date picker defined as follows:
<input id="datePicker" data-format="dd.MM.yyyy" data-month='{ "content": "<span class=\"#= dateRange.hasReport(data.date) ? \"boldDate\" : \"normalDate\" #\">#=data.value #</span>" }' data-role="datepicker" data-bind="value: new Date(), events: {change: dateChanged}" style="width:150px;" />
In the month template, I bold some dates depending on whether there is a report or not for that date by a call to the method dateRange.hasReport(data.date)
Now, there is an external event which causes the daterange to change. I want to now refresh the calender view so that the dateRange.hasReport is called for all dates again.
I am unable to find a way to do this.
Any ideas?
Use the methods min(), max() to change your ranges and the 'change' event will be triggered I guess. You can bind your function there if you want.
http://docs.kendoui.com/api/web/datepicker
I fixed it by destroying the element and recreating it again
$("#datePicker").data("kendoDatePicker").destroy();
$('#datePicker').empty();
createDatePicker(); //Creates the datepicker widget again
$("#datePicker").closest("span.k-datepicker").width(150);
I am new to knockout js. I need to have a validator for date which user will be typing in textbox. for this wrote the code like
ko.validation.rules['date'] = {
validator: function (value, validate) {
//Custom logic
},
message: 'Please type proper date'
};
self.userDate = ko.observable(new Date()).extend({date: true });
This is working fine on tab out. But i need to call this validation on some delay(When the user stopped typing).
Any one could tell me how can i call this validation on delay?
To make sure the viewmodel is updated as the user is typing, use the valueUpdate binding:
<input data-bind="value: userDate, valueUpdate: 'afterkeydown'" />
You then throttle the observable:
self.userDate = ko.observable(new Date()).extend({
throttle: 1000, //<- time in ms to wait before validation
date: true
});
Throttle in this case waits 1000 ms after the last registered input event to perform the validation.
I have an controller which has check like that
if (form["submit"].ToString() == "Continue")
{
}
and i have button which is doing submit
<button name="submit" value="Continue">Continue</button>
It was all working well until i decided to disable Continue button on submit to prevent double click using this function:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
So now i don't get value form["submit"] posted on controller.
Any thoughts how may i fix that?
I want still prevent second click but be able to get form["submit"] value posted on controller.
Can you control the submit value in a hidden field in the form? I can't tell what other logic you might need, but when the form renders, you could set the hidden field's value to the submit button's value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you'd rarely disable a hidden field) then it will post when the form is submitted.
$(function() {
// this assumes your button has id="myButton" attribute
$(':hidden[name="submit"]').val($('#myButton').val());
});
And of course in your form, you would need a hidden field with name="submit"
<input type="hidden" name="submit" value="Continue" />
Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).
There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to "value" bind input elements. It's probably overkill for this small example, but it could be useful if your UI expands. I've added markup, script and comments below if you're interested.
$(function () {
var viewModel = {
submitValue: ko.observable("Continue")
};
ko.applyBindings(viewModel);
$('form').submit(function() {
if($(this).valid()) {
// the following line will change the both the hidden field's value
// as well as the button's value attribute
viewModel.submitValue("some other value");
// I couldn't follow your selector here, but please note I changed
// the name of the submit button in the markup below.
$(':submit, this).attr('disabled', 'disabled');
}
});
});
KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you'd bind one property to multiple elements like this:
<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>