knockout.js - Can't use knockout in Remote Twiitter Bootstrap Modal -
i using twitter bootstrap, mvc, , knockout. have modal opening remote url points page deals uploads.
i'm doing so:
<a class="btn btn-mini" data-toggle="modal" data-bind="attr: { href: modalhref }" data-target="#uploadmodal" >uploads</a> <div id="uploadmodal" class="modal hide" style="display: none; " aria-hidden="true"> <div class="modal-header"> <button data-dismiss="modal" class="close" type="button">×</button> <h3>upload</h3> </div> <div class="modal-body form-horizontal" style="padding:0;"> </div> <div class="modal-footer"> <a data-dismiss="modal" class="btn" href="#" data-bind="click: savecount">save</a> </div> </div> the modal loads fine , inside of works great. have fileuploader control user post file me, process it, , i'm returning column headers process them. here ajax function on form:
function uploadsubmit() { $.ajax({ url: '/upload/usersavefileinfo/', type: 'post', async: false, data: ko.tojson({ uploadname: $("#uploadname").val(), uploaddescription: $("#uploaddescription").val(), id: $('#uploadid').val() }), contenttype: 'application/json', success: function (result) { $("#uploader").hide(); for( var = 0; < result.length; i++) { viewmodel.retrows.push({ id: ko.observable(result[i].id), header: ko.observable(result[i].header), matchedto: ko.observable(result[i].matchedto), values: ko.observable(result[i].values), columnnumber: ko.observable(result[i].columnnumber) }); } $("#matcher").show(); }, error: function (jqxhr, textstatus, errorthrown) { console.log(data); alert(textstatus); } }); }
this works, inside remotely loaded modal have code i'm trying render series of textboxes/spans returned data doesn't work. i've tried @ other ko variables inside modal , don't show up, seems modal has no idea knockout exists or knockout has no access modal content... there way make remote modal , ko sync up?
<!-- ko foreach: retrows --> <div class="control-group"> <label class="control-label"> column <span data-bind="text: $data.columnnumber"></span> </label> <div class="controls"> <input data-bind="value: $data.matchedto" /> <span class="help-block" data-bind="text: $data.value"></span> </div> </div> <!-- /ko --> i put in parent page , showed up. seems problem remotely loaded content in modal specifically. ideas on how fix this? perhaps there way can attach remote content via bindinghandler? insight can provide.
you need apply bindings modal.
ko.applybindings(viewmodel, document.getelementbyid("remote_modal"));
Comments
Post a Comment