i'm having trouble proof of concept. i'm trying have jquery dialog come when button clicked. dialog contents bound viewmodel , dialog calls a json service retrieve data populate viewmodel.
running 2 problems code have here:
- the vmaccount viewmodel bind if div visible initial page load
- the vmaccount viewmodel undefined in either searchforcustomeraccounts or in displayresults despite being global var those
$(function() { var vmaccount = function() { var self = this; this.accounts = ko.observablearray(); this.name = ko.observable('jimmy'); }; function displaydialog() { $("#dialog").dialog({ resizable: false, height: 140, modal: true, buttons: { "search": function() { searchforcustomeraccounts(); }, cancel: function() { $(this).dialog("close"); } } }); } function searchforcustomeraccounts() { console.log("name: " + vmaccount.name); $.ajax({ url: "api/customersearchcontroller/" + vmaccount.name, type: "get", datatype: "json", success: function(data) { displayresults(data); } }); } function displayresults(data) { vmaccount.accounts.removeall(); (var = 0; < data.length; i++) { vmaccount.accounts.push(data[i]); } }; $("#butsearch").button().on("click", function() { displaydialog(); }); $(document).ready(function() { ko.applybindings(vmaccount); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <body> <button id="butsearch">open</button> <div id="dialog" style="visibility: visible"> <form id="account"> <p>customer name</p> <input type="text" data-bind="value: name" /> </form> </div> </body>i'm new javascript , knockout simple thats missing. appreciate guys can provide, thanks!
1) vmaccount function, try use instance.
2) value ko's observable, should call (unwrap value). use vmaccount.name() instead of vmaccount.name.
$(function() { function vmaccount () { var self = this; this.accounts = ko.observablearray(); this.name = ko.observable('jimmy'); }; var vmaccount = new vmaccount(); function displaydialog() { $("#dialog").dialog({ resizable: false, height: 140, modal: true, buttons: { "search": function() { searchforcustomeraccounts(); }, cancel: function() { $(this).dialog("close"); } } }); } function searchforcustomeraccounts() { console.log("name: " + vmaccount.name()); $.ajax({ url: "api/customersearchcontroller/" + vmaccount.name(), type: "get", datatype: "json", success: function(data) { displayresults(data); } }); } function displayresults(data) { vmaccount.accounts.removeall(); (var = 0; < data.length; i++) { vmaccount.accounts.push(data[i]); } }; $("#butsearch").button().on("click", function() { displaydialog(); }); $(document).ready(function() { ko.applybindings(vmaccount); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <body> <button id="butsearch">open</button> <div id="dialog" style="visibility: visible"> <form id="account"> <p>customer name</p> <input type="text" data-bind="value: name" /> </form> </div> </body>
Comments
Post a Comment