Question

我有两个模式可以检索名称列表，旁边有一个复选框。每个人都在查看数据库中的不同列，以查看是否应该选中或取消选中该框。我有一个脚本来发布所做的任何更改（检查或取消选中一个框）。

问题是，如何使用此脚本根据正在使用的模式进行发布。正如其编写的那样，它只会在数据库的一列中发布（或更改值），该列由url指定为php文件。

$('.checked').change(function () {
    var val = $(this).val();
    var Offurl= "set-off.php";
    var item_id = $(this).attr('data-id');
    var dataStringL="item_id="+item_id+"&off=";

    if($.trim(item_id).length>0) {
        $.ajax({
            type: "POST",
            url: Offurl,
            data: dataStringL,
            crossDomain: true,
            cache: false,
            beforeSend: function(){ },
            success: function(data){
                if(data=="success") {
                    alert('The on-tap list has been updated! To view the changes you can refresh the page!');
                } else if(data="failed") {
                    alert('something went wrong! Please try again');
                }
            }
        });
    }

    return false;
 });

$('.unchecked').change(function () {
    var val = $(this).val();
    var Offurl= "set-on.php";
    var item_id = $(this).attr('data-id');
    var dataStringL="item_id="+item_id+"&on=";

    if($.trim(item_id).length>0) {
        $.ajax({
            type: "POST",
            url: Offurl,
            data: dataStringL,
            crossDomain: true,
            cache: false,
            beforeSend: function(){ },
            success: function(data){
                if(data=="success") {
                    alert('The on-tap list has been updated! To view the changes you can refresh the page!');

                } else if(data="failed") {
                    alert('something went wrong! Please try again');
                }
            }
        });
    }

    return false;
 });

这是其中一个模态。不确定将数据列部分放在何处？

<div class="modal fade" id="myModalUpdate" role="dialog">
    <div class="modal-dialog">
        <form action="" enctype="multipart/form-data" name="myForm" method="post">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Update on tap</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped mb-none" id="datatable-default">
                        <thead>
                            <tr>
                                <th>Beer Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php echo  $Recent0; ?>
                        </tbody>
                    </table>
                    <input type="hidden" name="UPD" id="UPD" class="form-control" >
                </div>
                <div class="modal-footer"> </div>
            </div>
        </form>
    </div>
</div>

Answer 1

您可以为模态添加data属性

data-column="column-a"

然后在更改侦听器内部，就像使用$(this).val一样，您应该可以执行$(this).data().column并在$ .ajax URL中使用它

如果您想使用url params，请执行以下操作：

    $.ajax({
        type: "POST",
        url: Offurl + "?column=" + $(this).data().column,
        ...

如果您想使用其他网址，可以使用三元组：

    $.ajax({
        type: "POST",
        url: $(this).data().column === 'column-a'? offUrlA : offUrlB,
        ...

JSFiddle：https://jsfiddle.net/o2gxgz9r/47055/

Answer 2

知道了！

<?php
   $Recent0 = "";
   $check ="";
   $sql220 = "SELECT * FROM beers ORDER BY id";
   $query220 = mysqli_query($db_conx, $sql220);
   $productCount220 = mysqli_num_rows($query220);
            if ($productCount220 > 0) {
                while($row0 = mysqli_fetch_array($query220, MYSQLI_ASSOC)){
             $id0 = $row0["id"];
             $BeerName0 = $row0["BeerName"];
             $on_tap0 = $row0["on_tap"];

             if($on_tap0 =='1'){
             $check ='<input data-id="'.$id0.'" class="checked" type="checkbox" value="off" checked="checkd">';
             }else{
             $check ='<input data-id="'.$id0.'" class="unchecked" type="checkbox" value="on">';
             }

             $Recent0 .= '<tr class="gradeX">
                                            <td>'.$BeerName0.'</td>
                                            <td>'.$check.'</td>
                                        </tr>';
                }
            }
?>

<?php
   $Recent1 = "";
   $check ="";
   $sql220 = "SELECT * FROM beers ORDER BY id";
   $query220 = mysqli_query($db_conx, $sql220);
   $productCount220 = mysqli_num_rows($query220);
            if ($productCount220 > 0) {
                while($row0 = mysqli_fetch_array($query220, MYSQLI_ASSOC)){
             $id0 = $row0["id"];
             $BeerName0 = $row0["BeerName"];
             $to_go0 = $row0["to_go"];

             if($to_go0 =='1'){
             $check ='<input data-id="'.$id0.'" class="checked_to" type="checkbox" value="off" checked="checkd">';
             }else{
             $check ='<input data-id="'.$id0.'" class="unchecked_to" type="checkbox" value="on">';
             }

             $Recent1 .= '<tr class="gradeX">
                                            <td>'.$BeerName0.'</td>
                                            <td>'.$check.'</td>
                                        </tr>';
                }
            }
?>

然后：

$('.checked').change(function () {
var val = $(this).val();
var Offurl= "set-off.php";  
var item_id = $(this).attr('data-id');
var dataStringL="item_id="+item_id+"&off=";
if($.trim(item_id).length>0)
{
$.ajax({
type: "POST",
url: Offurl,
data: dataStringL,
crossDomain: true,
cache: false,
beforeSend: function(){ 

},
success: function(data){
if(data=="success")
{
alert('The on-tap list has been updated! To view the changes you can refresh the page!');

}
else if(data="failed")
{
alert('something went wrong! Please try again');
}
}
});
}return false;
 });


 $('.unchecked').change(function () {
var val = $(this).val();

var Offurl= "set-on.php";   
var item_id = $(this).attr('data-id');
var dataStringL="item_id="+item_id+"&on=";
if($.trim(item_id).length>0)
{
$.ajax({
type: "POST",
url: Offurl,
data: dataStringL,
crossDomain: true,
cache: false,
beforeSend: function(){ 

},
success: function(data){
if(data=="success")
{
alert('The on-tap list has been updated! To view the changes you can refresh the page!');

}
else if(data="failed")
{
alert('something went wrong! Please try again');
}
}
});
}return false;
 });




$('.checked_to').change(function () {
var val = $(this).val();
var Offurl= "set-off-togo.php"; 
var item_id = $(this).attr('data-id');
var dataStringL="item_id="+item_id+"&off=";
if($.trim(item_id).length>0)
{
$.ajax({
type: "POST",
url: Offurl,
data: dataStringL,
crossDomain: true,
cache: false,
beforeSend: function(){ 

},
success: function(data){
if(data=="success")
{
alert('The To Go list has been updated! To view the changes you can refresh the page!');

}
else if(data="failed")
{
alert('something went wrong! Please try again');
}
}
});
}return false;
 });


 $('.unchecked_to').change(function () {
var val = $(this).val();

var Offurl= "set-on-togo.php";  
var item_id = $(this).attr('data-id');
var dataStringL="item_id="+item_id+"&on=";
if($.trim(item_id).length>0)
{
$.ajax({
type: "POST",
url: Offurl,
data: dataStringL,
crossDomain: true,
cache: false,
beforeSend: function(){ 

},
success: function(data){
if(data=="success")
{
alert('The To Go list has been updated! To view the changes you can refresh the page!');

}
else if(data="failed")
{
alert('something went wrong! Please try again');
}
}
});
}return false;
 });

使用一个脚本发布多个模态

2 个答案: