Отправка формы через AJAX с помощью CodeIgniter

Question

Я создаю веб-приложение, которое позволит пользователям следить за темами обсуждения, в Q & Формат. С этой целью при отображении вопросов у меня есть кнопка «Следить» рядом с каждым вопросом. Я хочу, чтобы пользователи могли следить за этими потоками без перезагрузки страницы, используя, таким образом, AJAX. Итак, я хочу позвонить AJAX:

1) Отправить форму, обновляющую базу данных, записывающую следующие отношения; и 2) Заменить «Follow» кнопку отправки с «После»

Вот мой код JavaScript:

$("#submitFollow").click(function() { 
    var type = $("input#type").val(); 
    var u_id = $("input#u_id").val(); 
    var e_id = $("input#e_id").val(); 
    var dataString = 'type='+ type + '&u_id=' + u_id + '&e_id=' + e_id; 

    $.ajax({ 
     type: "POST", 
     url: "<?=site_url()?>/follow/ajaxFollow", 
     data: dataString, 
     success: function() { 
      $('#following').html("Following"); 
      .hide() 
      .fadeIn(1500) 
     } 
    }); 
    return false; 
}); 
}); 

Вот что моя форма выглядит код. Я удалил действие и метод, чтобы сохранить форму от отправки себя регулярно. Я пытался предотвратить Default с помощью JS, но это не сработало. (Значения заполняются модель):

<div id="following"> 
<form id="followForm" action="" method=""> 
<input type="hidden" name="type" id="type" value="question"> 
<input type="hidden" name="u_id" id="u_id" value="1"> 
<input type="hidden" value="12" name="e_id" id="e_id"> 
<input type="submit" id="submitFollow" value="Follow Question" class="submitFollow"> 
</form> 
</div> 

Сейчас контроллер довольно просто - он просто принимает массив почтовых переменных и направляет их прямо в базу данных.

Я не слишком хорошо разбираюсь в JavaScript, поэтому извиняюсь, если я занимаю ваше время с простой проблемой.

Answer 1

Я буду просто генералом здесь, но, надеюсь, это поможет. Если бы это было, я бы что-то вроде следующего:

Вот некоторые HTML, полученные от CodeIgniter:

<div> 
questions 1 
</div> 
<div> 
<a class="follow" href="http://example.com/follow/question/1">Follow Question 1</a> 
</div> 

<div> 
questions 2 
</div> 
<div> 
<a class="follow" href="http://example.com/follow/question/2">Follow Question 2</a> 
</div> 

Затем сделайте все работы без JavaScript (добавить, что позже). Итак, вот кодный контроллер с некоторым общим кодом:

<?php 

class Follow extends Controller { 

    function Follow() 
    { 
     parent::Controller(); 
     $this->auth->restrict_to_admin(); 
    } 

    function question($id = NULL) 
    { 
     if($id) 
     { 
      //get question from database using the id 
      //i assume somehow the user is logged in? use their id where applicable 
      echo '<span>You are now following this question</span>'; 
     } 
    } 

} 

/* End of file follow.php */ 

Теперь, независимо от того, используют ли они javascript или нет, это сработает. Здесь вы добавляете javascript (я предполагаю, что вы используете jquery?). Если нет, это будет достаточно близко.

$(document).ready(function(){ 
    $('follow').click(function(event){ 
     event.preventDefault(); 

     var followUrl = $(this).attr('href'); 
     //do ajax call here. 
     $.post(
     followUrl, 
     { 
      //any paramaters you need to add can 
      //go here in this format: 
      //param_key: param_value 
     }, 
     function(responseText){ 
      //here you can update the clicked link to say something 
      //like "you are now following this question" 
      //the responseText var will have whatever text the server responds with. 
      //just responsd with html 
     }, 
     'html' 
     ); 

    }); 
});