CodeIgniter Forums

Full Version: prototype onsubmit not working
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

El Forum

[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?

El Forum

[eluser]winterain[/eluser]
ok i've confirmd that it isn't an onsubmit detection problem, apparently clicking on a submit button is different from onchange=this.form.submit();

the detection doesn't work for the latter...

The main problem now is in the ajax.updater code... still troubleshooting.. firebug reports an undefined element upon GetValue(); ...

whatever does that mean... ? hmm

El Forum

[eluser]winterain[/eluser]
well well.. I think my brain started working again...
I've come to the conclusion that the cause of my initial problems were:

1: I was using an onchange submit() instead of pressing a submit button directly to trigger the JS.
Question now is, how can I change the onsubmit to work with onchange=this.form.submit(); ?

2: the $F('categories') aka getValue() function is not working correctly by getting the list menu item, as it is not an input field. Again, any ideas how to correct it?