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"></script>
<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();
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:
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;
});
});
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()
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.