Login

02-06-2009, 01:03 AM

[eluser]bobbob[/eluser]
I am trying to do a very simple update to my database.
Somehow I can't stop the form from submitting to the controller and then opening a new page.
Loaded prototype.js and confirmed it is loaded.
My form:

Code:
&lt;form name="preferred_form" id="preferred_form" method="post" action="&lt;?php echo site_url('members/preferred');?&gt;"&gt;

                     &lt;input type="text" name="preferred" id="preferred" /&gt;

                     &lt;input type="submit" value="Update" id="button" /&gt;

                     &lt;/form&gt;

    <div id="new_preferred"></div>

I want the new value to show up in the new_preferred div.
This is loaded in an external file in the same directory as the prototype so it must be being read:

Code:
function init(){

     Event.observe('button', 'submit', updateit(), false);

}

function updateit(){

     var url = 'members/preferred';

     var pars = 'preferred='+escape($F('preferred'));

     var target = 'new_preferred';

     var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});

}

As you can see javascript is not my thing.
Help much appreciated.
The update is successful through the normal call to the controller. I just can't get it to happen without opening a new page.

02-06-2009, 02:35 AM

[eluser]davidbehler[/eluser]
Try

Code:
action="[removed]void(0);"

in your form.

And instead of

Code:
var pars = 'preferred='+escape($F('preferred'));

I would use

Code:
var pars = $('preferred_form').serialize(true);

02-06-2009, 10:44 AM

[eluser]bobbob[/eluser]
Thanks for your suggestions.

I think the problem is in my JavaScript as there is no Ajax happening. It still makes the call to the controller when I set the action back to what I had but opens a new page with the response. Your suggestion gave an illegal characters in the URI message.
The serialize seems to make no difference either.
Any other thoughts??

02-06-2009, 11:10 AM

[eluser]Nick Husher[/eluser]
Your problem is in the second block of code you posted.

Code:
function init(){

     Event.observe('button', 'submit', updateit(), false);

}

The double parentheses after updateit tells the Javascript interpreter to execute the function right there, right then. Remove the double parens and you're telling the interpreter to pass a reference to the function without executing it, which is what you want. When the submit event fires, the listener that lives inside the Event object you're using will call updateit with the correct scope.

This is an important concept in Javascript, namely that functions are just another data type (the other three are Number, Object, and String). To hammer this point home in my own code, I often use the following format to define functions:

Code:
var myFunction = function(param1, param2, param3) {

    // function code

}

02-06-2009, 12:27 PM

[eluser]bobbob[/eluser]
Changed to your sugestion:

Code:
function init(){

     Event.observe('button', 'submit', updateit, false);

}

Still it opens a new page with the response.

This is my controller:

Code:
function preferred()

    {

        $this->load->helper(array('form', 'url'));

        $newdata = $_POST['preferred'];

        $id = $this->session->userdata('uid');

        $this->db->where('id',$id);

        $this->db->update('members', $_POST);

        $this->session->set_userdata('preferred',$newdata);

        echo $newdata;

    }

These three are in the <head> of the view inside script tags that i removed as the forum removes those tags:

Code:
type="text/javascript" src="&lt;?= base_url();?&gt;js/prototype.js">

    type="text/javascript" src="&lt;?= base_url();?&gt;js/scriptaculous.js">

     type="text/javascript" src="&lt;?= base_url();?&gt;js/ajax.js">

ajax.js being the javascript I posted earlier. They all show up in the source code and I put some other prototype effects on my page to prove to myself that the libraries are loaded.

Can't think of any more hints.
Thanks for trying Nick and waldmeister.

02-06-2009, 01:05 PM

[eluser]Nick Husher[/eluser]
Okay, there are a few other issues that perhaps I didn't catch: First, is the function init ever being called? If not, the Event.observe command is never executed. Second, the submit event is fired by the form in question, not by the button that triggers the submit. Third, according to the prototype API (which I'm not very familiar with, to be honest), the observe function only uses the fourth parameter in browsers that support the W3C event model (IE does not), so you should probably remove it.

Try something like this:

Code:
var pageInit = function() {

   Event.observe('preferred_form', 'submit', function(e) {

      alert('You hit the submit button!');

      e.stop(); // stop propagation of the event

   });

}

document.observe('dom:loaded', pageInit);

02-06-2009, 02:21 PM

[eluser]bobbob[/eluser]
This:

Code:
function updateit(){

     var url = 'members/preferred';

     var pars = $('preferred_form').serialize(true); 

     var target = 'new_preferred';

     var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});

}

var pageInit = function() {

   Event.observe('preferred_form', 'submit', function(e) {

      updateit();

      e.stop(); // stop propagation of the event

   });

}

document.observe('dom:loaded', pageInit);

is giving me a 404 page not found but it is coming in the div so the ajax part is working.
i tried the full url for var url and it gave a Not Found also in the div but not the CI default error message. ???
Somehow the url needs to be changed. Any idea?
Thanks again Nick.

02-06-2009, 02:34 PM

[eluser]Nick Husher[/eluser]
The best advice I can give you is to crack open firebug and use its console and net tabs to figure out what URL you're actually querying. Once you know what it's trying to get, you can act knowledgeably when you work to change it to what it should be.

02-06-2009, 02:46 PM

[eluser]bobbob[/eluser]
Found it in the net tab of Firebug. Thank you so much!!
For some reason the javascript doesn't need to call the controller only the function:

Code:
var url = 'preferred'; //correct

var url = 'members/preferred'; //incorrect

Would never have thought of that.
Thanks again Nick.

04-20-2011, 08:40 AM

[eluser]Rufus09[/eluser]
I find this very helpful. I am very much a newbie and still have a hard time wrapping my head around all of this. The double parentheses issue is a common mistake that I apparently make. This explains why I have been having so many issues. I really appreciate the suggestions made here, I can use all the help I can get. Thank you.