CodeIgniter Forums
jquery (ajax) post to controller to model (and back) to view problem - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: jquery (ajax) post to controller to model (and back) to view problem (/thread-31287.html)



jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-13-2010

[eluser]alienfaceful[/eluser]
I have jquery set up to bind "click" to a bunch of song-title links and the name for each link is that song's id in a database that holds lyrics (I want to output those lyrics eventually)...

$(document).ready(function() {
$('a').click(function(){
$.post('change_lyrics', { id: this.name});
});
});

"change_lyrics" is my controller (called "blog") function...

function change_lyrics() {
$data['title'] = 'Lyrics';

$song_id = $this->input->post('id');
$this->load->model('Musicmodel');
$data2['query2'] = $this->Musicmodel->get($song_id);

$this->load->view('header', $data);
$this->load->view('lyrics_view2', $data2);
$this->load->view('footer');

}

the model takes that song id and returns database info (as an array) to the controller, as a part of $data2. This worked when I defined $song_id explicitly as some number so the problem seems to be that "change_lyrics" is not receiving the posted id from the jquery script or that $data2 is not update automatically in $this->load->view (but that seems crazy- I'm so confused).

Huge thanks in advance for considering this stuff.


jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-13-2010

[eluser]steelaz[/eluser]
To find out what is actually happening when you click on the link, open up Firebug's "Net" tab.

In your jQuery code, first argument for $.post is supposed to be a link, "change_lyrics" is not a link. You don't have 3rd parameter for $.post, so even if you get data via ajax, you don't have a code to handle this data.


jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-13-2010

[eluser]siubie[/eluser]
maybe this could help Smile

Code:
$(document).ready(function() {
  $(‘a’).click(function(){
      $.post(<?=site_url('controller')?>, { id: this.name});
    });
});



jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-13-2010

[eluser]alienfaceful[/eluser]
Thanks for those quick responses! When I used the Firebug's "Net" tab I found out that I indeed needed to flush out my link reference. But get this: once I did that my links were still doing nothing but when I clicked on the "POST change_lyrics" line in the firebug consol and then the "response" and "html" tabs within that, I found that the post request successfully pulled info from my database and into my html. But the actual site doesn't do this (both in local host and on a remote server)!

If you have firebug you can see this for yourself right here:

http://markandersjohnson.com/CodeIgniter_1.7.2/index.php/blog/change_lyrics


I'm new at all of this so I apologize in advance if I'm missing something super simple.


jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-14-2010

[eluser]steelaz[/eluser]
As I mentioned, you need to tell jQuery what to do with this data. For example, to update your div you can do this:

Code:
$(document).ready(function() {
    $('a').click(function(){
        $.post('http://markandersjohnson.com/CodeIgniter_1.7.2/index.php/blog/change_lyrics', { id: this.name}, function(data){
            $('#top_post').html(data);
        });
     });
});

Notice the last parameter in $.post is a function. This function accepts returned data as parameter, then in this function div id="top_post" contents are replaced with returned data.

Since your change_lyrics function is loading the whole page, you should create new function, that only loads lyrics text. Perhaps something like this:

Code:
function ajax_lyrics() {
      $data['title'] = 'Lyrics';
      
      $song_id = $this->input->post('id');
      $this->load->model('Musicmodel');      
      $data2['query2'] = $this->Musicmodel->get($song_id);
      
      $this->load->view('lyrics_view2', $data2);
  }

One more thing. Right now line
Code:
$('a').click(function(){
binds every link on your web page. You should change it to something like
Code:
$('a.ajax_link').click(function(){
and in your view, update all links to lyrics with ajax_link class, for example
Code:
<a name='1' class="ajax_link">Adventures</a>



jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-14-2010

[eluser]alienfaceful[/eluser]
Thanks, steelaz! That worked! Sorry for not mentioning why I totally ignored the first time you suggested adding the last parameter to "$.post". I thought that I could change information on the page asynchronously without it and, for reasons that seem silly to me now, thought that I would have to echo the retrieved info in the function to get it to work (which would mean adding style like a bold title in the controller part of the MVC). Anyways, I'm glad that you were patient and hung in there. I will pay it forward!


jquery (ajax) post to controller to model (and back) to view problem - El Forum - 06-14-2010

[eluser]alienfaceful[/eluser]
posted again accidentally. where is the delete button?! this is an embarrassing morning.