CodeIgniter + jQuery .ajax formulaire soumettre les résultats de retour dans un tableau

Question

Je pense que cela devrait être assez facile, je ne trouve tout simplement pas de réponse pour cela. J'utilise un Codeigniter pour une application CRUD simple. Il affiche le résultat dans le tableau. Ce que j'ai fait, était d'utiliser jQuery .ajax pour soumettre le formulaire. Cela fonctionne (presque) parfaitement.

Je suis en mesure de soumettre un formulaire sans recharger mais les résultats ne sont pas affichés à moins que je recharge la page. Pour l'instant j'utilise location.reload(); mais ça n'a aucun sens, après toutes mes intentions de ne pas recharger la page.

Je sais que je devrais faire écho aux données, mais je n'ai aucune idée de comment le faire avec CI.

Quelques: intérieurs

jQuery partie

$("#add_form").submit(function(e) { 
    e.preventDefault(); 
    var dataString = $("#add_form").serialize(); 
    $.ajax({ 
     type: "POST", 
     url: "add", 
     data: dataString, 
     success: function() { 
      $("#lightbox").fadeIn(300).delay(1000).fadeOut(300); 
      $("#notification-box").show(); 
      $("#notification-box").html('<p>Saving</p>'); 
     $("#addrow").hide(); 

     location.reload(); 
     } 

    }); 
}); 

partie contrôleur

function add() 
{ 
    if(!$this->ion_auth->logged_in()) 
    { 
     redirect('auth/login', 'refresh'); 
    }else 
    { 
     // User ID 
     $user_data = $this->ion_auth->get_user(); 
     $user = $user_data->id; 

     // Prepare post data 
     $data['user'] = $user; 
     $data['cdate'] = date('Y-m-d'); 
     $data['ctime'] = date('H:i:s'); 
     $data['mdate'] = date('Y-m-d'); 
     $data['mtime'] = date('H:i:s'); 
     $pair_value = $this->input->post('vpair'); 
     if(empty($pair_value)) 
     { 
      $data['pair'] = "no pair"; 
     }else 
     { 
      $data['pair'] = $pair_value; 
     } 

     $reason_value = $this->input->post('reason'); 
     if(empty($reason_value)) 
     { 
      $data['reason'] = ""; 
     }else 
     { 
      $data['reason'] = $reason_value; 
     } 
     $comment_value = $this->input->post('comment'); 
     if(empty($comment_value)) 
     { 
      $data['comment'] = ""; 
     }else 
     { 
      $data['comment'] = $comment_value; 
     } 
     // Insert_data 
     $this->journal_model->add_trade($data); 
    } 
} 

Aide? N'importe qui?

Cheers,

/J

Answer 1

Je ne sais pas comment vous affichez les données dans l'exemple réel, je devine par son tableau dans une balise de table HTML standard. Personnellement, j'ajouterais une nouvelle ligne de table dans la fonction de réussite, pour ce faire (plutôt que de recharger l'appel), obtenez votre fonction de contrôleur d'ajout de CI pour renvoyer l'écho de la ligne de table à la fin de la fonction d'ajout (c'est un peu sale, une meilleure approche serait d'obtenir CI pour retourner les données et ensuite le formater en utilisant la vue - mais cela devrait fonctionner)

Donc, à la fin de la fonction d'ajout, renvoyer le HTML pour la ligne du tableau, y compris les nouvelles valeurs du formulaire.

Dans la JS changer la fonction de réussite à ceci:

success: function(data) { 
     $("#lightbox").fadeIn(300).delay(1000).fadeOut(300); 
     $("#notification-box").show(); 
     $("#notification-box").html('<p>Saving</p>'); 
     $("#addrow").hide(); 

     if (data != 'error') 
     { 
      $('#tableid').append(data); 
     } 
     else 
     { 
      //handle your error here 
     } 
    } 

En cas d'erreur lors du traitement de votre formulaire, echo « erreur » et la JS peut gérer la façon dont vous le souhaitez, sinon il ajoutera la nouvelle rangée de table sur la table.

Answer 2

Voici quelque chose que j'ai écrit pour une application de facturation qui pourrait vous aider, au lieu de transmettre les données sérialisées à la page, soit passer un élément dom complet en utilisant une fonction de contrôleur qui affiche une vue (ou dans mon cas) la fonction retourne juste un numéro et je construis le code HTML à l'intérieur du jquery à ajouter au corps de table likeso:

/* user clicks the button */ 
$('#button_add_item_submit').click(function(event){ 

    /* prevent the page from scrolling to top via the # href */ 
    event.preventDefault(); 

    /* code to grab text input from the dom */ 

    /* ajax post */ 
    $.post('/invoice/index.php/create/add_item',{date:item_date,description:item_description,price:item_price,invoice_id:scraped_id},function(response){ 
     if(response!=''){ 
      /* inject response into the table, i named the table body #invoice_body */ 
      $('#invoice_body').append('<tr id="item_' + response + '"><td>' + item_date + '</td><td>' + item_description + '</td><td>$' + item_price + '.00</td></tr>'); 
     } 
    }); 

});