Реакция на нажатие кнопки knockout.js

@Vengr · Регистрация: 10.05.2009

Студворк — интернет-сервис помощи студентам

Привет, вот мой код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(
    function () 
    {
        var addCandidateViewModel =
        {
            firstName: ko.observable("Dan"),
            middleName: ko.observable(""),
            lastName: ko.observable("Gall"),
            dateOfBirth: ko.observable()
        };
        addNewCandidate: function () 
        {
            addCandidateViewModel.firstName("Mike");
        }
 
        ko.applyBindings(addCandidateViewModel);
    }
);

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="CommonInformation">
    <h4>Common information</h4>
    
    <p>
        First name:<input data-bind="value:firstName, valueUpdate:'afterkeydown'" />
    </p>
    <p>
        Middle name: <input data-bind="value:middleName, valueUpdate:'afterkeydown'" />
    </p>
    <p>
        Last name: <input data-bind="value:lastName, valueUpdate:'afterkeydown'" />
    </p>
 </div>
 
<button id="addCandidate" data-bind="click: addNewCandidate" >Add profile</button>

С JS дело раньше не имел. Задача в том, что бы заставить отослать модель в виде джейсона на сервер.
Но пока я не могу заставить код реагировать на нажатие кнопки - функция addCandidateViewModel. Что я делаю не так. Дайте совет плз.

@Soldado · 01.08.2012, 14:58

Раз уж Вы выбрали тему jQuery, хочу предложить решение вашей задачи с помощью jquery-ajax. PHP - скрипт возвращает данные на страницу отправки, для контроля. Добавьте в него запись в БД.
Вот, если желаете:

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Json отправка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
 $(document).ready(function(){
$('#addCandidate').click (function(){
     var fN = $('#fN').val();
     var mN = $('#mN').val();
     var lN = $('#lN').val();
        $.post(
               'otpravka.php',
                {fN:fN,mN:mN,lN:lN},
             function (data){
                     $('#info').text("Name candidate : "+data.q1+"  "+data.q2+" "+data.q3);},
                  "json"
                 );
                }); 
 
});/*End  ready */
   
   
   </script>
</head>
 
<body >
 
<div id="CommonInformation">
    <h4>Common information</h4>
    
    <p>
        First name:<input type="text" name="fN"  id="fN" />
    </p>
    <p>
        Middle name:<input type="text" name="mN" id="mN"  /> 
    </p>
    <p>
        Last name: <input type="text" name="lN" id="lN"  />
    </p>
 </div>
 
<button id="addCandidate"  >Add profile</button>
<div id="info"></div>
 
</body>
</html>

Файл php-обработчика otpravka.php:

PHP
1
2
3
4
5
<?php 
if(isset($_POST['fN'])){$res['q1']=$_POST['fN'];}
if(isset($_POST['mN'])){$res['q2']=$_POST['mN'];}
if(isset($_POST['lN'])){$res['q3']=$_POST['lN'];}
echo json_encode($res);?>

Как всё работает можно увидеть здесь

@Vengr · 01.08.2012, 16:20 **[ТС]**

Спасибо всем! Ответ нашел сам:

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
window.onload = function () 
{
        ko.applyBindings(addCandidateViewModel);
};
 
var addCandidateViewModel =
    {
            FirstName:      ko.observable(),
            MiddleName:     ko.observable(),
            LastName:       ko.observable(),
     };
 
function addNewCandidate() 
    {
     
    $.ajax
     ({
         url: "NewCandidate/AddData",
         contentType: "application/json; charset=utf-8",
         data: ko.toJSON(addCandidateViewModel),
         type: "POST",
         dataType: 'json'
        });
    }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <h4>Common information</h4>
    <table>
        <tr>
            <td>First name:</td>
            <td><input data-bind="value:FirstName, valueUpdate:'afterkeydown'" /></td>
        </tr>
        <tr>
            <td>Middle name:</td>
            <td><input data-bind="value:MiddleName, valueUpdate:'afterkeydown'" /></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td><input data-bind="value:LastName, valueUpdate:'afterkeydown'" /></td>
        </tr>
    </table>

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .