knockout model - observable empty in IE 11 - asp.net-mvc-4

I have a set of input fields that are used to set search params, passed to the controller via knockout and ajax upon pressing the 'search' button.
Each input is bound to a property in a viewModel - each one is a ko.observable().
I have code bound to the keyup event for these fields that will invoke the same search operation when the return key is pressed.
In Chrome, this works fine, but in IE(11) this is never passed!
I have also noted that if I press the tab key to go to the next field, and THEN press return, the search parameter I expect is now populated.
Any ideas? at my wits end...
How do I do the same as pressing the tab key in code, without pressing the tab key?
I think IE's handling of the .change() event in jquery might be different to everyone else...
edited to include sample code - js:
var searchVm = function () {
var self = this;
self.reference = ko.observable("");
self.postCode = ko.observable("");
self.description = ko.observable("");
self.doSearch = function () {
var date = {
Ref: self.reference(),
PostCode: self.postCode(),
Desc: self.description()
};
// do the ajax call to controller
// ... etc ...
}
}
$('.searchField').keyup(function(e) {
if (e.which===13) {
$('#btnSearch').click();
}
});
the page:
<div class='indexRow'>
<label>Reference:</label>
<input type='text' class='searchField' data-bind="value: reference" />
</div>
<div class='indexRow'>
<label>PostCode:</label>
<input type='text' class='searchField' data-bind="value: postCode" />
</div>
<div class='indexRow'>
<label>Description:</label>
<input type='text' class='searchField' data-bind="value: description" />
</div>
<button data-bind='click: doSearch'>Search</button>

Related

Angular2 how to clear the input value on submit without passing dom element

I've read that it is not good practice to pass the dom element so I come up with such view:
<div>
<input #message placeholder="message" (keyup.enter)="add(message.value)" />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
As you can see I am passing the message.value to my add method
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
}
But how can I clear the so inside add method so input #message won't containg any text? I tried message = null; but it is does not work.
If you extend your response with (blur)= , you can reset the input field as follows:
<div>
<input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
Note added: (blur)=add(message.value); message.value=''
you can use ngModel instead of #elem.value :
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
<button (click)="add(message)">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
and then clear the input value by adding
this.message = null;
in add function. This will work :
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
this.message = null;
}
your message.value attribute in view was not mapped to this.message in modal
Why to use extra Parameter when angular provides two way data binding in the form of [(ngModel)]. you can use ngModel to get notified both side on view as well as in the class/controller. no need to pass extra parameter along with method call. so you can use this simplified approach here
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
<button (click)="add(); message = null">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
message: string = null;
add() {
console.log(this.message);
// this.messengerService.add(this.message);
}
here is working demo for the same Working Plunker
The ngModel input property sets the element's value property and the ngModelChange output property listens for changes to the element's value. The details are specific to each kind of element and therefore the NgModel directive only works for elements, such as the input text box.

How to use buttons in MVC for different purposes

I do have three buttons in my view. So now I want two buttons to post back and the third button to perform some jquery. How to do this. Like how to make the third button not to post back and perform some jquery actions.
Thanks
You can do this like
<form id="myForm">
<%-- form data inputs here ---%>
<button id="Postback">Postback</button>
<button id="JavaScript">JavaScript</button>
</form>
and in javascript
<script type="text/javascript">
$("#Postback").click(function() {
var form = $("form#myForm");
form.attr("action", "#Url.Action("action","MyController")");
form.submit();
});
$("#JavaScript").click(function() {
Do your javascript something.
});
</script>
In HTML the tag button has the attibute type:
To post back data (submit a form) you must set type to submit (this is default value, so you may drop the type attribute at all).
To perform some javascript actions you must set type to button.
In two different submit buttoms use same name and different values:
#using (Html.BeginForm("Login", "Home")
{
<label for="login">Login:</label>
#Html.TextBox("login", Model.Login)
<label for="password">Password:</label>
#Html.Password("password", "")
<button type="submit" name="what" value="login">Log in</button>
<button type="submit" name="what" value="register">Register</button>
<button type="button" id="facebook">Facebook authentication</button>
}
<script>
$(function() {
// Perform jquery action.
$('#facebook').click(...);
});
</script>
In controller:
public ActionResult Login(string login, string password, string what)
{
if (what == "login")
. . .
else if (what == "register")
return RedirectToAction("Register", "Home");
}

Knockout observable array

