Включить Id с постом ajax

Question

Я застрял в этой части ...

Я пытаюсь включить идентификатор, когда AjaxPost отправляет его на сервер, но не могу найти нужную информацию, когда япосмотрел.
У меня есть набор HTML-входов, которые имеют идентификатор.У всех них есть кнопка, которая появляется рядом с ними на keypress, и когда я нажимаю эту кнопку, она сохраняет значение, и ajax отправляет его на сервер.Я получил значение в текстовом поле для включения, но я не могу получить идентификатор этого текстового поля в post.

Вот моя Ajax-функция

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

$('.saveButton').hide().click(function() {
    $(this).hide(); // removes ui icon on click
});

$('.ui-state-default').hover(
    function () { $(this).addClass('ui-state-hover'); },
    function () { $(this).removeClass('ui-state-hover'); } //ui icon hover
);
});
function save(value) {
  $.ajax({
    url: "Default.aspx",
    type: "POST",
    data: "{ Id: " + $(".solo1").attr('id') + ", Value: " + $(".solo1").val() + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);

        },
    });
}
</script> 

- HTML -

<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>

Вот что такое firebugсообщение читает ..

{ Id: , Value: [value entered into textbox]}

Как видите, идентификатор исключен


Заранее спасибо ..

Answer 1

Попробуйте изменить это:

  data: "{ Id: " + $(".solo1").attr('id') + ", Value: " + $(".solo1").val() + "}",

Хотя теперь, когда я оглядываюсь назад, мне приходит в голову, что у вас будет странное поведение, подобное этому.

Ваша первоначальная проблема в том, что идентификатор не определен,Кажется, это выходит за рамки вашей функции.

Вы можете сделать что-то подобное до вызова ajax ...

var id = null;
$('.solo1').each(function(){
    if($(this).val() != '')
    {
        id = $(this).attr('id');
    }
});

Но опять же, это больше грязная работавокруг того, что вы на самом деле пытаетесь сделать здесь.

Answer 2

Вот как я это исправил. Сделал переменные в рамках вызова ajax и использовал переменные в данных.

    $('.saveButton').click(function () {
        var id = $(this).prev().attr('id'); //used in the "data" attribute of the ajax call
        var value = $(this).prev().val(); //used in the "data" attribute of the ajax call

        $.ajax({
            type: "POST",
            url: "Default.aspx",
            data: "{Id: " + id + ", Value: " + value + "}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
            }
        });
        $(this).hide();
    }); //runs ajax call and removes ui-icon after .saveButton is clicked

Еще одна проблема, которую ябыло то, что он получит только значение и идентификатор первого текстового поля .. а не остальные из них .. Я обнаружил, что .prev() (введено в переменные "id" и "value") необходимочтобы обойти эту неудачу.


Код включен!

Answer 3

Попробуйте:

<div id="featherbone">
<input class="solo1" data-id="craven1"/>
</div>

Тогда в вашем jQuery:

data: "{ Id: " + $(".solo1").attr("data-id") + ", Value: " + $(".solo1").val() + "}",