Как сбросить счетчик до 0 после обновления Ajax или отправки в базу данных,

ProgramBox

Как сбросить счетчик до 0 после обновления Ajax или отправки в базу данных,

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

#javascript #php #jquery #mysql #ajax

Вопрос:

У меня есть этот код, который отправляет несколько данных в базу данных MySQL с помощью jQuery Ajax, все работает нормально, но когда я пытаюсь обновить страницу с помощью ajax и добавить новую запись, она заполняется количество раз, эквивалентное последнему счетчику.

Ниже приведен мой index.php стр.;

 <div id="sample_table_data">
    <div class="row">
        <div class="panel border-cyan-dark">
            <div class="panel-heading bg-cyan text-white border-cyan-dark">
                    <div class="panel-title">
                        <h4>PHP - Sending multiple forms data through jQuery Ajax</h4>
                  </div>
            </div>
            <div class="panel-body">
                <div style="padding-bottom: 10px;" align="right">
                        <button name="add" id="add" class="btn btn-success btn-sm">
                            <i class="fa fa-plus-square"></i>Add Measures
                        </button>
                </div>
                <form method="POST" id="user_form">
                    <div class="row">
                        <div class="table-responsive margin-bottom-20" >
                            <table class="table table-striped table-bordered table-condensed table-hover" id="user_data">
                                <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Details</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <input type="submit" name="insert" id="insert" class="btn btn-primary btn-sm" value="Insert">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Form Dialogue Box -->
<div id="user_dialog">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Enter First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-control input-sm">
                <span id="error_first_name" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Enter Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-control input-sm">
                <span id="error_last_name" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <input type="hidden" name="row_id" id="hidden_row_id">
                <button type="button" name="save" id="save" class="btn btn-info btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Alert Box -->
<div id="action_alert" title="Action"></div>

<script>  
    $(document).ready(function(){ 
     
        var count = 0;

     $('#user_dialog').dialog({
        autoOpen:false,
        width:800
    });


     $('#add').click(function(){
        $('#user_dialog').dialog('option', 'title', 'Add Data');
        $('#first_name').val('');
        $('#last_name').val('');
        $('#error_first_name').text('');
        $('#error_last_name').text('');
        $('#first_name').css('border-color', '');
        $('#last_name').css('border-color', '');
        $('#save').text('Save');
        $('#user_dialog').dialog('open');
    });

    $('#save').click(function(){

        var error_first_name = '';
        var error_last_name = '';
        var first_name = '';
        var last_name = '';
        if($('#first_name').val() == '') {
             error_first_name = 'First Name is required';
             $('#error_first_name').text(error_first_name);
             $('#first_name').css('border-color', '#cc0000');
             first_name = '';
        } else {
             error_first_name = '';
             $('#error_first_name').text(error_first_name);
             $('#first_name').css('border-color', '');
             first_name = $('#first_name').val();
        } 
        if($('#last_name').val() == '') {
             error_last_name = 'Last Name is required';
             $('#error_last_name').text(error_last_name);
             $('#last_name').css('border-color', '#cc0000');
             last_name = '';
        } else  {
             error_last_name = '';
             $('#error_last_name').text(error_last_name);
             $('#last_name').css('border-color', '');
             last_name = $('#last_name').val();
        }


        if(error_first_name != '' || error_last_name != '') {
             return false;
        
        } else {
             if($('#save').text() == 'Save')
             {
                count  ;
                output = '<tr id="row_' count '">';
                output  = '<td>' first_name ' <input type="hidden" name="hidden_first_name[]" id="first_name' count '" class="first_name" value="' first_name '" /></td>';
                output  = '<td>' last_name ' <input type="hidden" name="hidden_last_name[]" id="last_name' count '" value="' last_name '" /></td>';
                output  = '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="' count '">View</button></td>';
                output  = '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="' count '">Remove</button></td>';
                output  = '</tr>';
                $('#user_data').append(output);
            }
            else
            {
                var row_id = $('#hidden_row_id').val();
                output = '<td>' first_name ' <input type="hidden" name="hidden_first_name[]" id="first_name' row_id '" class="first_name" value="' first_name '" /></td>';
                output  = '<td>' last_name ' <input type="hidden" name="hidden_last_name[]" id="last_name' row_id '" value="' last_name '" /></td>';
                output  = '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="' row_id '">View</button></td>';
                output  = '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="' row_id '">Remove</button></td>';
                $('#row_' row_id '').html(output);
            }
     
          $('#user_dialog').dialog('close');   
       }
});

    
    $(document).on('click', '.view_details', function(){
        var row_id = $(this).attr("id");
        var first_name = $('#first_name' row_id '').val();
        var last_name = $('#last_name' row_id '').val();
        $('#first_name').val(first_name);
        $('#last_name').val(last_name);
        $('#save').text('Edit');
        $('#hidden_row_id').val(row_id);
        $('#user_dialog').dialog('option', 'title', 'Edit Data');
        $('#user_dialog').dialog('open');
    });


    $(document).on('click', '.remove_details', function(){
        var row_id = $(this).attr("id");
        if(confirm("Are you sure you want to remove this row data?")) {
         $('#row_' row_id '').remove();
         }  else  {
             return false;
         }
    });
    
    $('#action_alert').dialog({
        autoOpen:false
    });

    
    $('#user_form').on('submit', function(event){
        event.preventDefault();
        var count_data = 0;
        $('.first_name').each(function(){
         count_data = count_data   1;
     });
        if(count_data > 0)
        {
         var form_data = $(this).serialize();
         $.ajax({
            url:"pages/insert.php",
            method:"POST",
            data:form_data,
            success:function(data)
            {
             $('#user_data').find("tr:gt(0)").remove();
            count =0;
             $('#action_alert').html('<p>Data Inserted Successfully</p>');
             $('#action_alert').dialog('open');
            }
        })
     }
     else
     {
         $('#action_alert').html('<p>Please Add atleast one data</p>');
         $('#action_alert').dialog('open');
     }
    });
    


 });