In my ViewModel for my MVC4 application I have some code to get names from an ajax call and populate a simple control within my page, which is using Bootstrap 3. As you can see below I have a hard-coded array which works perfectly. With the ajax call, I see the data in the UI but it does not update my control and I have NO idea why. I have verified the data exists and I have also tried setting self.Names = ko.observableArray within the ajax call. Is there a simple reason why? As I said I see the data within my form in both scenarios but I am not seeing the update I expect.
$(document).ready(function () {
function ViewModel() {
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.Name = ko.observable("");
var Names = {
Name: self.Name
};
self.Name = ko.observable();
//self.Names = ko.observableArray([{ Name: "Brian" }, { Name: "Jesse" }, { Name: "James" }]);
self.Names = ko.observableArray(); // Contains the list of Names
// Initialize the view-model
$.ajax({
url: '#Url.Action("GetNames", "Home")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.Names(data); //Put the response in ObservableArray
}
});
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
});
Here is the Response from the body via the ajax call:
[{"Id":1,"Name":"Brian"},{"Id":2,"Name":"Jesse"},{"Id":3,"Name":"James"}]
My HTML
<p>Current selection is <span data-bind="text:Name"></span></p>
<div class="container">
<div class="col-sm-7 well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" placeholder="Work Section" name="q" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu" data-bind="foreach: Names">
<li class="dropdown">
</li>
</ul>
<input name="category" class="category" type="hidden">
</div>
</div>
Probably because the data coming in is either not structured the same as your bindings or observables are not set/updated properly. If they aren't observed then they wont update.
I'm not 100% sure on this, but I think you have to use the observable array functions in order for observers (UI elements bound to the array or its contents) to actually get updated. Basing this on a section from the observable array documentation on the knockout site:
2.For functions that modify the contents of the array, such as push and splice, KO’s methods automatically trigger the dependency tracking
mechanism so that all registered listeners are notified of the change,
and your UI is automatically updated.
Depending on the json, one way you might fix this is clear the observable array and reload it with data elements converted to observables:
self.Names.removeAll();
var newName = null;
for (var idx = 0; idx < data.length; idx++) {
newName = data[idx];
newName.Id = ko.observable(newName.Id);
newName.Name = ko.observable(newName.Name);
self.Names.push(newName);
}
On your html. the click function is using the Name property of the selected array element as the parameter. you don't want this, you want the latest value. So change this:
click: function() {$root.Name(Name);}
to this
//notice the new parenthesis after Name.
click: function() {$root.Name(Name());}

Pass Value of Drop Down as a Route Value to an Ajax Form

I am working on an ASP.NET MVC4 application, and I have the following in one of my views:
#using (Ajax.BeginForm("GetAllOrangeChocs", "ChocFactory", new { area = "Provider", Id = Model.FruitId }, new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "ChocFruitWrap" }, null))
{
<div class="form-horizontal" role="form">
<div class="form-group">
<span class="col-md-2 control-label"><strong>Fruit Group:</strong></span>
<div class="col-md-3">
#Html.DropDownListFor(m => m.FruitlId, new SelectList(Model.ListOf_Fruits,"Id", "PortalDisplayName"),"--Please Select--")
</div>
<div class="btn-group col-md-1">
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</div>
}
So it is an Ajax form that calls some controller action that returns a PartialView to display on the page. The controller code is:
public PartialViewResult GetAllOrangeChocs(int Id)
{
var model = _service.GetMeSomethingUsefulWithPassedParam(Id);
return PartialView("_Categories", model);
}
My controller action is being hit, but the Id is always null, my guess is, it is because there is no two way binding in place! As the ViewModel is passed in the GET Request, the FruitId on the ViewModel is null, and it only actually gets set in the POST
Am I right in my reasoning? And if yes ... how can I easily pass the Value (the Id) of the selected item in the Drop Down list?
I know I can added a hidden field, and via jQuery populate it each time the drop down changes, but is there no cleaner way?
from the link you have an ajax call
$.ajax({
type: "POST",
url: '#Url.Action("GetAllOrangeChocs", "ChocFactory")',
data: {
Selected: $('#FruitlId').val()
}
success: function (result) {
$('.divContent').html(result);
}
});
through the data attribute you can send whatever you want. What I have here will put the selected value into a variable called Selector (make sure whatever you call it on the view matches exactly with the input parameter on the controller). Let me know if you have any questions.

Unable to Disbale the DOJO dijit.form.Form

I have a Form and i want to disable the entire form on click of a Button ,please see this code
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data"
action="" method="">
<table>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">
Get Values from form!
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton"
value="Submit">
Submit
</button>
<button dojoType="dijit.form.Button" type="reset">
Reset
</button>
<button dojoType="dijit.form.Button" onClick="callMe()">
Disable IT
</button>
</div>
I have written a function callMe to disable this
function callMe()
{
dijit.byId('myForm').disabled=true;
}
Dijit forms do not have a property "disabled", but rather you have to overwrite the onSubmit event:
dijit.byId('myForm').onSubmit = function () {
// If we return false here, the form will not be submitted.
return myMagicEnabledFlag;
};
Note that you cannot use dojo.connect as you have to modify the return value of the event and not just connect to it.
For disabling the entire form elements, use the "getChildren()" function of the dijit form, which would return the array of all the field widgets of that corresponding form. Then, you need to disable the widgets of that array. See below sample:-
dijit.byId('myForm').onSubmit = function () {
var widgets = dijit.byId('myForm').getChildren();
for(var i=0;i<widgets.length;i++) {
widgets[i].set('disabled', true);
}
//if you need to prevent the form submission & just disable, return false,
//else ignore the following return stmt
return false;
};