CI - 使用 Javascript 按钮加载控制器答案

【问题标题】：CI - Loading controller with Javascript buttonCI - 使用 Javascript 按钮加载控制器
【发布时间】：2012-04-16 10:31:37
【问题描述】：

诚然，我对 Javascript（以及随后的 AJAX）不是很精通。我有一个按钮，您可以单击该按钮在页面上投票。单击后，页面会下降并展开该部分，以便您可以看到其下方的 cmets（这样选民就不会受到 cmets 的影响）。这很好用，但不幸的是，单击按钮实际上并没有加载 PHP 控制器以将投票提交到数据库。

查看：

<div class="vote clearfix">
    <ul class="list1 clearfix">
        <li class="css3">
            <a href="<?=base_url()?>vote/submit_vote/<?=$post?>/1/1" class="button1 css3">
            <span>Button Text</span></a>
        </li>
    </ul>
</div>

JavaScript：

$('ul.list1 li a').click(function() {
    $('a.button1').removeClass("active");
    $(this).parent().find('a.button1').addClass("active");
    $("div#content div.comments").fadeIn('slow');
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    return false;
});

我希望通过此按钮将投票提交给控制器。修复按钮以使其正常链接的最佳方法是什么？

【问题讨论】：

在点击投票按钮之前，页面上是否已经加载了div.cmets的内容？

标签： javascript css ajax codeigniter

【解决方案1】：

您的点击处理程序需要两件事：preventDefault() 和 AJAX 方法，例如 jQuery 的 $.ajax() 或 $.get()。

preventDefault() 将阻止将页面导航到 href 值的默认操作。给click事件添加一个参数来表示该事件，并在其上调用preventDefault()。

$.ajax() 或 $.get() 将执行点击 URL 投票的动作。我个人更喜欢 $.ajax()，它默认执行 GET 请求，但您可以将类型设置为 POST。还有许多其他选项可用，例如 dataType（json、text、xml 等）。成功和错误函数也很容易实现。

JavaScript：

$('ul.list1 li a').click(function(e) {
    e.preventDefault();

    // cache this for scope change
    var $this = $(this);

    $.ajax({
        url: this.href,
        success: function() {
            // your original JavaScript here
            $('a.button1').removeClass('active');

            $this.addClass('active'); // no need for .parent().find()

            $('div#content div.comments').fadeIn('slow');
            var col1Height = $("div#left-pannel").height() - 63;
            $('div#sidebar').css("min-height", col1Height);
        },
        error: function() {
            alert('Sorry, your vote was not successful.');
        }
    });
});

我还更改了您在代码中调用 addClass() 的方式。首先，我们需要缓存 $(this)，因为“this”将不再引用成功函数中的单击元素。其次，根据你提供的HTML，你需要找到的元素，'a.button'，就是被点击的元素。如果是这样，我们可以去掉 .parent().find('a.button') 直接对 $this 进行操作。

更多关于 jQuery.ajax()：http://api.jquery.com/jQuery.ajax/

随时提出有关代码的问题。希望对您有所帮助！

【讨论】：

这完全符合我的要求。你杀了它，谢谢！感谢大家的难以置信的反馈。真是大开眼界。
我很高兴这对您有所帮助。我也非常感谢您的反馈！

【解决方案2】：

$('ul.list1 li a').on('click', function(e) {
    e.preventDefault();
    $('a.button1').removeClass("active");
    $(this).parent().find('a.button1').addClass("active");

    $("div#content div.comments").fadeOut('slow')
    .load($(this).attr('href')).fadeIn('slow');

    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
});

如果您的视图以 html 形式回显任何内容，div#content div.comments 将被来自服务器的新内容替换。

【讨论】：

【解决方案3】：

在您的 javascript 代码的某个地方，您需要实际调用控制器，

根据您构建控制器的方式，您可以执行类似的操作

$('ul.list1 li a').click(function() {
    $(this).parent().find('a.button1').addClass("active");
    $('div#content div.comments').load('http://url/to/the/controller/plus/params/to/cast/the/vote');

    $("div#content div.comments").fadeIn('slow');
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    return false;
});

如果您希望在控制器上发布变量，则请求会有所不同。

我还假设在您的 html 中某处有一个 div.cmets。

你能从你的控制器发布处理请求的方法吗？

【讨论】：

抱歉耽搁了。问题是控制器根本没有被加载。问题是JS在一个单独的文件中，需要动态生成url。
@blackairplane 你可以使用这样的东西：$('div#content div.comments').load($(this).attr('href')); 而不是$('div#content div.comments').load('http://url/to/the/controller/plus/params/to/cast/the/vote');

【解决方案4】：

应该这样做：

$('ul.list1 li a').click(function() {
    var a = this;

    $('a.button1').removeClass("active");
    $(a).parent().find('a.button1').addClass("active");
    $("div#content div.comments").hide().load($(a).attr("href"), function(){ $(this).fadeIn('slow'); });
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    return false;
});

【讨论】：

这可以发布投票（谢谢！！），但它破坏了淡入淡出效果。
试试看，内容加载完成后才会fadeIn
嗯.. 这似乎没有什么不同。很抱歉成为菜鸟。我只是在学习 JS/AJAX。严格来说是一个 PHP 人。
你有我可以看的测试页吗？
实际上我刚刚更新了在加载 cmets div 之前隐藏它们然后淡入，应该这样做

【解决方案5】：

您需要对控制器进行 AJAX 调用

<div class="vote clearfix">
<ul class="list1 clearfix">
    <li class="css3">
        <a href="<?=base_url()?>vote/submit_vote/<?=$post?>/1/1" class="button1 css3">
        <span>Button Text</span></a>
    </li>
</ul>
</div>

JS：

$('ul.list1 li a').click(function(e) {
  e.preventDefault();

  var obj = $(this);

  $.get(obj.attr('href'),function(res){
    if(res == 1) //assuming your controller returns 1 on success
    {
      $('a.button1').removeClass("active");
      $(this).parent().find('a.button1').addClass("active");
      $("div#content div.comments").fadeIn('slow');
      var col1Height = $("div#left-pannel").height() -63 ;
      $('div#sidebar').css("min-height", col1Height );
    }
  });
});

【讨论】：

【解决方案6】：

这个呢：

JAVASCRIPT：

$('ul.list1 li a').click(function() {
    $('a.button1').removeClass("active");
    $(this).parent().find('a.button1').addClass("active");
    $("div#content div.comments").fadeIn('slow');
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    var post = $(this).attr('id');
    $.ajax({
       url: '<?=base_url()?>vote/submit_vote/' + post +'/1/1'
    });
});

HTML：

<div class="vote clearfix">
    <ul class="list1 clearfix">
        <li class="css3">
            <a id="<?=$post?>" href="#" class="button1 css3">
            <span>Button Text</span></a>
        </li>
    </ul>
</div>

【讨论】：