CI newbie needs assistance with jQuery div refresh

[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 = <?php echo $this->load->view('search/by-song'); ?>
                $('#searchContainer').html(songSearch);
            });
        });

        $(document).ready(function() {
            $("a#loadArtistSearch").click(function() {
                var artistSearch = <?php echo $this->load->view('search/by-artist'); ?>
                $('#searchContainer').html(artistSearch);
            });
        });

        $(document).ready(function() {
            $("a#loadAlbumSearch").click(function() {
                var albumSearch = <?php echo $this->load->view('search/by-album'); ?>
                $('#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

[eluser]cahva[/eluser]
First things first.. PHP is a serverside language and javascript is clientside. You cant mix PHP and javascript like that.. For example you set in the views the $searchtype. When you send that form, PHP wont know about $searchtype variable at all. And just like many other languages, you just cant set a variable without quotes like you did when you printed the view to for example var songSearch.

Jquery is a powerfull tool and you can manipulate DOM anyway you want. So you dont have to have a view for every searchtype. Maybe its better to demonstrate. I made a little example here:
http://jsbin.com/ozosa/2/edit

In that example when user clicks a searchtype, it will change the active class to that link, copy clicked link's id to hidden input "searchtype". Now when you send the form, you would have the searchtype in the post array.

And lastly, use Firebug when doing javascript. You'll see easily the error(s) and why it isnt working. Now off to bed

[eluser]Rolly1971[/eluser]
well darn it , cahva. you posted your reply faster than i could.

Yeah cahva is correct, you cannot use php and javascript like that. if you are going to put a view from php into javascript you must, must always quote them properly, example:

Code:

<?php
var $myhtmlcode = '<a href="#">Link Text</a>';
?&gt;

-javascript-

var myvar = '&lt;?=$myhtmlcode; ?&gt;';

-/javascript-

[eluser]Unknown[/eluser]
Thanks for the quick replies, guys!

cahva, I am perusing the example you were generous enough to post. It does about 95% of what I want (I don't want the active item to be a link), but I am going to mess around with your example for a bit to see if I can figure it out on my own before my 5 hour energy drink wears off

I definitely appreciate your guidance and if I get stuck on this step I will most definitely be asking for help.

Thanks again,

John

[eluser]Unknown[/eluser]
the folio endless aggregate looks fine. However, back I bang either “Artist” or “Album”, the div disappears from the awning instead of reloading the div to accommodate the “by-artist” or “by-album” view. However, the div is still there back I appearance the antecedent code. Additionally, the cipher that appears in the antecedent is not the adapted cipher - in added words, alike if I apprenticed the “album” link, the “by-song” cipher appears instead of the “by-album” cipher that should accept appeared.