Login

09-07-2010, 06:33 PM

[eluser]Unknown[/eluser]
I am a longtime PHP coder who has recently discovered the awesomeness that is Codeigniter. I am working on my first CI project and have a question related to refreshing a div with different views using CI and jQuery.

I have an internet radio station that interacts heavily with our song database to display current song, upcoming songs, song requests, etc on our website. Because of this heavy reliance on db interaction, I figured that this would be the perfect project to try my newly found CI skills on. So far, so good! I love CI!

I have come to a roadblock, however. This is really more of a jQuery question (which I am new to as well), but it involves loading views using jQuery so I figured I would start here.

First of all, here is a URL to the project I am working on: http://www.johnvernier.com/ro3/

I have a div that contains an unordered list of three links. If you visit the URL above, you will see this div is located directly above the search box at the top right of the page and is used to select the type of search you want to perform ('by song', 'by artist' and 'by album'). The li tag containing the currently selected search type is styled with an "active" class to make the text bold and give it a different color. The "active" li tag does not have a link since it is the current type. The other two list items are links to the other two search types.

On my current website which is not built in CI or jQuery, I have three different search pages (you guessed it - by-song.php, by-artist.php, and by-album.php), and when you click on the "Song Title" link the entire by-song.php page loads. This is horribly inefficient and I would like to only refresh the div that contains the menu when the "by song", "by artist" or "by album" links are clicked.

My issue is that since I am new to both CI and jQuery, I am having trouble getting this to work the way I want.

Here is the appropriate code snippets for what I am trying to do. First, the div that I want to reload is found in my header file:

header.php

Code:
<div id="searchContainer">

                    &lt;?php echo $this->load->view('search/by-song'); ?&gt;

                </div>

This may be part of the problem above. The searchContainer id is what I want to refresh when the user clicks a link within this div. Currently, I am loading the "by song" view, which as you can see below simply contains the code for the list with the "Song Title" list item active. I have given the two links id's that are called in my jQuery script. There is also a php variable called searchType which I am passing to the search form.

view: search/by-song.php

Code:
<ul id="searchLinks">

          <li>Search our library by:</li>

          <li class="active">Song Title</li>

          <li><a href="#" id="loadArtistSearch">Artist</a></li>

          <li><a href="#" id="loadAlbumSearch">Album</a></li>

          &lt;?php $searchType = "title"; ?&gt;

        </ul>

The other two views (search/by-album and search/by-artist) are exactly the same as above, except with a different li active class depending on the view.

Here's the jQuery code that is in the head of my document:

header.php

Code:
$(document).ready(function() {

            $("a#loadSongSearch").click(function() {

                var songSearch = &lt;?php echo $this->load->view('search/by-song'); ?&gt;

                $('#searchContainer').html(songSearch);

            });

        });

        $(document).ready(function() {

            $("a#loadArtistSearch").click(function() {

                var artistSearch = &lt;?php echo $this->load->view('search/by-artist'); ?&gt;

                $('#searchContainer').html(artistSearch);

            });

        });

        $(document).ready(function() {

            $("a#loadAlbumSearch").click(function() {

                var albumSearch = &lt;?php echo $this->load->view('search/by-album'); ?&gt;

                $('#searchContainer').html(albumSearch);

            });

        });

As you can see, the idea is that when a user clicks on one of the links, the searchContainer div will refresh with the appropriate view.

Right now, when the page loads everything looks fine. However, when I click either "Artist" or "Album", the div disappears from the screen instead of reloading the div to include the "by-artist" or "by-album" view. However, the div is still there when I view the source code. Additionally, the code that appears in the source is not the updated code - in other words, even if I pressed the "album" link, the "by-song" code appears instead of the "by-album" code that should have appeared.

There could be a million things I am doing wrong here, so I figured I would ask the gurus here in hopes that someone can point me in the right direction. Many thanks in advance to those who have taken the time to read my lengthy post and to those who are willing to lend me some guidance and advice, even if it is "RTFM, noob!"

Thanks!

John