views:

60

answers:

3

I've been coding with php/CI for a bit now and am starting to get the hang of it, but I'm trying to make the leap to use jQuery + some ajax stuff and I can't seem to get it to work. It's like the the script isn't even being seen.

What I'd like it to do is to call the java/test function when the user clicks the submit button. I'd like to add something like if(ajax) do something, which is why I have that in the form data, but no matte what it calls the submit function - I added the return false so it wouldn't fire the submit function, yet it still is.

Here is my code, any help would be great. Thanks

java.php // Controller

<?php

class Java extends Controller{

    function index(){
        $this->load->view('java_view');
    }

    function submit(){
        $one = $this->input->post('one');
        $two = $this->input->post('two');

        echo $one;
    }
            function test(){
        $one = $this->input->post('one');
        $two = $this->input->post('two');

        echo $two;
    }


}   

java_view.php // viewfile

<html>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="javascript">
    $(document).ready(function(){
        $('#submit').click(function(){

            var form_data = {
                one: ('#one').val(),
                two: ('#two').val(),
                ajax: '1',
            };

            $.ajax({
            url: "<?php echo site_url('java/test'); ?>",
            type: 'POST',
            data: form_data,
            success: function() {
                alert('success');
            }
            });
                            return false;
        }); 
    });
</script>

 </header>

 <body>

 <?php

echo form_open('java/submit');  

//setting up the fields
$form_data = array(
    'name' => 'one',
    'id' => 'one',
);

echo "<p> One </p> <br/>";

echo form_input($form_data);

$form_data = array(
    'name' => 'two',
    'id' => 'two',
);

echo "<br/> <p>Two</p> <br/>";

echo form_input($form_data);

$form_data = array(
    'name' => 'submit',
    'id' => 'submit',
    'value' => 'Submit',
);
echo "<br/>";

echo form_submit($form_data);
echo form_close();

+4  A: 

This line:

$('#submit').onclick(function(){

Should be:

$('#submit').click(function(){

I assume that #submit isn't input type="submit" otherwise page will reload unless you put return false at the end of click handler.

More Info:

http://api.jquery.com/click/

Update:

Try this (added live and few other modifications):

 $(document).ready(function(){
    $('#submit').live('click', function(){

        var form_data = {
            one: ('#one').val(),
            two: ('#two').val(),
            ajax: '1',
        };

        $.ajax({
        url: "<?php echo site_url('java/test'); ?>",
        type: 'POST',
        data: form_data,
        success: function() {
            alert('success');
        });

        return false;
    }); 
});
Sarfraz
Thanks for that, but it wasn't exactly what I was looking for (my fault wasn't explicit) I've edited my post if you could take another look. Added the return false bit too. Thanks
tshauck
@tshauck: See my updated answer please. Try the updated code please.
Sarfraz
Hi, I've tried the code, it is still firing the submit function as it would if clicked w/o an javascript.
tshauck
@tshauck: Then why don't you change button type to just `button` rather than `submit` since you want to submit using ajax.
Sarfraz
@sAc I don't think that's getting to the root of the problem, which I can't seem to figure out, is that the javascript isn't firing. I've changed the html and the java to reflect the button idea, but now I is just being clicked with no action. I'm running on my local server using xampp if that helps any.
tshauck
Install firebug and see if any request or errors are coming up here, very invaluable in AJAX debugging.
Kieran Andrews
+1  A: 

Even better?

$('#submit').live("click", function(){

If you are dynamically updating the DOM at all or your onclick event can be called more than once per page load it is safer to use live()

http://api.jquery.com/live/

nicholasklick
Hi, good advice, edited my post to be more what I was going for. If you could look again that'd be nice. Thanks.
tshauck
A: 

Just a thought... have you tried explicitaly stating the URL for the Ajax call in your JavaScript? It could be that it doesn't understand the leap into php to echo the URL path.

musoNic80
@musonic80 I wish it were that, I've tested it hardcoded and it doesn't work. Thanks for the suggestion though.
tshauck