</script>

и это мое insert.php код

 <?php

//insert.php

$connect = new PDO("mysql:host=localhost;dbname=test", "root", "****");

$query = "
INSERT INTO tbl_sample 
(first_name, last_name) 
VALUES (:first_name, :last_name)
";

for($count = 0; $count<count($_POST['hidden_first_name']); $count  )
{
 $data = array(
  ':first_name' => $_POST['hidden_first_name'][$count],
  ':last_name' => $_POST['hidden_last_name'][$count]
 );
 $statement = $connect->prepare($query);
 $statement->execute($data);
}

?>

Пожалуйста, помогите мне, как я могу сбросить счетчик до 0 после обновления Ajax. Спасибо.

1. Не могли бы вы, пожалуйста, сказать мне, что вы подразумеваете под обновлением Ajax?

2. @SubhashisPandey У меня есть эта кнопка [<контейнер данных кнопки=»#основные» данные-действие=»перезагрузка» скрытый=»истинный» идентификатор=»перезагрузка» имя=»перезагрузка»><контейнер данных кнопки=»#основные» данные-действие=»перезагрузка» скрытый=»истинный» идентификатор=»перезагрузка» имя=»перезагрузка»></кнопка>], которая содержит этот код javacript [document.getElementById («перезагрузка»). нажмите();] Это делается для перезагрузки некоторой части страницы без необходимости перезагрузки всей страницы. Поэтому после перезагрузки с помощью этой кнопки счетчик не сбрасывается. Его сбрасывают только при перезагрузке всей страницы, чего я избегаю, так как все остальные компоненты хорошо загружаются с этой опцией,

Ответ №1:

поместите счетчик var рядом с $(документ)

  var count = 0;
 $(document).ready(function(){

и в вашей функции отправки

 $('#user_form').on('submit', function(event){
    event.preventDefault();
    var count_data = 0;
    $('.first_name').each(function(){
     count_data = count_data   1;
 });
    if(count_data > 0)
    {
     var form_data = $(this).serialize();
     $.ajax({
        url:"pages/insert.php",
        method:"POST",
        data:form_data,
        success:function(data)
        {
         $('#user_data').find("tr:gt(0)").remove();
         $('#action_alert').html('<p>Data Inserted Successfully</p>');
         $('#action_alert').dialog('open');
        }
        count =0;
    })
 }
 else
 {
     $('#action_alert').html('<p>Please Add atleast one data</p>');
     $('#action_alert').dialog('open');
 }
});

и кроме того, вы должны использовать .prop вместо .attr

1. Спасибо за ваши усилия, но я, кажется, не вижу никаких изменений, когда ставлю var count = 0; снаружи

2. пожалуйста, проверьте обновление. работает ли ваша функция «успех:функция»? потому что ваш insert.php ничего не вернула.

Метки: Как сбросить счетчик до 0 после обновления Ajax или отправки в базу данных