JQuery Post - обновление БД - несколько строк - PullRequest
Новая
       2

JQuery Post - обновление БД - несколько строк

1 голос
/ 10 июня 2011

Я не уверен, что то, что я пытаюсь сделать, просто или нет, но вот оно:

У меня есть строки данных в таблице.Последние 3 поля являются текстовыми полями, которые принимают пользовательский ввод.У каждой строки есть своя кнопка UPDATE.

Я использую следующий код, чтобы попытаться сделать сообщение jQuery .ajax, но вижу свою проблему - я назначаю идентификаторы моим полям ввода, а выможет быть только один идентификатор, объявленный на странице, так что я уверен, что это одна проблема.

Я пытаюсь сделать так, чтобы при нажатии кнопки UPDATE он передавал переменные из этой строки в полях INPUTи скрытое поле INPUT для rowID и вызывает файл .php, который обновляет базу данных. 

    $(function() {
    $(".submit").click(function() {
        var status = $("#status").val();
        var ly = $("#ly").val();
        var rt = $("#rt").val();
        var offerout = $("#offerout").val();
        var lineid = $("#lineid").val();
        var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid;

        $.ajax({
            type: "POST",
            url: "post/updatedata.php",
            data: dataString,
            success: function(){
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide(); 
            }
        });

        return false;
    });
});

и в строке моей формы (каждая строка такая же, но с другой скрытой переменной ID): 

<form method="POST" name="form">
<td>This one</td><td>Los Angeles</td>
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status" name="status"></td>
<td><input size="6" type="text" id="ly" name="ly"></td>
<td><input size="6" type="text" id="rt" name="rt"></td>
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid" value="97">
<td><input type="submit" class="submit" value="Update"></td>
</form>

Заранее спасибо, много дней работал над этим!

Ответы [ 3 ]

1 голос
/ 10 июня 2011

Дублирование атрибутов id вызовет проблемы.Когда вы говорите $("#ly"), вы, вероятно, получите первое на странице, и обычно это не то, что вам нужно.Это легко решить:

Сначала HTML: 

<td><input size="6" type="text" class="status" name="status"></td>
<td><input size="6" type="text" class="ly" name="ly"></td>
<td><input size="6" type="text" class="rt" name="rt"></td>
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" class="lineid" value="97">

Затем ваш jQuery: 

var $form    = $(this).closest('form');
var status   = $form.find(".status").val();
var ly       = $form.find(".ly").val();
var rt       = $form.find(".rt").val();
var offerout = $form.find(".offerout").val();
var lineid   = $form.find(".lineid").val();

Кроме того, поскольку вы делаете запрос POST, вам нужно просто передатьjСпросите объект и дайте ему позаботиться о его сериализации: 

var data = {
    status:   status,
    ly:       ly,
    rt:       rt,
    offerout: offerout,
    lineid:   lineid
};
$.ajax({
    type:    "POST",
    url:     "post/updatedata.php",
    data:    data,
    success: function() {
        $('.success').fadeIn(200).show();
        $('.error').fadeOut(200).hide(); 
    }
});

Это должно решить ваши проблемы на стороне клиента.

1 голос
/ 10 июня 2011

Вы можете хранить переменную с номером строки в каждой отправке и использовать ее для определения, по какой строке щелкнули и, следовательно, из каких входов вам нужно извлечь значения. 

$(function() {
    $(".submit").each(function () {
        var rowNum = $(this).attr('data-rownum');
        $(this).click(function () {
            var status = $("#status" + rowNum).val();
            var ly = $("#ly" + rowNum).val();
            var rt = $("#rt" + rowNum).val();
            ....
        });
    });
});

<form method="POST" name="form">
....
<td><input size="6" type="text" id="status1" name="status"></td>
<td><input size="6" type="text" id="ly1" name="ly"></td>
<td><input size="6" type="text" id="rt1" name="rt"></td>    
<input type="hidden" name="lineid" id="lineid1" value="97">
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td>
</form>
0 голосов
/ 10 июня 2011

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

<table width="100%" border="1" cellspacing="0" cellpadding="0">

  <tr>
    <form method="POST" name="form">
      <td>CA</td><td>94591</td>
      <td>220000</td>
      <td>20000</td><td>24500</td>
      <td>-5500</td><td>12</td>
      <td>0</td><td>0.167</td><td>4</td>
      <td>1</td><td>1898</td>
      <td></td><td>1</td><td>211335190</td>
      <td><input size="6" type="text" id="status_97" name="status"></td>
      <td><input size="6" type="text" id="ly_97" name="ly"></td>
      <td><input size="6" type="text" id="rt_97" name="rt"></td>
      <td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td>
      <td><input type="submit" class="submit" value="Update" name="97"></td>
    </form>
  </tr>

  <tr>
    <form method="POST" name="form">
      <td>CA</td><td>94591</td>
      <td>220000</td>
      <td>20000</td><td>24500</td>
      <td>-5500</td><td>12</td>
      <td>0</td><td>0.167</td><td>4</td>
      <td>1</td><td>1898</td>
      <td></td><td>1</td><td>211335190</td>
      <td><input size="6" type="text" id="status_96" name="status"></td>
      <td><input size="6" type="text" id="ly_96" name="ly"></td>
      <td><input size="6" type="text" id="rt_96" name="rt"></td>
      <td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td>
      <input type="hidden" name="lineid" id="lineid_96" value="96">
      <td><input type="submit" class="submit" value="Update" name="96"></td>
    </form>
  </tr>

</table>

код java-скрипта 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
   $(function() {
    $(".submit").click(function() {

        var rowToUpdate = $(this).attr('name');

        var status = $("#status_"+rowToUpdate).val();
        var ly = $("#ly_"+rowToUpdate).val();
        var rt = $("#rt_"+rowToUpdate).val();
        var offerout = $("#offerout_"+rowToUpdate).val();

        var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate;

        $.ajax({
            type: "POST",
            url: "post/updatedata.php",
            data: dataString,
            success: function(){
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide(); 
            }
        });

        return false;
    });
});
</script>

Я надеюсь, что это поможет вам ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...