I am trying to edit user data but when I click on user id, radio button is not selected as per it's value.
result.IsActive returns true or false.
I also try to set result.IsActive(true) by default in ajax response but it does't work.
Where I am going wrong?
Thanks in Advance
var self = this;
self.DealerId = ko.observable();
self.DealerName = ko.observable();
self.Gender = ko.observable();
self.Dealers = ko.observableArray(vm.Dealers());
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
self.DealerId(result.DealerId);
self.DealerName(result.DealerName);
self.IsActive = ko.observable(result.IsActive);
$('#basic').modal('show');
}
});
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:#4d90fe;padding-top:10px;padding-bottom:10px">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" style="color:white">Update Dealer Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Dealer Name</label>
<div class="col-md-9">
<input class="form-control" data-bind="value:DealerName" required="required"
data-parsley-required-message="Dealer name is required"></input>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Dealer Status</label>
<div class="col-md-9">
<label style="padding-left:0"><input type="radio" name="status" value="true" data-bind="checked: IsActive">Active</label>
<label ><input type="radio" name="status" value="false" data-bind="checked: IsActive">Inactive</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="margin-top:0;padding-top:10px;padding-bottom:10px">
<button type="button" id="cancelSave" class="btn default" data-dismiss="modal" >Cancel</button>
<button type="button" id="save" class="btn blue">Save</button>
</div>
</div>
</div>
</div>
It seems, like you are initializing the property self.IsActive of your ko-viewmodel in ajax-success callback. That means, that your observable IsActive property will be created only when ajax is completed. But ajax call is asynchronous. So, if you are binding the viewmodel without the instantiated self.IsActive property you will got an error from ko. (check the browsers console). Its not a good way to make ajax-calls in viewmodel constructor.
Try to declare the property before the ajax like this:
var self = this;
self.DealerId = ko.observable();
self.DealerName = ko.observable();
self.Gender = ko.observable();
self.Dealers = ko.observableArray(vm.Dealers());
self.IsActive = ko.observable(false);
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
self.DealerId(result.DealerId);
self.DealerName(result.DealerName);
self.IsActive(result.IsActive);
$('#basic').modal('show');
}
});
In this case your radio will have default checked-value (be inactive), until the ajax completes. Right after ajax completes it will become the correct value. The best way to avoid this temporally data-inconsistence, is to load all the data before the viewmodel is created and pass all ajax-data as constructor argument. This approach grants, that ko-viewmodel will have actual data in the moment of binding. (something like this:
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
//create your viewmodel inside the ajax-succcess and
//populate it with data
var myViewModel = new MyViewModel(result);
//and apply ko-binding here, after creating the viemodel
$('#basic').modal('show');
}
});
function MyViewModel(ajaxData){
var self = this;
self.DealerId = ko.observable(ajaxData.DealerId);
self.DealerName = ko.observable(ajaxData.DealerId);
self.Gender = ko.observable(ajaxData.DealerName);
self.IsActive = ko.observable(ajaxData.IsActive);
self.Dealers = ko.observableArray(vm.Dealers());
}
You need to assign equal name to both your <input type="radio"> to let the browser understand that they are related.
Related
I am trying to save a ViewModel object from a partial view in a modal, and I get a 404 error when I try to post it. The url is being called, but the ViewModel data isn't being sent. I have been reading similar questions on here and on MSN for hours and nothing I've tried fixes the problem. I took out the repetitive days of the week code for brevity, but I can
add them back in if anyone wants a complete working example. Here is the code
EmployeeViewModel
public class EmployeeViewModel
{
public bool Monday { get; set; } = false;
//...bool properties for Tuesday through Sunday
public Employee Employee { get; set; }
}
Employee/ _AddEmployeeModalPartial
#model JSarad_C868_Capstone.ViewModels.EmployeeViewModel
#Html.AntiForgeryToken()
<div class="modal modal-fade" id="addEmployee">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addEmpoyeeLabel">Add Employee</h4>
<button type=button class="close" data-bs-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Add">
<div class="form-group">
<input asp-for="Employee.Id" class="form-control" />
<input asp-for="Employee.Availability" class="form-control" />
<label asp-for="Employee.Role"></label>
<select asp-for="Employee.Role" class="form-control">
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
</select>
<span asp-validation-for="Employee.Role" class="text-danger"></span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Name"></label>
<input asp-for="Employee.Name" class="form-control" />
<span asp-validation-for="Employee.Name" class="text-danger"></span>
</div>
#* <div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Phone"></label>
<input asp-for="Employee.Phone" class="form-control" />
<span asp-validation-for="Employee.Phone" class="text-danger">
</span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Email"></label>
<input asp-for="Employee.Email" class="form-control" />
<span asp-validation-for="Employee.Email" class="text-danger">
</span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Address"></label>
<input asp-for="Employee.Address" class="form-control" />
<span asp-validation-for="Employee.Address" class="text-danger">
</span>
</div>
#* <div class="mb-3">*#
<div class="form-group">
<label>Availabiliy</label>
</div>
<div class="row pb-4">
<div class="col">
<div class="form-check">
<input asp-for="Monday" class="form-check-input"
type="checkbox" />
<label asp-for="Monday" class="form-check-label"></label>
</div>
<!--...//form check boxes for Tuesday trough Sunday -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
data-bs-save="modal">Save</button>
</div>
</div>
</div>
</div>
EmployeeController.cs
[HttpGet]
public IActionResult Add()
{
EmployeeViewModel viewModel = new EmployeeViewModel();
return PartialView("_AddEmployeeModalPartial", viewModel); ;
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Add(EmployeeViewModel viewModel) //code never reaches this Action
{
viewModel.Employee.Availability = ConvertDaysToChar(viewModel.Employee.Availability)
if (ModelState.IsValid)
{
_db.Employees.Add(viewModel.Employee);
_db.SaveChanges();
return RedirectToAction("Index");
}
else
{
return PartialView("_AddEmployeeModelPartial", viewModel);
}
}
site.js
$(function () {
var PlaceHolderElement = $('#PlaceHolderHere');
$('button[data-bs-toggle="ajax-modal"]').click(function (event) {
/* event.preventDefault();*/
var url = $(this).data('url');
console.log(url)
$.get(url).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-bs-save="modal"]', function (event) {
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
console.log(actionUrl);
var sendViewModel = form.serialize();
console.log(sendViewModel);
//$.post(actionUrl, sendViewModel).done(function (data) {
// PlaceHolderElement.find('.modal').modal('hide');
/*above is the code from a tutorial for modals. It also doesn't send the object to
post action*/
$.ajax({
type: 'POST',
url: actionUrl,
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(sendViewModel),
success: function (result) {
console.log('Data received: ');
console.log(result);
}
})
})
})
When I click the save button on the model, the console.log(sendViewModel) returns the correct Serialization with all of the properties and their correct names. And the properties change correctly when there is input.
Employee.Id=&Employee.Availability=&Employee.Role=Bartender&Employee.Name=&Employee.Phone=&Employee.Email=&Employee.Address=&Monday=false&Tuesday=false&Wednesday=false&Thursday=false&Friday=false&Saturday=false&Sunday=false
But I get an error "Failed to load resource: the server responded with a status of 404 ()"
and when I check it the page says "No webpage was found for the web address: https://localhost:44313/Add HTTP ERROR 404" as if it's trying to get a post. It is also missing the controller, but if I change my form action to "Employee/Add" in the _Partial view it still doesn't send the data along with the url, which is causing an entirely different problem. I would greatly appreciate any help or guess or input of any kind. I'm about five seconds away from throwing my laptop out the window on this one. Thanks.
1.Remove the #Html.AntiForgeryToken() inside your form,like below:
<form action="Add" >
#Html.AntiForgeryToken()
....
Then after you serialize the form you can get the AntiForgeryToken, like below:
Because when you don't add #Html.AntiForgeryToken()inside form, after you serialize the form you don't get the AntiForgeryToken, like below:
Besides, if you use <form asp-action="Add" > In ASP.Net Core anti forgery token is automatically added to forms, so you don't need to add #Html.AntiForgeryToken(),you can find in the below :
2.change your ajax like below:
$.ajax({
type: 'POST',
url:'/Employee/Add',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: sendViewModel,
success: function (result) {
console.log('Data received: ');
console.log(result);
}
})
result:
First, I had to change the form action from "Add" to "Employee/Add". ThenI had to remove the antiforgery token from my post action. The first code that is commented out actually works fine otherwise. In my defense I did remove the antiforgery token when I had the wrong URL, but I forgot to retest that when I had the correct one.
I use the alpine.js to render a modal with a x-for loop who populate a select. Strange behavior, the x-for seems looping 2 times and I can't understand why:
the code:
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('load', () => ({
indicateurs: [],
indicateurDictionnaireForm: {},
typeIndicateurs: {},
detectedTypeIndicateur: '',
loadIndicateur() {
$('#overlay').fadeIn();
fetch('<%= request.getContextPath() %>/mesures.load.action')
.then(response => response.json())
.then(data => {
this.indicateurs = data;
$('#overlay').fadeOut();
})
.catch(error => {
});
},
deleteIndicateur(id) {
$.ajax({
type: "DELETE",
url: "<%= request.getContextPath() %>/mesures.delete.action?indicateurDictionnaireId=" + id,
}).then(() => this.loadIndicateur());
},
postForm() {
return {
submitData() {
$.ajax({
type: "POST",
url: "<%= request.getContextPath() %>/mesures.save.action",
data: JSON.stringify(this.indicateurDictionnaireForm),
dataType: "JSON",
contentType: "application/json; charset=utf-8",
}).then(() => {
this.loadIndicateur();
this.resetForm();
$('#modalIndicateur').modal('hide');
})
},
}
},
editIndicateur(id) {
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.load.type-indicateur.action"
}).then(data => {
this.typeIndicateurs = data;
}).then(
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.edit.action?indicateurDictionnaireId=" + id,
}).then(data => {
this.indicateurDictionnaireForm = data;
this.detectedTypeIndicateur = data.typeIndicateur.code;
this.loadIndicateur();
$('#modalIndicateur').modal('show');
})
);
},
resetForm() {
this.indicateurDictionnaireForm = {};
}
}))
})
</script>
the modal code:
<div class="modal" tabindex="-1" role="dialog" id="modalIndicateur">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><s:text name="indicateur.ce.add"/></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<%= request.getContextPath() %>/save.action"
method="POST"
class="w-64 mx-auto" x-data="postForm()" #submit.prevent="submitData">
<div class="form-group" style="padding-left: 15px; padding-bottom: 5px">
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="libelle_fr">
<s:text name="indicateur.ce.libelle_fr"/></label>
<div class="col-md-8">
<input id="libelle_fr" type="text"
name="indicateurDictionnaireForm.libelleFr"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.libelleFr">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="libelle_nl">
<s:text
name="indicateur.ce.libelle_nl"/></label>
<div class="col-md-8">
<input id="libelle_nl" type="text"
name="indicateurDictionnaireForm.libelleNl"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.libelleNl">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="code">
<s:text name="indicateur.ce.code"/></label>
<div class="col-md-8">
<input id="code" type="text"
name="indicateurDictionnaireForm.typeIndicateurCode"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.code">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="code">
<s:text name="indicateur.ce.code"/></label>
<div class="col-md-4">
<div class="flex flex-col w-full md:w-2/3">
<select x-model="indicateurDictionnaireForm.typeIndicateurCode"
class="form-control input-sm">
<template x-for="option in typeIndicateurs" x-effect="console.log(detectedTypeIndicateur)">
<option :key="option.code"
:value="option.code"
selected="option.code === detectedTypeIndicateur"
x-effect="console.log('code:', option.code, ' type: ', detectedTypeIndicateur)"
x-text="option.libellefr"></option>
</template>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
#click="resetForm()">
<s:text name="common.button.quitter"/>
</button>
<button type="submit" class="btn btn-primary">
<s:text name="common.button.save"/>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
With the x-effect tag, I tried to log the value of the the detected item to be selected in the select tag and the value itself.
this is the console output when the modal is open:
// first loop
<empty string>
code: RESULTAT type: <empty string>
code: INCIDENCE type: <empty string>
code: REALISATION type: <empty string>
// second loop
REALISATION
code: RESULTAT type: REALISATION
code: INCIDENCE type: REALISATION
code: REALISATION type: REALISATION
In the first loop I see the value from my function editIndicateur() is empty so I assume, alpine.s tries to render the modal before the call back and then do a second loop.
Have you an idea why the modal is populate before the value is return by the function and also why it loops a second time?
Thanks for your help
You bind the select element to the indicateurDictionnaireForm.typeIndicateurCode variable and its options to the typeIndicateurs variable (via loopig over it).
So when you call the editIndicateur method:
First you load only the select options via AJAX call and pass it to Alpine.js by this.typeIndicateurs = data.
Alpine detects that you changed typeIndicateurs and renders the template. This is the first loop. However neither indicateurDictionnaireForm or detectedTypeIndicateur have been set at this point, therefore these will be empty.
After that you make a new AJAX call, where you load additional form data and set indicateurDictionnaireForm and detectedTypeIndicateur variables.
Alpine.js detects that you changed two additional variables and renders the template again. This is the second loop.
This is normal behavior if you have two separate AJAX calls because the changes wont be in the same update queue. To fix this issue, you should create a local (non-reactive) variable inside editIndicateur function, then store the options's array in this variable at the first AJAX call. Then at the second AJAX call you set all 3 Alpine.js reactive variables together, therefore the changes will be in the same update queue, so Alpine.js renders the template only once.
editIndicateur(id) {
let indicators;
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.load.type-indicateur.action"
}).then(data => {
indicators = data;
}).then(
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.edit.action?indicateurDictionnaireId=" + id,
}).then(data => {
this.indicateurDictionnaireForm = data;
this.detectedTypeIndicateur = data.typeIndicateur.code;
this.typeIndicateurs = indicators;
this.loadIndicateur();
$('#modalIndicateur').modal('show');
})
);
},
I create one form which includes select2 control.and i have data in database.
Now I want to fetch value of particular data value into select2 control when edit the form. My selected select value is store in one variable Now i want that value dispaly in select2 control inside the edit form and i dont know how ..
here is my edit form code:
<div id="editm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Rayon</h4>
</div>
<div class="modal-body">
<form id="validate1" method="POST">
<div class="form-group">
<label class="control-label">Kode Rayon</label>
<div>
<input type="text" class="form-control" id="edit_Kode_rayon" name="edit_Kode_rayon" placeholder="Kode Rayon" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Rayon</label>
<div>
<input type="text" class="form-control" id="edit_nama_rayon" name="edit_nama_rayon" placeholder="Nama Center" >
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Region</label>
<div>
<!-- HERE IS THE SELECT2 THAT IM TALKING ABOUT.. -->
<select class="form-control kode_region" id="nRegionE" name="kode_region" style="width: 100%;">
<option value=""></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
here is jquery code for edit button:
$(document).on("click", "#edit", function(e){
e.preventDefault();
var editid = $(this).attr("value");
$.ajax({
url: "<?php echo base_url();?>Rayon/editdata",
type: "POST",
dataType: "json",
data:{editid: editid},
success: function(data){
if(data.responce == "success"){
$('#editm').modal('show');
$("#edit_Kode_rayon").val(data.posts.kode_rayon);
$("#edit_nama_rayon").val(data.posts.nama_rayon);
//$("#nRegionE").val(data.posts.kode_region);<-- I TRIED LIKE THIS .. NOT WORK -->
//$("#nRegionE").select2().select2('val',data.posts.kode_region);<-- I TRIED LIKE THIS . NOT WORK-->
$('#nRegionE').val(data.posts.kode_region).trigger("change");<-- EVEN THIS ONE IS NOT WORK -->
}else{
toastr["error"](data.message);}
}
});
});
and here is my Select2 script that im using it for inssert and my edit form:
$(function () {$('.kode_region').select2({
//placeholder: "Please select region",allowClear: true,
ajax: {
dataType: 'json',
url: '<?=site_url('Bonus/nregion')?>',
type: "post",
delay: 250,
data: function(params) {
return {search: params.term}},
processResults: function (data, page) {
return {results: data};
},
}
})});
just to make it clear i took a screenshot of my edit form:
all what i want is to fetch the value of data into select2 form control of Edit Form .. can anyone help me to do that ? n i'll be so thankful.
You are fetching options list correctly in data.posts.kode_region,
then update this line
$("#nRegionE").val(data.posts.kode_region);
to this
$("#nRegionE").html('<option value = "'+data.posts.kode_region+'" selected >'+data.posts.kode_region+'</option>');
and don't forget to comment this line
$('#nRegionE').val(data.posts.kode_region).trigger("change");
I am dam sure this will work for you
$("select#nRegionE option").val("hello"); //Change hello string to your record Id
$("select#nRegionE option").html(data.posts.kode_region);
I want to make jquery plugin to process form submit before ajax.
This is my jquery script
;(function($,window,document,undefined){
"use strict";
$.modalLoad = function(element, options){
var plugin = this;
var $element = $(element),
element = element,
url = $element.attr('href'),
target = $element.data('target');
var defaults = {
form: $(this).serializeArray(),
};
plugin.init = function(context){
plugin.settings = $.extend({},defaults, options);
plugin.add_bindings();
plugin.create_ajax(context);
}
plugin.create_ajax = function(context){
$('form',context).addClass('modal-form');
$('.modal-form',context).on('submit',function(e){
e.preventDefault();
plugin.post_data($(this),context);
});
}
plugin.post_data = function(form,context){
var loaded = false;
var throbbed = false;
var _fd = new FormData();
var password = hex_sha512($('input[type="password"]',context).val());
_fd.append('password',password);
function checkComplete(){
if(loaded && throbbed){
$('.ajax-loader').remove();
}
}
function requestComplete(){
loaded = true;
checkComplete();
}
$.ajax({
url:form.attr('action'),
type: form.attr('method'),
data: _fd,
contentType: false,
cache: false,
processData: false,
success: function(data){
requestComplete();
console.log(data);
},
beforeSend: function(){
var loading = "<img src='images/loader.gif' class='ajax-loader'>";
$('.modal-footer',context).append(loading);
$('.ajax-loader').css({
height: '15px',
'vertical-align': 'middle',
margin: '0px 5px'
});
setTimeout(function(){
throbbed = true;
checkComplete();
},2000);
},
complete: requestComplete()
});
console.log(plugin.settings.form);
}
plugin.init();
}
$.fn.modalLoad = function(options){
return this.each(function(){
if(undefined == $(this).data('modalLoad')){
var plugin = new $.modalLoad(this, options);
$(this).data('modalLoad', plugin);
}
});
}
})(jQuery);
HTML
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<form action="<?php echo 'http://'.base_url('authentication.php');?>" method="POST">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Login</h4>
</div>
<div class="modal-body">
<div class="modal-space">
<label class="email">
<input type="text" name="email" value="" placeholder="Email*" data-constraints="#Required #Email" id="regula-generated-387495">
</label>
</div>
<div class="modal-space">
<label class="password">
<input type="password" name="password" value="" placeholder="Password*" data-constraints="#Required #Email" id="regula-generated-387495">
</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary btn-1 btn-1__mod-1" value="LOGIN">
</div>
</form>
</div>
</div>
</div>
Now, i want to encrypt password field with sha512 before it send with ajax which follow this instruction.
Actually, i serialize form data to array and i want to override password array that sets in defaults.form objects.
But even i can't fetch data from defaults.form where form data should be stored in.
Is possible if i print defaults.form in console.log? Could everyone tell me which part that i must fix? Also please tell me how to tidy up my code?
Thanks for advance
make sure in your html code, all input inside tag form. Otherwise you will get missing value from form data serialize in defaults.form. Can you show your html code here?
I have a set checkboxes:
<div class="panel panel-default" style="margin-right:10px;">
<div class="panel-heading">
<span class="glyphicon glyphicon-cog"> Configurações Abreviar</span>
</div>
<div class="panel-body">
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Nome</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaNome" id="AbreviaNome">
<input type="checkbox" data-bind="checked: AbreviaFantasia" id="AbreviaFantasia">
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Endereço</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaLogradouro" id="AbreviaLogradouro">
<input type="checkbox" data-bind="checked: AbreviaComplemento" name="type" id="AbreviaComplemento">
<input type="checkbox" data-bind="checked: AbreviaBairro" id="AbreviaBairro">
<input type="checkbox" data-bind="checked: AbreviaCidade" id="AbreviaCidade">
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Extra</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaExtra" id="AbreviaExtra">
</div>
</div>
</div>
</div>
And the following ViewModel:
function JobDetailsViewModel() {
var self = this;
var baseUri = '/Api/Pedidos/';
self.AbreviaNome = ko.observable(false);
self.AbreviaFantasia = ko.observable(false);
self.AbreviaLogradouro = ko.observable(false);
self.AbreviaComplemento = ko.observable(false);
self.AbreviaBairro = ko.observable(false);
self.AbreviaCidade = ko.observable(true);
self.AbreviaExtra = ko.observable(true);
var updatableData = {
AbreviaNome: self.AbreviaNome,
AbreviaFantasia: self.AbreviaFantasia,
AbreviaLogradouro: self.AbreviaLogradouro,
AbreviaComplemento: self.AbreviaComplemento,
AbreviaBairro: self.AbreviaBairro,
AbreviaCidade: self.AbreviaCidade,
AbreviaExtra: self.AbreviaExtra
};
self.update = function (formElement) {
alert('BOOM');
$.ajax({
type: "PUT",
url: baseUri,
data: ko.toJSON(updatableData),
dataType: "json",
contentType: "application/json"
})
.done(function (data) {
})
.error(function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
alert("fail");
});
};
}
$(document).ready(function () {
var viewModel = new JobDetailsViewModel();
ko.applyBindings(viewModel);
viewModel.AbreviaNome.subscribe(function (newValue) {
alert(newValue);
viewModel.update();
});
});
It seem that it works just fine, the subscription works, the value is being updated, and the PUT resquest is being sent, and no console errors.
But the checkbox UI does not change its state to reflect the Model when I click it. Any checkbox I add within the panel does not work, they have the same behavior, even when they are not bound to the view model.
<input type="checkbox" name="type">
What is wrong with my code, should I be doing an array or something like that, why cant I just use simple properties and bind them where I want?
I have fiddle with the formatted code: JSFIDDLE
This has nothing to do with Knockout. It's caused by Bootstrap. When you include data-toggle="buttons", Bootstrap intercepts the click event to update the Bootstrap buttons. But you don't actually have any buttons, which causes the event to just be cancelled.
The easiest fix is to just remove data-toggle="buttons" as I've done to the last checkbox in your example: http://jsfiddle.net/mbest/RK96d/2/
Reference: http://getbootstrap.com/javascript/#buttons
According to all the HTML specs, the name and value attributes for checkboxes are required. It's possible that some browsers act strangely when they aren't supplied.