Page 1 of 1

Replacing sections of my site contents with AJAX?

Posted: Wed Jan 12, 2011 12:57 pm
by psychotomus
I am making this for learning purpose's and failing. ;[

Mission: To display new FORM from with my SESSION counter every time button is clicked
Problem: It removes my HTML!!! and outputs whats in my ajax.php file??
Someone told me I should use full path's to js files, so I am.

my INDEX page (index.php)

Code: Select all

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://www.phpengines.info/ajax/js/plugins/jquery.form.js" type="text/javascript"></script>
<script src="http://www.phpengines.info/ajax/js/forms.js" type="text/javascript"></script>
<div id="outcome1" style="color:red"></div>
<div id="outcome">
<form name="form1" id="form1" method="post" action="http://www.phpengines.info/ajax/js/ajax/ajax.php">
  <!-- JQuery  -->
  <div id="test"><input type="submit" id="save" value="save" /></div>
<!-- End of jquery -->
</form>
</div>
</body>
</html>

my forms.js file

Code: Select all

$(document).ready(function(){			
	$("#save").mouseup(function () {
		$("#outcome1").html("Saving...");
		$.ajax({
		      url: $("#form1").attr("action"),
		      global: false,
		      type: "POST",
		      data: $("#form1").serialize(),
		      dataType: "html",
		      success: function(msg){     		         
		      	 $("#outcome").html(msg);		         
		      },
		      error: function(msg) {
		      	$("#outcome").html(msg);
		      }
   		});
	});
});	
My ajax.php file (the source file)

Code: Select all

<?
session_start();

if(!isset($_SESSION['ajax']))
{
	$_SESSION['ajax'] = 1;
}
else
{
	$_SESSION['ajax']++;;
}

echo '
<form name="form1" id="form1" method="post" action="http://www.phpengines.info/ajax/js/ajax/ajax.php">
  <!-- JQuery  -->
  Boomer ' . $_SESSION['ajax'] . ' test
  <div id="test"><input type="submit" id="save" value="save' . $_SESSION['ajax'] . '" /></div>
<!-- End of jquery -->
</form>';
?>

Re: Replacing sections of my site contents with AJAX?

Posted: Thu Jan 13, 2011 5:23 pm
by josh
psychotomus wrote:Problem: It removes my HTML!!! and outputs whats in my ajax.php file??
That's expected behavior for the .html() function in Jquery. Use .append() if you want to keep what is there and only append some text. Either that or target a different html tag to output ajax into (instead of overwriting a form, overwrite the contents of a div tag within that form)

Re: Replacing sections of my site contents with AJAX?

Posted: Tue Jan 18, 2011 12:41 am
by psychotomus
I want to overwrite the form. The code I showed replaces EVERYTHING.

Re: Replacing sections of my site contents with AJAX?

Posted: Tue Jan 18, 2011 1:50 am
by sergio-pro
"$("#save").mouseup(function () {" must return false, to prevent normal form submission.

And you'd better catch form onsubmit event.