Login

01-06-2009, 08:30 AM

[eluser]winterain[/eluser]
I've just gotten my paws dirty with ajax and CI via Derek Allard's FAMOUS CI video tutorial, while the code remains mostly the same, I cannot get the submit button to work correctly...

I think it's probably some form of setting/intializing norm that I'm missing out due to my inexperience..

problem is, upon clicking on the submit button, in my case it's set to submit onChange in the form list, it loads the normal view result page instead of loading the results into the div...

Can someone help me out please because I've been stuck at this problem for many hours now, and after researching through the net, it seems that the code is the same, yet result is different for me.

this is my js code

Code:
window.onload = function () {

    $('song_cat').onsubmit = function () {

        inline_results();

        return false;    

    }

}

function inline_results() {

    new Ajax.Updater ('song_list_f', base_url+'music/ajaxGetSongs/', {method:'post', postBody:'categories='+$F('categories')});

    new Effect.Appear('song_list_f');

}

my view

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html &gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;

&lt;title&gt;Music Page&lt;/title&gt;

&lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;

[removed]

//&lt;![CDATA[

base_url = '&lt;?php echo base_url();?&gt;';

//]]>

[removed]

{ prototype.js, scriptaculous.js and songloader.js loaded here }

&lt;/head&gt;

&lt;body&gt;

      <div id="song_cat_f">

        &lt;form id="song_cat" action="&lt;?= site_url('music/getSongs')?&gt;" method="post"&gt;

          <select name="categories" size="8" class="song_cat">

          &lt;? foreach($cats->result() as $row_cat):?&gt;

            <option value="&lt;?=$row_cat->type?&gt;">&lt;?=$row_cat->type?&gt;</option>

          &lt;? endforeach; ?&gt;

          </select>

        &lt;/form&gt;

      </div>

     <div id="song_list_f" style="display: none;")></div>

...

Not going to put up my models code because it is definitely returning the variables fine, I need to get the js to ignore submit and run the inline function..

Can someone enlighten please?