база данных после обновления jquery - несколько строк

ProgramBox

база данных после обновления jquery — несколько строк

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#php #jquery #ajax

Вопрос:

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

У меня есть строки данных в таблице. Последние 3 поля являются текстовыми полями, которые принимают пользовательский ввод. У каждой строки есть своя кнопка ОБНОВЛЕНИЯ.

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

Я пытаюсь сделать так, чтобы при нажатии кнопки ОБНОВЛЕНИЯ переменные из этой строки передавались в поля ввода и скрытое поле ввода для 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   'amp;ly='   ly   'amp;rt='   rt   'amp;offerout='   offerout   'amp;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>

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

Ответ №1:

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

Отбросьте id атрибуты в пользу class атрибутов. Вы также могли бы использовать селекторы атрибутов.
Настройте свои селекторы jQuery так, чтобы они поднимались до предка и возвращались к тому, что вы хотите.

Сначала 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-запрос, вам следует просто передать jQuery объект и позволить ему позаботиться о его сериализации:

 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(); 
    }
});

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

Ответ №2:

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

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

Ответ №3:

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

 <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

 <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   'amp;ly='   ly   'amp;rt='   rt   'amp;offerout='   offerout   'amp;rowToUpdate='  rowToUpdate;

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

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

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