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

Вашему обработчику кликов нужны две вещи: protectDefault () и метод AJAX, такой как jQuery $ .ajax () или $ .get ().

protectDefault () предотвратит действие по умолчанию для навигации постраница к значению href.Добавьте параметр к событию click, чтобы представить событие, и для этого вызовите warnDefault ().

$. 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/

Не стесняйтесь задавать вопросы о коде.Я надеюсь, что это помогает!

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

div#content div.comments будет заменено новым содержимым с сервера, если ваше представление отображает что-либо в виде HTML.

Answer 3

Что насчёт этого:

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>

Answer 4

Вам нужно сделать 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 5

Что-то вроде этого должно сделать это:

$('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 6

Где-то в вашем 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.comments.

Можете ли вы опубликовать метод от вашего контроллера, которыйобрабатывает запрос?