I have view for entering new entity. On that view I have two buttons: one for saving new entity and another button should enter value into textbox on that form but I can't achieve this, the value in the textbox stays same as it was on page load. Does anyone know how to do this?
Thx
There are two possibilities:
Use javascript
Reload the page with additional query string containing the new value
Example with jquery:
<input type="text" name="foo" id="foo" value="old value" />
<input type="button" id="update" value="Update value" />
and the script
$(function() {
$('#update').click(function() {
$('#foo').val('some new value');
});
});
Related
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I have a value for user display and a similar value for storage. How can I modify what I have so that I save the correct data to the model?
Fiddle
HTML
<div>formatted value for user display</div>
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<div>unformatted value (the one I'd like to save)...this is not model bound</div>
<input type="text" data-bind="value: unitOfCost" />
JavaScript/Knockout
function AppViewModel() {
var self = this;
self.unitOfCost = ko.observable(1.01).extend({
isServerSet: false
});
self.formattedUnitOfCost = ko.computed({
read: function () {
return '$' + self.unitOfCost().toFixed(2);
},
write: function (value) {
// Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
value = parseFloat(value.replace(/[^\.\d]/g, ""));
self.unitOfCost(isNaN(value) ? 0 : value); // Write to underlying storage
},
owner: self
});
}
ko.applyBindings(new AppViewModel());
The unformatted value is not displayed to the user. Model_Bound_ID is user editable.
You're doing it the wrong way.
Your model bound control (I mean the control that will be posted to your controller, and has the unformatted value) should be created like any other control, for example using Html.HiddenFor or whatever you want in your (Razor?) template. And you must add the data-bind attribute in the template. Remember that low-dash will be converted in medium-dash, so you can add it in the attributes parameter of the Html Helper like this: { data_bind = "value: unitOfcost" }.
Obviously this hidden field will be sent to the controller when posted (direct post, ajax, or whatever).
Now you need to add the visible control, and bind it to another observable. This observable will be a computed observable, which will do this:
on read, it will take the value from unitOfWork, and return it formatted
on write, it will parse the value to convert it to number, and update the unitOfWork observable with the parsed value
In fact you've got nearly all the code, but were implementing it all the way back.
Another way of looking at this answer is to change the html from this:
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<input type="text" data-bind="value: unitOfCost" />
to this
<input type="text" data-bind="value: formattedUnitOfCost"/>
<input type="text" data-bind="value: unitOfCost" id="Model_Bound_ID" />
And KO does the rest by the power of the observables. Gosh I love KO
#Html.RadioButton("smth",true)
This row at the page looks like UNCHECKED radioButton. Why?
You should use
HtmlHelper.RadioButton(string name, object value, bool isChecked)
extension method.
First argument is the name of the form field which is input field generated by html helper.
Second argument is the value of input element. If this radio is selected when the postback to server happens, this value is used.
Third argument is what you are looking for. If it is true it makes radio button selected.
For instance,
#Html.RadioButton("Name", "Value" ,true)
would generate an input element which looks like following,
<input checked="checked" id="Name" name="Name" type="radio" value="Value" />
You need to use something of the form
#Html.RadioButton(id,value,checked (bool true/false))
So
#Html.RadioButton("A","B",true)
For example would produce:
<input checked="checked" id="A" name="A" type="radio" value="B" />
The documentation for this is here
In your previous query, you got this answer.
You asked the same query in it's comment section. The problem was that the second line of code was missing one parameter.
Please check below details....
Parameter Details
Razor Syntax
#Html.RadioButton("smth", "smth", true)
#Html.RadioButtonFor( m => m.Prop, true, new { id = "rdBtn" } )
With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/
I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.
Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/
I solved this with two steps;
1) unwrapping the label from the input and hooking them together with 'for' attribute
<input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
<label data-bind="uniqueIDFor: true" >Click me</label>
ko.bindingHandlers.uniqueIDFor = {
init: function (element) {
element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
ko.bindingHandlers.uniqueID = {
init: function (element) {
element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
2) telling jqm to update the new content
$('input:checkbox').trigger('create');
I would change the model for this:
<!-- ko foreach: listItems-->
<input type="checkbox" name="itemsList" value="name" />
<span data-bind="text: name"></span>
<!-- /ko -->
the main thing to consider is the "value" property in the input control to render in the proper way.
Regards.
#tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);