Mon code Ajax/jquery ne fonctionne pas avec codeigniter

Question

Les codes suivants fonctionnent sans jquery.

J'insère des données mais ne les met pas à jour avec ajax. Je dois actualiser pour afficher la mise à jour.

Quelqu'un pourrait-il y jeter un coup d'oeil et souligner ce que je fais mal s'il vous plaît?

Merci d'avance.

Jquery est celui-ci.

$(document).ready(function(){ 
//global vars 
var inputUser = $("#nick"); 
var inputMessage = $("#message"); 
var loading = $("#loading"); 
var messageList = $(".content > ul"); 

//functions 
function updateShoutbox(){ 
    //just for the fade effect 
    messageList.hide(); 
    loading.fadeIn(); 
    //send the post to shoutbox.php 
    $.ajax({ 
     type: "POST", 
     url: "index.php/admin/messages/getShoutBox", 
     // data: "action=update", 
     complete: function(data){ 
      loading.fadeOut(); 
      messageList.html(data.responseText); 
      messageList.fadeIn(2000); 
     } 
    }); 
} 
//check if all fields are filled 
function checkForm(){ 
    if(inputUser.attr("value") && inputMessage.attr("value")) 
     return true; 
    else 
     return false; 
} 

//Load for the first time the shoutbox data 
updateShoutbox(); 

//on submit event 
$("#form").submit(function(){ 
    if(checkForm()){ 
     var nick = inputUser.attr("value"); 
     var message = inputMessage.attr("value"); 
     //we deactivate submit button while sending 
     $("#send").attr({ disabled:true, value:"Sending..." }); 
     $("#send").blur(); 
     //send the post to shoutbox.php 
     $.ajax({ 
      type: "POST", 
      url: "index.php/admin/messages/insertShoutBox", 
      data: $('#form').serialize(), 
      complete: function(data){ 
       messageList.html(data.responseText); 
       updateShoutbox(); 
       //reactivate the send button 
       $("#send").attr({ disabled:false, value:"Shout it!" }); 
      } 
     }); 
    } 
    else alert("Please fill all fields!"); 
    //we prevent the refresh of the page after submitting the form 
    return false; 
}); 
}); 

J'ai le contrôleur suivant. contrôleurs/admin/messages.php

function getShoutBox(){ 
    $data['title'] = "getshoutbox"; 
    $data['main'] = 'admin_home'; 
     $data['messages']=$this->MMessages->getMessages(); 
    $this->load->vars($data); 
    $this->load->view('dashboard'); 

} 

function insertShoutBox(){ 
    $data['title'] = "insertshoutbox"; 
    $data['main'] = 'admin_home'; 
    $this->MMessages->updateMessage(); 
    $data['messages']=$this->MMessages->getMessages(); 
    $this->load->vars($data); 
    $this->load->view('dashboard'); 

} 

View est celui-ci.

<form method="post" id="form" action="index.php/admin/messages/insertShoutBox" > 
     <label>User</label> 
     <input class="text user" name="user" id="nick" type="text" MAXLENGTH="25" /> 
     <label>Message</label> 
     <input class="text" id="message" name="message" type="text" MAXLENGTH="255" /> 
     <input id="send" type="submit" value="Shout it!" /> 

    </form> 
    <div id="container"> 
     <ul class="menu"> 
      <li>Shoutbox</li> 
     </ul> 
     <span class="clear"></span> 
     <div class="content"> 
      <h1>Latest Messages</h1> 
      <div id="loading"><img src="images/general/loading.gif" alt="Loading..." /></div> 

      <?php 
      foreach ($messages as $key => $list){ 

      print_r ($list); 
      } 
      ?> 

     </div> 
    </div> 

Answer 1

Certaines choses me semblent suspectes.

Etes-vous sûr que cette URL est correcte?

url: "index.php/admin/messages/getShoutBox", 

, cette ligne semble également un peu suspect:

if(inputUser.attr("value") && inputMessage.attr("value")) 

Avez-vous vérifier ce qui se passe si si les deux valeurs sont égales à zéro? (Vous pouvez utiliser la fonction .val() au lieu de .attr("value") ainsi)

Même si elle fonctionne, un return simple, à la place de votre if/else aurait suffi:

return (inputUser.attr("value") && inputMessage.attr("value")); 

Answer 2

Vous devez utiliser le code suivant:

$this->load->view('dashboard', '', TRUE); 

Cela renverra les données plutôt que d'essayer de les sortir directement dans votre navigateur.

Answer 3

J'ai eu un problème très similaire, sinon identique dans mon propre site. J'essayais d'extraire le contenu d'une div générée par codeigniter, mais l'AJAX échouait et firebug ne me donnait vraiment aucun indice au-delà du fait qu'il n'y avait rien retourné, pas même une erreur 404 .

La réponse d'iainco m'a sauvé, mais pour le faire fonctionner, vous devez définir les données retournées par codeigniter à une variable et les répercuter manuellement.

Voici les bases pour faire fonctionner ajax sur les deux frameworks.

jQuery:

//setting up a global variable to make the code easier to recycle 
AX = { 
toLoad:'', 
contentWrapper:'#content', 
contentDiv:'#ajax-target' 
}; 

//this is called on a click event I added to a DOM element that contains a link 
function ajaxInit(){ 
    AX.toLoad = $(this).find('a').attr('href') + ' ' + AX.contentDiv; 
    $(AX.contentWrapper).load(AX.toLoad,""); 
} 

puis le contrôleur CodeIgniter pertinent ou vue, en supposant que le contenu $ contient le nom de la vue que vous essayez de charger:

<div id='content'> 
<div id='ajax-target'> 
<?php 
    //setting the third variable to true tells ci to return a data string that can be read using AJAX methods 
    $content_var = $this->load->view("$content",'',TRUE); 
    echo $content; 
?> 
</div> 
</div> 

NOTE: J'avais Ce travail sur un site sans l'étape ci ci, mais je suis maintenant convaincu que cela était dû à une sorte de bug (bénéfique) parce que je ne pouvais pas le reproduire dans mon prochain projet.