我正在使用Codeigniter和Bootstrap构建一个应用程序。
我想做的是有一个下拉菜单,它可以在 sql 中更改状态,然后在后台通过 AJAX 调用 PHP 脚本来执行此操作并显示确认消息 - 带有引导警报。一切都应该在没有页面刷新的情况下完成。
问题是我找不到在不通过 POST 刷新页面的情况下将变量从下拉列表传递到 PHP 的解决方案。
我正在尝试做这样的事情:
<!-- 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>
在上面的代码中,我想要一个链接,例如:/changestatus/150/2其中 150 是潜在顾客 ID 示例,2 是从下拉列表中选择的新状态。
<!-- 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>
在上面的下拉列表中,我不知道将ID号1,2,3放在哪里。以及如何在用户单击选项时将其作为my_var发送到 AJAX..并在我的控制器中发挥作用
<?
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';
}
?>
我花了一整天的时间试图做没有成功,如果你能:),请帮忙
您可以为所有li
创建一个额外的属性并为其分配值。在 jQuery 代码中获取这些数据属性,并将其传递给 ajax 请求页面。
<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>
更改 jQuery 代码,如下所示:
$('#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();
});
});
与其使用
$("#success-alert").load(),不如使用 $.post 发送帖子数据(在此处输入链接描述)。$.load 使用 GET 从 Web 服务器获取数据。