Replacing sections of my site contents with AJAX?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
psychotomus
Forum Contributor
Posts: 487
Joined: Fri Jul 11, 2003 1:59 am

Replacing sections of my site contents with AJAX?

Post 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>';
?>
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Replacing sections of my site contents with AJAX?

Post 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)
psychotomus
Forum Contributor
Posts: 487
Joined: Fri Jul 11, 2003 1:59 am

Re: Replacing sections of my site contents with AJAX?

Post by psychotomus »

I want to overwrite the form. The code I showed replaces EVERYTHING.
User avatar
sergio-pro
Forum Commoner
Posts: 88
Joined: Sat Dec 27, 2008 12:26 pm

Re: Replacing sections of my site contents with AJAX?

Post by sergio-pro »

"$("#save").mouseup(function () {" must return false, to prevent normal form submission.

And you'd better catch form onsubmit event.
Post Reply