CI - 使用Javascript按鈕加載控制器

Question

我承認並不是很熟練使用Javascript（以及隨後的AJAX）。我有一個按鈕，您可以點擊在頁面上進行投票。一旦點擊，該頁面將下拉並展開該部分，以便您可以看到其下方的註釋（以便選民不會受到註釋的影響）。這很好用，但不幸的是，單擊該按鈕並不實際加載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; 
}); 

我想這個按鈕表決提交給控制器。修復按鈕以便正常鏈接的最佳方法是什麼？

Answer 1

你的點擊處理程序需要兩兩件事：preventDefault（）方法和AJAX方法，如jQuery的$。阿賈克斯（）或$獲得（）。

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」將不再引用成功函數中的clicked元素。其次，根據您提供的HTML，您需要查找的元素，'a.button'，是被點擊的元素。如果是這樣，我們可以放棄.parent（）。find（'a.button'）並直接在$ this上操作。

更多關於jQuery.ajax（）：http://api.jquery.com/jQuery.ajax/

隨意詢問有關代碼的問題。我希望這有助於！

Answer 2

某處你需要實際調用控制器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; 
}); 

如果你是在期待POST變量你控制器的請求會有點不同。

此外，我假設有一個div.comments在你的HTML的某處。

你能發佈處理請求的控制器的方法嗎？

Answer 3

像這樣的東西應該這樣做：

$('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; 
}); 

Answer 4

$('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); 
}); 

div#content div.comments將與如果你的看法回聲什麼爲html從服務器新的內容所取代。

Answer 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); 
    } 
    }); 
}); 

Answer 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>