3 Replies - 1915 Views - Last Post: 22 August 2010 - 03:12 AM

#1 tshauck   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 70
  • Joined: 04-January 09

First Time Try with JQuery + ajax

Posted 26 July 2010 - 08:43 AM

Hi Guys,

This is my first attempt trying to do some ajax stuff. I've been reading up on tutorials and whatnot, just can't get this to work. I'm not a noob at programming in general, but with php/javascript.

The issue is the ajax request isn't sending the information it should and I'm not sure why. I just want to get an alert that says success if the request works, or even output something, but the script isn't even being read I don't think since I added a doc.write('hi'), and it did nothing.

Here is my view page, and after that will be the controller. Any help would be great, thanks.

<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').onclick(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');
				}
				});
			});	
		});
	</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();

?>

</body>

</html>








Is This A Good Question/Topic? 0
  • +

Replies To: First Time Try with JQuery + ajax

#2 Fratyr   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 139
  • Joined: 10-April 08

Re: First Time Try with JQuery + ajax

Posted 22 August 2010 - 12:45 AM

First of all, this:
$('#submit').onclick(function(){



have to be:
$('#submit').click(function(){


// jQuery API - events

var form_data = {}; // JSON object first have to be declared, then you can fill it with info:
// ('#one').val(); --- what's this? you have to use jQuery identifier. default - $.
form_data['one'] = $('#one').val(); 
form_data['two'] = $('#two').val();
form_data['ajax'] = 1;



$.post(
	'"<?php echo site_url('java/test'); ?>"' // ensure that this echo returns valid URL
	,form_data
	, function(data) { // callback on success
		alert('success');
	}
);



This post has been edited by Fratyr: 22 August 2010 - 12:47 AM

Was This Post Helpful? 0
  • +
  • -

#3 moopet   User is offline

  • binary decision maker
  • member icon

Reputation: 345
  • View blog
  • Posts: 1,190
  • Joined: 02-April 09

Re: First Time Try with JQuery + ajax

Posted 22 August 2010 - 02:18 AM

At the end of your click handler you must return false. If you don't, the form will continue to submit.

What is your java/test url routed to? As long as it's a controller which exits cleanly then the code will be ok (with
fratyr's changes) but if you haven't written it yet then success will probably not be fired.

I recommend you use firefox with firebug. You can tell the console to "Show XMLHttpRequests" and then you get a lovely view of the data going from and to the browser via ajax. It's a lifesaver (once you get the thing working at all)

And for sanity's sake, don't start calling javascript, "java"!
Was This Post Helpful? 0
  • +
  • -

#4 Fratyr   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 139
  • Joined: 10-April 08

Re: First Time Try with JQuery + ajax

Posted 22 August 2010 - 03:12 AM

Very simple.

Do this:
$('#submit').click(function(e){
e.preventDefault(); // prevents form submittion


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1