如何使用Bootstrap在CodeIgniter中将数据从下拉菜单传递到PHP

Question

I am building an application with Codeigniter and Bootstrap.

What I want to do is to have a dropdown menu which can change a status in sql , and then in background via AJAX call PHP script to do that and display a confirmation message - with bootstrap alert. Everything should be done without page refresh.

The problem is that I can't find a solution to pass the variable from drop down to PHP without page refresh via POST.

I am trying to do something like this:

<!-- AJAX which hide the DIV -->
<script>
    $(document).ready(function(){
      $("#message").hide();
       $('#status li').click(function () {
            $("#message").show();
            $("#success-alert").load('<?php echo base_url() ?>/changestatus/150/', {my_var : $("#my_var").val()});
            $("#message").fadeTo(2000, 500).slideUp(500, function(){
               $("#message").hide();
            });
        });
    });
</script>

In the above code, I would like to have a link like: /changestatus/150/2 where 150 is a sample lead id, and 2 is a new status choosen from dropdown.

<!-- Alert DIV, which is hidden on load -->
<div id="message">
    <div class="alert alert-success" id="success-alert">
        <button type="button" class="close" data-dismiss="alert">x</button>
        <strong>OK! </strong>
        The changes has been done :-)
    </div>
</div>


<!-- Dropdown menu -->
<div class="btn-group" id="myDropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" id="status">
    <li><a href="#">Chg status to 1</a></li>
    <li><a href="#">Chg status to 2</a></li>
    <li><a href="#">Chg status to 3</a></li>
  </ul>
</div>

In the above drop down, I do not know where to put the ID numbers 1,2,3. and how to send it as my_var to AJAX when user clicks option ..and function in my controller

<?
    public function changestatus($lead_id)
    {
        //read a new status from segment in link...
        $new_status = $this->uri->segment(4),

        //...or from POST
        if(isset($_POST['my_var']))
        {
            $new_status = $_POST['my_var'];
        }

        // then will be some call to model which mades changes to DB

        echo '...done';
    }
?>

I've spent a whole day trying to do without success, please help if you can :)

Answer 1

You can make an extra attribute to all your li and assign them values. Get those data attributes in your jQuery code and pass it to the ajax request page.

<ul class="dropdown-menu" id="status">
    <li data="1"><a href="#">Chg status to 1</a></li>
    <li data="2"><a href="#">Chg status to 2</a></li>
    <li data="3"><a href="#">Chg status to 3</a></li>
  </ul>

Change jQuery code as below:

$('#status li').click(function () {
            var my_var = $(this).attr('data'); //Use this value for your page
            $("#message").show();
            $("#success-alert").load('<?php echo base_url() ?>/changestatus/150/', {my_var : my_var});
            $("#message").fadeTo(2000, 500).slideUp(500, function(){
               $("#message").hide();
            });
    });

Answer 2

Instead of using $("#success-alert").load() you should use $.post to send post data ( enter link description here ). $.load uses GET to fetch data from web server.