Используйте один скрипт для публикации нескольких модальных - PullRequest
Новая
       2

Используйте один скрипт для публикации нескольких модальных

0 голосов
/ 24 апреля 2018

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

Вопрос в том, как использовать этот скрипт для публикации сообщений, основываясь на том, какой модал используется.Как написано, он будет публиковать (или изменять значение) только в одном столбце базы данных, который указывается с помощью 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>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Понял! 

<?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;
 });
0 голосов
/ 24 апреля 2018

Вы можете добавить атрибут data к модальному

data-column="column-a"

, а затем внутри слушателя изменений, так же, как вы используете $(this).val, вы должны быть в состоянии сделать$(this).data().column и используйте это внутри вашего $ .ajax URL

Примерно так, если вы хотите использовать параметры URL: 

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

Если вы хотите использовать другой URL, вы можете использоватьтроичный как так: 

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

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

...