I have a kendo listview with custom edit template,
And this is the list view Code
var warrantyContact_listview = $("#warrantyContact_listview").kendoListView({
autoBind: false,
dataSource: dataSource,
template: kendo.template($("#warrantyContact_listview_template").html()),
editTemplate: kendo.template($("#warrantyContact_editview_template").html())
}).data("kendoListView");
And here is the edit template Code
<script type="text/x-kendo-tmpl" id="warrantyContact_editview_template">
<div id="con_editview">
<dd>
<dt>Person</dt>
<input type="text"
data-role = "autocomplete"
data-source = "some_datasource"
data-text-field = "fname"
data-value-field = "bid"
class="k-textbox"
data-bind="value:some_value"
name="builder"
required = "required"
validationMessage = "required"
id="builder"/>
<span data-for="some_value" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>City</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:city" name="city" required = "required" validationMessage = "required" />
<span data-for="city" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>State</dt>
<dd>
<input type="text" name = "state" class="k-textbox" data-bind = "value:state" data-value-field="abbrev" data-text-field="abbrev" data-min-length="1" data-source="states_datasource" data-role="autocomplete" required = "required" validationMessage = "required" />
<span data-for="state" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>Zip</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:zip" name="zip" required = "required" validationMessage = "required" />
<span data-for="zip" class="k-invalid-msg"></span>
</dd><br clear="all"/>
</dl>
</div>
</script>
Here is the scenario
When the listview enters into the edit mode, I would fill in in the first field "Person" which is an auto complete.
Based on what value I select for the Autocomplete "Person", I would like to assign its corresponding values to the city, state and zip. I am able to assign the values successfully. ( which I do with jquery ajax in the select event of the Person Auto complete)
But, when I call the $("#warrantyContact_listview").data("kendoListView").save();
When I check the firebug console,
those changed values city, state and zip are not been passed to the server side.
What I am missing here?
Do I have to change the binding of values in the template here?
I tried to change the values in the parameter map function, but, it did not work.
Any help would be greatly appreciated!
My first guess is that when you change the values, you don't use the set() method of the ObservableObject in dataSource, so the kendo dataSource doesn't know that the fields of the observable are modified.
So on save() ( which calls sync() for the dataSource ) it doesn't see anything new, and it doesn't update anything.
Check manually your datasource, change something with set() and use save() to see if it's saved.
Related
I have a value i want to save to the database as a slug generated from the name. The problem is I cannot use both v-model and :value in the same input field. what is the solution to this? I am using laravel and vuejs. How can i solve this error?
<div class="modal-body">
<div class="form-group">
<label>Slug</label>
<input v-model="form.slug" :value="form.name | slugify" type="text" name="slug"
placeholder="downtown-dubai"
class="form-control" :class="{ 'is-invalid': form.errors.has('slug') }">
<has-error :form="form" field="slug"></has-error>
</div>
</div>
Just generate slug from the name on the backend.
From the Frontend, you only send name and other needed fields, while on the backend you use that name to create a slug.
The easiest and most direct way would by to use v-model="form.name" and get rid of the :value attribute, then just update form.slug using the data from form.name in the function that submits the form. Example:
submitForm() {
this.form.slug = this.$options.filters.slugify(this.form.name)
// Submit the form...
},
If the form.slug field is actually displayed on the page and needs to immediately be reactive, you could also update it using a watcher for form.name like this.
watch: {
'form.name'() {
this.form.slug = this.$options.filters.slugify(this.form.name)
},
},
I am using CFWheels for form validation. I have presenseOf() validation checks in both objects models. I have a form with a textbox and a set of radio buttons.
However If I submit the form empty, the validation for supervisor works but validation for the user checklist does not work. It gives the error;
"uchecklist" is not defined in the params variable.
On further observation, I notice that when the form is submitted, params struct has the "supervisor[name]" object but its empty, however it doesn't even have the "uchecklist[cstatus]" object. Moreover only when I select one of the radio buttons then the "uchecklist[cstatus]" object is submitted with that radio button's value.
I need to validate if at least one of the radio button is select, I guest this functionality is different from the empty text box validation.
Can someone show me how a radio button is validated using CFWheels form helpers.
Controller
public function t_validate()
{
title = "Home";
supervisor = model("supervisors");
uchecklist = model("user_checklist");
}
public function t_validate_complete()
{
title = "Home";
supervisor = model("supervisors").new(params.supervisor);
supervisor.save();
uchecklist = model("user_checklist").new(params.uchecklist);
uchecklist.save();
renderPage(action="t_validate");
}
View
<cfoutput>
<cfdump var="#params#">
#errorMessagesFor("supervisor")#
#startFormTag(action="t_validate_complete")#
<div>
<label for="">Supervisor:</label>
<input name="supervisor[name]" value="" />
</div>
<fieldset>
<input type="radio" name="uchecklist[cstatus]" value="1" />
<label for="profile-eyeColorId-2">Blue</label><br />
<input type="radio" name="uchecklist[cstatus]" value="2" />
<label for="profile-eyeColorId-1">Brown</label><br />
<input type="radio" name="uchecklist[cstatus]" value="3" />
<label for="profile-eyeColorId-3">Hazel</label><br />
</fieldset>
<div>
<input type="submit" value="Save Changes" />
</div>
#endFormTag()#
</cfoutput>
An unchecked radio button will submit no data to the server. This isn't a unique problem to ColdFusion or CFWheels.
To fix, provide a default value for the struct at the beginning of your controller action:
public function t_validate_complete()
{
// Provides an empty struct for the model to consume if none of the radio buttons are checked.
param name="params.uchecklist" type="struct" default="#StructNew()#";
title = "Home";
supervisor = model("supervisors").new(params.supervisor);
supervisor.save();
uchecklist = model("user_checklist").new(params.uchecklist);
uchecklist.save();
renderPage(action="t_validate");
}
I have a form in codeigniter where I've an option to show the data in the front page or not.
<div class="form-group input-group">
<label>Show in Front</label>
<input type="checkbox" id="switch-change" name="show-infront" checked data-on-text="YES" data-off-text="NO" checked data-on-color="success" data-off-color="warning">
</div>
<script type="text/javascript">
$("[name='show-infront']").bootstrapSwitch();
</script>
When I print the value of the form in controller like echo $this->input->post('show-infront'), when 'yes' is checked, the output is 'on' and when 'no' is checked, there is no any output. So, I want that when I check yes, then the value should be 'yes' and vice-versa.
try: onSwitchChange ...
OK so if checkbox in not checked not send its value in POST, so you need a hidden field like this:
also need set its value at init and onChange
<input type="checkbox" id="switch-change" name="show-infront" data-on-text="YES" data-off-text="NO" checked data-on-color="success" data-off-color="warning">
<input type="hidden" name="show-infront-val"/>
<script type="text/javascript">
var ckbox = $("[name='show-infront']");
var ckbox_val = $("[name='show-infront-val']");
ckbox.on('switchChange.bootstrapSwitch init.bootstrapSwitch', function(event, state) {
if (this.checked) ckbox_val.val('Yes')
else ckbox_val.val('No')
});
ckbox.bootstrapSwitch('state', true);
</script>
Btw if you check php-s isset($_POST['show-infront']) also a good option for one checkbox
Documentation
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums
how to assign value directly to kendo data-bind
here is the code
<script type="text/x-kendo-template" id="add-new-user-template">
<li>
<a class="user-result">
<span class="row-name">Create New User</span>
<br/>
<input type="hidden" class="hf-user-role-id" data-bind="value: 0"/>
<input type="hidden" class="row-party-id" data-bind="value: "/>
</a>
</li>
</script>
hav to set first input field value to 0 and second to empty string
Ok, I don't really know if I understood what you try to achieve, but if you want to set static values, why not just doing <input type="hidden" name="user-id" value="0" class="hf-user-role-id" /> since there is (in my opinion) no sense of binding static values.
The data-bind attribute needs a variable or some JSON to be bound to not a static value.
Cheers
If I understand correctly you want to do this:
$('.hf-user-role-id').attr('data-bind', "value: 0");
$('.row-party-id').attr('data-bind', "value:");
The jquery attribute method allows you to change the values of an attribute.
If you are using kendo ui then you will almost certainly have included jquery.