I have viewmodel that i use for 'add' form. On that form i have 1 textbox called 'description'.
First time user enter some text in that field. Whan user press cancel( on the same form ) and then press Add again the form appearing with entered value in the 'description' field.
I want to create new view model and unbind all model with wrong value. But when i do that:
kendo.unbind($("#notes-dialog"));
kendo.bind($("#notes-dialog"), notesWindowModel);
the old value persist in the description textbox.
EDIT:
notesWindowModel = kendo.observable(
{
text: '2'
});
kendo.bind($("#notes-dialog"), notesWindowModel);
var notesWindowModel2 = kendo.observable(
{
text: '4'
});
kendo.unbind($("#notes-dialog"));
kendo.bind($("#notes-dialog"), notesWindowModel2);
Why does my field equal 2?
If i add
notesWindowModel.set('text', 'aaaa');
at the end my value equals 'aaaa'. It means that element is binded to first model. What is wrong here?
I found the problem:
<div id="notes-dialog">
<div id="notes-dialog-window" data-role="window" data-width="410" data-height="510" data-actions="" data-modal="true" data-title="false" style="display: none;">
<div id="notes-new-item">
<div>
<h3>Notes</h3>
<div>
<span>Note</span> <span>Is Delay?</span><span><input data-bind="value: model.Entity.IsDelay" class='k-input notes-checkbox' type='checkbox' /></span>
</div>
<div>
<textarea class="k-input utility-analysis-textarea notes-textarea" data-bind="value: text"></textarea>
The problem was that i have kendo window inside that element and when i open that window first time it replaces HTML and binding was wrong.
Old thread but I've recently faced the same issue.
In my case I've just had to destroy all kendo elements:
kendo.destroy(document.body);
Related
Working on an ASP.NET Core 6 MVC app. I am created a dropdown using the select asp-for tag helper. But I am not seeing a dropdown down arrow. Also I want to set the top or particular value selected by default.
Below is code and image of a dropdown
<div class="col-sm-3">
<select name="products" class="form-control "
asp-items="#(new SelectList(ViewBag.ddaircraft,"id","name"))">
</select>
</div>
Action Method code for ViewBag:
Public IActionResult Index()
{
var countries= _countries.getCountries();
//add an country item on the top of list.
countries.Insert(0, new Aircraft { Registration="0"});
//i used the country.name for value and item
var ddforAircraft = from country in countries
select new { id = country.name, name=country.name=="0"?"Item List":country.name };
// ddforAircraft.Append(new { id = "0", name = "" });
ViewBag.ddaircraft = ddforAircraft;
return View()
}
I found the answer, after Tiny Wang pointed me to the direction which really helped me to search the answer.
In order to see the dropdown down arrow I added a css class "form-select" without removing anything and I started to see the down arrow
<div class="col-sm-3">
<select name="products" class="form-control form-select-sm form-select " asp-items="#(new SelectList(ViewBag.ddaircraft,"id","name"))">
</select>
</div>
Missing dropdown arrow resulted from the class form-control, I test in my side and I found the arrow can be seen by default until I add class="form-control " to my code:
removing this 2 options then the arrow appeared again, so it proved to relate to the class, you may need to update the style:
Then I use Jquery to change the default selected option when page is loading in my code, my selector has Id Country, then change the value(ListItem.Value):
<select asp-for="Country" asp-items="#(new SelectList(Model.Countries, nameof(ListItem.Value), nameof(ListItem.Text)))">
<option>Please select one</option>
</select>
#section Scripts{
<script>
$("#Country").val('Canada')
</script>
}
I want to do something seemingly simple in livewire. I want to set the value of a hidden input field based on an attribute from a button that's clicked. I can console.log the ID I'm looking for, and it works. I can see that the value of the input is updated in the UI, however, it's updated to what appears to be the Livewire hash or ID of the element. I just want the regular id. Am I doing this wrong?
here's the link that's clicked, and I want to put the $status->id into the hidden input:
<a role="button" id="task_status_{{ $status->id }}" class="add-task-btn"><i class="mdi mdi-plus-circle h5 text-muted" data-bs-toggle="modal" data-bs-target="#createOrUpdateTask"></i></a>
The input:
<input id="status_id_input" value="" hidden>
The js:
$('.add-task-btn').on('click', function(el) {
let status = el.currentTarget.id.split('_')[2];
$("input[id=status_id_input]").val(status);
});
Maybe I'm not thinking about this in a livewire-y way, but this is something I've done countless times in the past.
If I console.log the status I get a number, like 2, for example.
But when I look at the markup, the value of the input is like this:
wTz06yjQoQErKT3p36EKP4zZwWjJgIsUOttX4URL
I was wanting to do this without a round-trip to the server since it's just a simple thing.
Change your code from this
<input id="status_id_input" value="" hidden>
To this
<input id="status_id_input" value="yourvalue" type="hidden">
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I have a directive that sets a CSS class on a form element based on its $valid value. I want to use it with a radio button list. There a multiple radio buttons in the set but I only need to add the directive to one of them because a) they all control the same model and b) the CSS ultimately will reveal a single image tag which I only want once per radio button list.
Here's some HTML:
<div ng-app="myApp">
<input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
Script:
angular.module('myApp', []).directive('addValidationClass', function() {
return {
require: '^ngModel',
link: function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) return;
var update = function () {
alert($ngModel.$dirty);
$element
.removeClass()
.addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
};
$scope.$watch($attrs.ngModel, function (newValue, oldValue) {
update();
});
}
};
});
Fiddle: http://jsfiddle.net/JqBgs/
You can see from the fiddle that the watch fires update regardless of the radio button clicked on. This is what I expected because both radio buttons control the same model. However you can also see that the left radio button isn't dirty. So the CSS class isn't applied.
Why isn't it dirty?
I put this in the HTML:
<div ng-app="myApp">
<input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
What a ridiculous bug in Angular.
I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.
The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindings once the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.
Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindings once?
ko.applyBindings accepts a second parameter that is a DOM element to use as the root.
This would let you do something like:
<div id="one">
<input data-bind="value: name" />
</div>
<div id="two">
<input data-bind="value: name" />
</div>
<script type="text/javascript">
var viewModelA = {
name: ko.observable("Bob")
};
var viewModelB = {
name: ko.observable("Ted")
};
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));
</script>
So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindings multiple times on the same elements, as you will get multiple event handlers attached.
While Niemeyer's answer is a more correct answer to the question, you could also do the following:
<div>
<input data-bind="value: VMA.name" />
</div>
<div>
<input data-bind="value: VMB.name" />
</div>
<script type="text/javascript">
var viewModels = {
VMA: {name: ko.observable("Bob")},
VMB: {name: ko.observable("Ted")}
};
ko.applyBindings(viewModels);
</script>
This means you don't have to specify the DOM element, and you can even bind multiple models to the same element, like this:
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
I've managed to bind a custom model to an element at runtime. The code is here: http://jsfiddle.net/ZiglioNZ/tzD4T/457/
The interesting bit is that I apply the data-bind attribute to an element I didn't define:
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
You should look at the with binding, as well as controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html