Форум программистов и сисадминов CyberForum.ru
Вернуться   Форум программистов и сисадминов CyberForum.ru > Форум Форум web-программистов > Форум JavaScript > Форум jQuery
Восстановить пароль Регистрация

Ответ Создать новую тему
 
Старый 10.10.2013, 17:13   #1
Rommek
Новичок
 
Регистрация: 07.07.2013
Сообщений: 7
Репутация: 0 (0)
cannot call methods on dialog prior to initialization; attempted to call method 'close' / jQuery

Добрый день!
Я пытаюсь перенести вот этот пример в 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>
Старый 10.10.2013, 21:19   #2
Donald28
странник
 
Аватар для Donald28
 
Регистрация: 28.05.2012
Сообщений: 1,222
Репутация: 697 (379)
Лучшие ответы: 7
вот вы подключаете библиотеку, например эту:
Код 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 теги?
Другие темы раздела Форум программистов JavaScript. Обсуждение JavaScript-фреймворка jQuery.
Не работает анимацтя jQuery
Пишу уже 4 раз, все предыдущие проблемы были решены, и вот осталась последняя. Никак не могу понять, как расположить блоки с контентом. Они скрыты под меню внизу экрана, при нажатии на одну кнопку появляется один блок(анимация поднимает их вместе вверх), если они в верхнем положении и нажать на...
jQuery Скрыть блок
Ребят подскажите, я что то разобраться не могу. Есть html код <ul> <li>текст и кнопка 1</li> <li>текст и кнопка 2 <a href="#" id="44" class="del">удалить</a></li> </ul> При клике по кнопке нужно скрыть все что находится между li который обрамляет именно эту кнопку Сейчас код выглядит так
Старый 10.10.2013, 22:37  [ТС]   #3
Rommek
Новичок
 
Регистрация: 07.07.2013
Сообщений: 7
Репутация: 0 (0)
Donald28, спасибо за ответ!
Библиотеки подключены, в .net asp mvc4 проектах такой синтаксис норм работает + я проверял через FireBug, все ок, ошибок нет. На данный момент ошибку о которой я писал в первом посте поборол путем подключения других библиотек: jquery-1.7.1.js и jquery ui-1.8.18.js.
Все работает, осталось решить такую проблему: $(element).dialog("open") не открывает новое окно, информация отображается ниже на той же странице.
Что я еще пропустил, кто сможет подсказать?
Старый 10.10.2013, 22:37
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Автор
Delphi для начинающих This form of method call only allowed for class methods :(
Ошибка в строчке TIdHTTP.Get('http://advance-rp.ru/captcha.php', FS); и в CaptchaID := RecognizeAG('captcha.png', Edit4, s); procedure TForm1.Button6Click(Sender: TObject); var FS:TFileStream; CaptchaID: Integer; begin png:=TPngObject.Create; ...
Dosyk
PHP для начинающих Fatal error: Call to undefined method DataBase
Всем доброй ночи,помогите найти ошибку Fatal error: Call to undefined method DataBase::existstID() in Z:\home\test.local\www\lib\database_class.php on line 129 <?php require_once "config_class.php"; require_once "checkvalid_class.php"; class DataBase {
maruo
Delphi для начинающих [Error]: This form of method call only allowed for class methods end
Не могу разобраться с применением методов класса не знаю как это все правильно описать, подскажите пожалуйста! unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls; type TForm1 = class(TForm)
den_vrn
Delphi для начинающих This form of method call only allowed for class methods
Здравствуйте, делаю в Delphi 7 чат (пока сервер) на ServerSocket1 в блокирующем режиме. Делаю не с нуля, а собирая по частям из различных программ(так как сам не разбираюсь). Необходимо по нажатию кнопки, сделать рассылку сообщения из мемо всем клиентам. Основа сервера из этой статьи. Программа...
Reistl
Delphi для начинающих E2076 This form of method call only allowed for class methods
Доброго всем времени. Прошу Вашей помощи в сложившейся ситуации и прошу сильно не критиковать, я только разбираюсь с классами. Есть класс в в отдельном Unit-е: TMDIForm = class(TForm) private MDIToolBarPopupMenu: TAdvPopupMenu; MDIPanel:TAdvDockPanel; ...
vasabi
Опции темы

Текущее время: 20:36. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.