First attempt at ajax, script not being seen?
Question
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();
3 answers
solution1
5 ACCPTED 2010-07-26 16:01:02
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;
});
});
solution2
2 2010-07-26 16:58:54
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()
solution3
1 2010-07-26 20:53:03
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.