Remove From My Forums

How to create a Knockout Popup?

Question
0

Sign in to vote

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

0

Sign in to vote

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
0

Sign in to vote

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

Answered by:

How to create a Knockout Popup?

Question

Answers

All replies