Ajax сохранить значение из текстового поля на сервер - PullRequest
Новая
       17

Ajax сохранить значение из текстового поля на сервер

0 голосов
/ 04 января 2012

Только что выяснил, что такое Ajax, и я хочу создать простую функцию Ajax / Jquery, которая принимает значение текстового поля и отправляет его на сервер одним нажатием кнопки. Кнопка представляет собой значок пользовательского интерфейса ск нему прикреплено событие hover, которое добавляется при нажатии клавиши .. Я пытался собрать его вместе, но консоль firebug читает синтаксическая ошибка .. Пожалуйста, помогите .. 

    $(function () {
        $('.solo1').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left; height:20px;" onclick="function save (value)"></span><br />')// ui icon
    .keypress(function() {
        $(this).next('.saveButton').show();//appends ui icon
    });
});


function save(value) {
    $.ajax({
        url: "/*ServerURL*/",
        type: "POST",
        data: '{ $("#craven1") : "' + value + '" }',
        data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
        },
    });
}
</script> 

<div id="featherbone">
<input class="solo1" id="craven1"/>
<input class="solo1" id="craven2"/>
<input class="solo1" id="craven3"/>
<input class="solo1" id="craven4"/>
<input class="solo1" id="craven5"/>
</div>

Ответы [ 2 ]

2 голосов
/ 04 января 2012

Получаете ли вы сообщение об ошибке при нажатии кнопки пользовательского интерфейса?В этом случае я думаю, что проблема синтаксиса в HTML, который добавляется после элемента .solo1, в частности в атрибуте onclick: 

$('.solo1').after('<span ... onclick="function save (value)"</span><br/>')

Это должно быть: 

$('.solo1').after('<span ... onclick="save (value)"</span><br/>')

, потому чтоВы хотите, чтобы была вызвана функция save (не определена, следовательно, удаление ключевого слова function из атрибута onclick).

Но, глядя на ваш код и читая описание, я думаю, вы хотите, чтобы значение элемента ввода рядом с кнопкой передавалось в функцию?

В этом случае лучшим решением было бы сначала создать кнопки пользовательского интерфейса и добавить обработчик щелчка к каждому из них позже: 

// Create button and then add it after each input
var button = $('<span ... ></span><br/>');
$('.solo1').after(button);

// Now that the buttons are created, find them and give each a click handler
$('.saveButton').click(function() {
  // Get value from the input element that this button was added after
  var value = $(this).prev().val();

  // Now call the save method with the value
  save(value);
});

Рабочий пример: http://jsfiddle.net/h78hw/

0 голосов
/ 04 января 2012

Запуск JSLint здесь: http://jsfiddle.net/kp6hV/ показывает: 

Error:
Problem at line 14 character 92: Duplicate member 'data'.
data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1...

Problem at line 19 character 10: Extra comma.
},

Implied global: $ 1,2,4,10,14, console 18

То есть, после функции 'success' есть дополнительная запятая и дублирующие элементы 'data', как я прокомментировал выше.

Редактировать: Без ошибок: 

function save(value) {
  $.ajax({
    url: "/*ServerURL*/",
    type: "POST",
    //data: '{ $("#craven1") : "' + value + '" }', // Not sure what's going on here
    data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
    }
  });
}
...