locked
How to create a Knockout Popup? RRS feed

  • Question

  • User-118859203 posted

    Hi guys,

    I am trying to work with fancy mvvm framework knockout js.

    I want to populate a popup 'by call' since I get by json feed.

    Anyone can help me? Thanks for your help!

    Monday, December 10, 2018 4:22 AM

Answers

  • User839733648 posted

    Hi kamalhussain,

    Since I'm not clear what your page is designed, I've made a simply demo to simulate your situation.

    You could check this to learn about how to load and save JSON data with knockout js.

    I suggest you might use the mapping plugin to read the data.

    Here is my sample code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="https://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
    </head>
    <body>
        <script type="text/html" id="tmpl">
            <div id="change-state">
                <p>id: <input data-bind="value: id" /></p>
                <p>name: <input data-bind="value: name" /></p>
                <p>age: <input data-bind="value: age" /></p>
            </div>
        </script>
    
        <div id="popup">
            <div data-bind="template: { name: 'tmpl' }"></div>
        </div>
        <button id="show">Show</button>
        <script>
            var json = {
                "id": 9,
                "name": "John",
                "age":"22"
            };
            var viewModel = {};
            function success() {
                viewModel = ko.mapping.fromJS(json);
                ko.applyBindings(viewModel);
            }
            success();
            $("#popup").dialog({
                autoOpen: false
            });
            $("#show").click(function () {
                $("#popup").dialog("open");
            });
        </script>
    </body>
    </html>

    result:

    https://ibb.co/TwtKTh1 

    If your json data is from url, you may make some changes to the code like below.

    var viewModel;
    $.getJSON("/some/url", function(data) { 
        viewModel = new ViewModel(data);
    })
    ko.applyBindings(viewModel);

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 2:23 PM

All replies

  • User839733648 posted

    Hi kamalhussain,

    You could refer to the following code to achieve a popup.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
        <script src="https://knockoutjs.com/downloads/knockout-3.4.2.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
    
    </head>
    <body>
        <a href="#" data-bind="click: $root.openDialog"> Open dialog </a>
        <div id="CancelModal" title="Cancel">
            Confirm to cancel?
            <div style="; bottom: 8px; right: 8px; text-align: right">
                <input type="button" value="Yes" data-bind="click: cancelConfirm" />
                <input type="button" value="No" data-bind="click: cancelDeny" />
            </div>
        </div>
        <script>
            $("#CancelModal").dialog({
                modal: true,
                autoOpen: false,
                width: 400,
                minHeight: 150,
                maxHeight: 150,
                position: "center",
                resizable: false
            });
            var DataViewModel = function () {
                var self = this;
                self.cancelConfirm = function () {
                    alert("confirm");
                };
                self.cancelDeny = function () {
                    alert("deny");
                };
    
                self.openDialog = function () {
                    $("#CancelModal").dialog("open");
                };
            };
            ko.applyBindings(new DataViewModel());
        </script>
    </body>
    </html>

    result:

    I want to populate a popup 'by call' since I get by json feed.

    But I'm confused with this description. What does "by call" mean? And how is your json feed from?

    Is it just a document or some response datas from somewhere? And what's the content you want to populate in the popup?

    Best Reagrds,

    Jenifer

    Tuesday, December 11, 2018 10:21 AM
  • User-474980206 posted

    generally popups are done with CSS and javascript framework like jQuery-ui (old), bootstrap, foundation, etc. knockout doesn't include any CSS support it only deals with the model, and binding.

    if you are starting fresh, I'd pick a more modern javascript framework than knockout.  either react (most popular) or vue (template based like knockout).

    Tuesday, December 11, 2018 4:22 PM
  • User-118859203 posted

    Hi Jenifer, I want to populate json data in popup. It is something like detail view.

    Wednesday, December 12, 2018 1:00 AM
  • User839733648 posted

    Hi kamalhussain,

    Since I'm not clear what your page is designed, I've made a simply demo to simulate your situation.

    You could check this to learn about how to load and save JSON data with knockout js.

    I suggest you might use the mapping plugin to read the data.

    Here is my sample code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="https://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
    </head>
    <body>
        <script type="text/html" id="tmpl">
            <div id="change-state">
                <p>id: <input data-bind="value: id" /></p>
                <p>name: <input data-bind="value: name" /></p>
                <p>age: <input data-bind="value: age" /></p>
            </div>
        </script>
    
        <div id="popup">
            <div data-bind="template: { name: 'tmpl' }"></div>
        </div>
        <button id="show">Show</button>
        <script>
            var json = {
                "id": 9,
                "name": "John",
                "age":"22"
            };
            var viewModel = {};
            function success() {
                viewModel = ko.mapping.fromJS(json);
                ko.applyBindings(viewModel);
            }
            success();
            $("#popup").dialog({
                autoOpen: false
            });
            $("#show").click(function () {
                $("#popup").dialog("open");
            });
        </script>
    </body>
    </html>

    result:

    https://ibb.co/TwtKTh1 

    If your json data is from url, you may make some changes to the code like below.

    var viewModel;
    $.getJSON("/some/url", function(data) { 
        viewModel = new ViewModel(data);
    })
    ko.applyBindings(viewModel);

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 2:23 PM