Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > > >
Восстановить пароль Регистрация
 
Rommek
Новичок
0 / 0 / 0
Регистрация: 07.07.2013
Сообщений: 7
10.10.2013, 17:13     cannot call methods on dialog prior to initialization; attempted to call method 'close'
  #1
Добрый день!
Я пытаюсь перенести вот этот пример в ASP MVC4 проект: http://jsfiddle.net/rniemeyer/WpnTU/
Поставил те же библиотеки jquery, которые используются в JSFIDDLE, но dialog так и не открывается. Консоль показывает ошибку: cannot call methods on dialog prior to initialization; attempted to call method 'close'.
Помогите плз. решить проблему, код в проекте выглядит вот так:

Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@section scripts
{
    <script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="~/Scripts/knockout-2.3.0.js" type="text/javascript"></script>
 
    
    <script type="text/javascript">
        
        //custom binding to initialize a jQuery UI dialog
        $(document).ready(function () {
            ko.bindingHandlers.jqDialog = {
                init: function (element, valueAccessor) {
                    var options = ko.utils.unwrapObservable(valueAccessor()) || {};
 
                    //handle disposal
                    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                        $(element).dialog("destroy");
                    });
 
                    //dialog is moved to the bottom of the page by jQuery UI. Prevent initial pass of ko.applyBindings from hitting it
                    setTimeout(function () {
                        $(element).dialog(options);
                    }, 0);
                }
            };
 
            //custom binding handler that opens/closes the dialog
            ko.bindingHandlers.openDialog = {
                update: function(element, valueAccessor) {
                    var value = ko.utils.unwrapObservable(valueAccessor());
                    if (value) {
                        $(element).dialog("open");
                    } else {
                        $(element).dialog("close");
                    }
                }
            };
 
            //custom binding to initialize a jQuery UI button
            ko.bindingHandlers.jqButton = {
                init: function (element, valueAccessor) {
                    var options = ko.utils.unwrapObservable(valueAccessor()) || {};
 
                    //handle disposal
                    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                        $(element).button("destroy");
                    });
 
                    $(element).button(options);
                }
            };
 
            var Product = function(id, name, isNew) {
                this.id = ko.observable(id);
                this.name = ko.observable(name);
                this.isNew = isNew;
                this.editId = ko.observable(id);
                this.editName = ko.observable(name);
 
                //persist edits to real values on accept
                this.accept = function() {
                    this.id(this.editId()).name(this.editName());
                }.bind(this);
 
                //reset to originals on cancel
                this.cancel = function() {
                    this.editId(this.id()).editName(this.name());
                }.bind(this);
            };
 
            var ViewModel = function () {
                var self = this;
                this.productList = ko.observableArray([
                    new Product(1, "one"),
                    new Product(2, "two"),
                    new Product(3, "three"),
                    new Product(4, "four")
                ]);
 
                this.selectedProduct = ko.observable();
                this.editProduct = function (productToEdit) {
                    self.selectedProduct(productToEdit);
                };
                this.addProduct = function () {
                    self.selectedProduct(new Product(0, "", true));
                },
                this.removeProduct = function (product) {
                    self.productList.remove(product);
                },
                this.accept = function () {
                    var selected = self.selectedProduct();
                    selected.accept();
 
                    if (selected.isNew) {
                        self.productList.push(new Product(selected.id(), selected.name()));
                    }
 
                    self.selectedProduct("");
                },
                this.cancel = function () {
                    self.selectedProduct().cancel();
                    self.selectedProduct("");
                };
            };
 
            ko.applyBindings(new ViewModel());
        })
    </script>
        }
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th></th>
        <th></th>
    </tr>
    <tbody data-bind="foreach: productList">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td> 
            <td>
                <button data-bind="click: $root.editProduct">Edit</button>
            </td>
            <td>
                <button data-bind="click: $root.removeProduct">Delete</button>
            </td>
        </tr>    
    </tbody>
</table>
 
<button data-bind="click: addProduct">Add Product</button>
 
 
<hr />
 
<div id="details" data-bind="jqDialog: { autoOpen: false, resizable: false, modal: true }, 
    template: { name: 'editTmpl', data: selectedProduct, if: selectedProduct }, openDialog: selectedProduct"> 
</div>
 
<script id="editTmpl" type="text/html">
    <p>
        <label>ID: </label>
        <input data-bind="value: editId"  />
    </p>
    <p>
        <label>Name: </label>
        <input data-bind="value: editName"  />
    </p>        
    <button data-bind="jqButton: {}, click: $root.accept">Accept</button>
    <button data-bind="jqButton: {}, click: $root.cancel">Cancel</button>
</script>
AdAgent
Объявления
10.10.2013, 17:13
Donald28
странник
728 / 410 / 17
Регистрация: 28.05.2012
Сообщений: 1,305
Записей в блоге: 2
10.10.2013, 21:19
  #2
вот вы подключаете библиотеку, например эту:
Код HTML5
1
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
почему знак "~", впереди?

Мой диагноз следующий: библиотеки не подключены, т.к. браузер не нашел их по указанному пути.

Добавлено через 1 минуту
P.S. А вот это что за конструкция:
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<script id="editTmpl" type="text/html">
    <p>
        <label>ID: </label>
        <input data-bind="value: editId"  />
    </p>
    <p>
        <label>Name: </label>
        <input data-bind="value: editName"  />
    </p>        
    <button data-bind="jqButton: {}, click: $root.accept">Accept</button>
    <button data-bind="jqButton: {}, click: $root.cancel">Cancel</button>
</script>
где это такое видано, что внутри тэгов script используются HTML теги?
Rommek
Новичок
0 / 0 / 0
Регистрация: 07.07.2013
Сообщений: 7
10.10.2013, 22:37  [ТС]     cannot call methods on dialog prior to initialization; attempted to call method 'close'
  #3
Donald28, спасибо за ответ!
Библиотеки подключены, в .net asp mvc4 проектах такой синтаксис норм работает + я проверял через FireBug, все ок, ошибок нет. На данный момент ошибку о которой я писал в первом посте поборол путем подключения других библиотек: jquery-1.7.1.js и jquery ui-1.8.18.js.
Все работает, осталось решить такую проблему: $(element).dialog("open") не открывает новое окно, информация отображается ниже на той же странице.
Что я еще пропустил, кто сможет подсказать?
Yandex
Объявления
10.10.2013, 22:37
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему
Опции темы

Текущее время: 14:05. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.