Question

我正在尝试为儿童俱乐部创建一个简单的出勤登记册，当他们参加练习时，他们需要记录谁在当晚付款。它或多或少是我想要的，但是我在最后一刻挣扎。

当我单击按钮以将user_id以及日期和状态添加到付费表时，它按预期进行，因此一切正常。但是，我希望该按钮可以根据“付款状态”更改图标，我可以通过读取数据库值来进行购买-

<button type="button" class="btn btn-sm btn-success btn-status" id="<?php echo $row['user_id']; ?>" data-status="<?php echo $row['status']; ?>" title="Active/Deactive details" >
<?php if(empty($row['status'])){ ?>
    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
<?php }else{ ?>
    <i class="fa fa-ban" aria-hidden="true"></i>
<?php } ?>

在按钮上单击以下jQuery处理发布事件-

    $(document).on('click', '.btn-status', function(ev){
    ev.preventDefault();
    var btn_button = $(this);
    var status = 1;
    btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
    var tbl_id = $(this).attr("id");
    var tbl_status = $(this).data("status");
    if(tbl_status == 0) status = 1;
    else status = 0;

    $.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
        console.log(data);
        if(data == "1"){
            $('.warning-modal-message').html("Record status changed successfully.");
            $('#warningModal').modal('show');
            setTimeout(function(){  location.reload(); }, 2000);
        }
        else{
            $('.warning-modal-message').html("Data deletion failed.");
        }
    });
});

和PHP的数据库 -

    if($form_name == "user_status"){
    $tbl_id = mysql_real_escape_string($_POST['tbl_id']);
    $status = mysql_real_escape_string($_POST['status']);

    $query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
    $result = mysql_query($query) or die(mysql_error());
    if($result)
        echo "1";
    else
        echo "0";
}

时遇到的问题是该查询依赖于状态字段在用户数据表来控制哪个图标可见。我需要的是一种方法，可以将所有图标设置为重新加载页面上的fa-ban图标，并在按下按钮进行出勤时将其设置为拇指图标。

我尝试将$row['status'];手动设置为1，我尝试了Bootstrap拨动开关，Bootstrap拨动按钮以及此处的大量文章，但我没有运气

Answer 1

我设法使用Bootstrap拨动开关使其按需或多或少地工作-

<input type="checkbox" id="<?php echo $row['user_id']; ?>" class="toggleBtn" name="toggleBtn" data-toggle="toggle" data-on="Paid Fees" data-off="Unpaid" data-onstyle="success" data-offstyle="danger" data-size="small" >

使用以下jQuery-

    $(document).on('change', '.toggleBtn', function(ev){
    ev.preventDefault();

    // Disable switch on click to help prevent multiple submit
    $(this).bootstrapToggle('disable');

    //var btn_button = $(this);
    var status = $(this).prop('checked');
    //btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
    var tbl_id = $(this).attr("id");
    var tbl_status = $(this).data("status");
    //if(tbl_status == 0) status = 1;
    //else status = 0;

    $.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
        console.log(data);
        if(status == "checked"){
            $('.warning-modal-message').html("Record status changed successfully.");
            $('#warningModal').modal('show');
            setTimeout(function(){  location.reload(); }, 2000);
        }
        else{
            $('.warning-modal-message').html("Data deletion failed.");
        }
    });
});

以及以下PHP-

if($form_name == "user_status"){
    $tbl_id = mysql_real_escape_string($_POST['tbl_id']);
    $status = mysql_real_escape_string($_POST['status']);

    //SELECT * FROM `attendance` WHERE `rider_id` = 1 AND `at_date` = DATE(NOW())

    $result = "SELECT * FROM `attendance` WHERE `rider_id` = '$tbl_id' AND `at_date` = DATE(NOW())";
    $total = ($result);

    if($total==0){
        $query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
        $result = mysql_query($query) or die(mysql_error());
    }

    //$query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
    //$result = mysql_query($query) or die(mysql_error());
    //if($result)
        //echo "1";
    //else
        //echo "0";
}

我现在遇到的几个问题是警告未显示，并且$ qry用来检查当天是否已经输入了骑手（页面刷新时重置了开关！

    if(status == "checked"){
    $('.warning-modal-message').html("Record status changed successfully.");
    $('#warningModal').modal('show');
    setTimeout(function(){  location.reload(); }, 2000);
}
else{
    $('.warning-modal-message').html("Data deletion failed.");
}

谢谢！

jQuery，Ajax保存到数据库

1 个答案: