使用ajax显示不使用动态id的无

wvt8vs2t  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(232)

我正在使用jquery,我正在尝试使用ajax jquery启用/禁用,函数工作,但在页面刷新后显示结果,ajax响应条件不工作(动态),
这是我的html

<td>
    <?php if(($ban->status)==1) {?>
    <button type="button" class="btn btn-warning" id="disable <?php echo($ban->id); ?>" onclick="enable(<?php echo($ban->id); ?>)">Disable</button>
 <?php }else{ ?>

<button type="button" id="enable <?php echo($ban->id); ?>" class="btn btn-success" onclick="enable(<?php echo($ban->id); ?>)">Enable</button>
<?php }?>
</td>

这是我的ajax

<script type="text/javascript">
    function enable(id) {
       var id = id;
         alert(id);
           $.ajax({
               type: 'POST',
               url: "<?php echo base_url('upload_controller/enable');?>",
               data: {'id': id},
               cache: false,
               dataType: "html",
               async: false,
               success: function(data){
                alert(data);
                $('#response').html(data);
if (jQuery.trim(data) == "disabled") 
              {
                    document.getElementById(`enable ${id}`).style.display = "none";
                    document.getElementById(`disable ${id}`).style.display = "block";
                 }
              else  // if status enabled ( query working fine)
                  {
                    document.getElementById(`disable ${id}`).style.display = "none";
                    document.getElementById(`enable ${id}`).style.display = "block";
                   }    
}
           });

    }
</script>

这是我的控制器
公共功能启用(){

$id=$this->input->post('id');
        $sql = "SELECT status from banner WHERE id=$id";
        $querys=$this->db->query($sql);
        $rtnArr = $querys->row_array();
        //echo "<pre>";print_R($rtnArr);
        $status=$rtnArr['status'];
        //die();
        if($status=="1")
            {
                    $sql = "UPDATE banner SET status=0 WHERE id=$id";
                    $query=$this->db->query($sql);
                    echo "disabled";
                    die();
            }
        else
            {
                    $sql = "UPDATE banner SET status=1 WHERE id=$id";
                    $query=$this->db->query($sql);
                    echo "enabled";
            }   

    }
hc2pp10m

hc2pp10m1#

下面的示例演示如何使用单个按钮并切换其样式和文本。我这样做是因为我认为你可能有多个按钮可以切换,尽管一个按钮也可以。为了保持灵活性,我们将状态和id放入数据属性中。您可以在这里测试它,它将显示切换,但要用代码测试它,请删除注解要删除的部分。

$(document).ready(function() {
  $('.btn-enable').each(function() {
    setButton($(this), +$(this).attr('data-status'))
  })

  $('.btn-enable').click(function() {
    // remove the next 2 lines for your actual code. This is for the snippet test
    setButton($(this), +$(this).attr('data-status') === 1 ? 0 : 1)
    return

    $.ajax({
      type: 'POST',
      url: "<?php echo base_url('upload_controller/enable');?>",
      data: {
        'id': $(this).data('id')
      },
      cache: false,
      dataType: "html",
      async: false,
      success: function(data) {
        //alert(data);
        $('#response').html(data);
        if (jQuery.trim(data) == "disabled") setButton($(this), 0)
        else setButton($(this), 1)
      }

    })
  })
})

function setButton(button, status) {
  console.log(status)
  let cl = status ? 'btn-warning' : 'btn-success';
  let text = status ? 'Disable' : 'Enable';
  $(button).removeClass(['btn-warning', 'btn-success']);
  $(button).addClass(cl);
  $(button).attr('data-status', status);

  $(button).text(text)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-enable" data-id='<?php echo($ban->id); ?>' data-status="<?php echo($ban->status); ?>"></button>

相关问题