jQuery helps ;[

Sim · January 11, 2011

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)

<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">

 <div id="test"><input type="submit" id="save" value="save" /></div>

</form>
</div>
</body>
</html>

my forms.js file

$(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)

<?
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">

 Boomer ' . $_SESSION['ajax'] . ' test
 <div id="test"><input type="submit" id="save" value="save' . $_SESSION['ajax'] . '" /></div>

</form>';
?>

BlackScorp · January 11, 2011

you ajax.php do have short tags..

see at <? it could be , that your server think that the php file is just a txt file.. change <? in <?php ..

Greetz Blackscorp

Sim · January 11, 2011

Same result.

BlackScorp · January 11, 2011

ok then change your action to "" or to a file without http:// and stuff

Sim · January 11, 2011

hmm. http:// is required. People are calling my php file from there webserver.

BlackScorp · January 11, 2011

on Firebug there are no errors

http://cccpmik.wmw.cc/test2.php

but you disabled your output in the code

Sim · January 11, 2011

No errors, but its flawed. View your source. It removes all HTML but the form itself.

Djkanna · January 11, 2011

I like to help so is this the desired effect you're looking for?

http://mrdjk.com/playground/sim/

Sim · January 11, 2011

Yes, but does it change the actual inside of the form? I don't need same form returned.

Djkanna · January 11, 2011

It does the exact same as what yours does. it replaces what it's supposed to replace only difference is I've anticipated this and added Javascript in the test.php (what you'd call ajax.php)

Djkanna · January 11, 2011

Source:

<!doctype html>
<html lang="en" class="no-js">
<head>
 <meta charset="utf-8">


 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>MrDJK</title>
 <meta name="description" content="I really just advertise my sites here and other sites but hey visit this page anyway, it has things about web developing occasionally and games too! (:">
 <meta name="author" content="MrDJK">
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <link rel="stylesheet" href="css/style.css?v=1">
 <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
 <script src="js/modernizr-1.5.min.js"></script>
</head>




<body> 

 <div id="container">
<p class="saving"></p>
<form action="test.php" id="theForm">
	<input type="submit" id="formButton" value="Save" />
</form>
 </div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
<script type="text/javascript">			
	$(document).ready(function(){				
		$('#formButton').click(function() {
			$.ajax({
				url: 'test.php',
				success: function(ret) {
					$('#theForm').remove();
					$('#container').append(ret);
				}
			});
			return false;
		});
	});
</script>

</body>
</html>

<?php
session_start();

if (isset ($_SESSION['counts']) ) {
++$_SESSION['counts'];
} else {
$_SESSION['counts'] = 1;
}
$times = ($_SESSION['counts'] > 1) ? ' '. number_format ($_SESSION['counts']) .' times' : '1 time';
echo '
<div id="container">

<form action="test.php" id="theForm">
<p class="saving">This has been saved a total of '.$times.'</p>
<input type="submit" id="formButton" value="Save again" />
</form>
</div>
';
?>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
<script type="text/javascript">			
	$(document).ready(function(){				
		$('#formButton').click(function() {
			$.ajax({
				url: 'test.php',
				success: function(ret) {
					$('#theForm').remove();
					$('#container').append(ret);
				}
			});
			return false;
		});
	});
</script>

Now if you goto http://mrdjk.com/playground/sim/djk

It's pretty much the exact same thing but done without an ajax request nor jQuery (forgive the poor standards coding I did it quick);

And that source is

<!doctype html>
<html lang="en" class="no-js">
<head>
 <meta charset="utf-8">


 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>MrDJK</title>
 <meta name="description" content="I really just advertise my sites here and other sites but hey visit this page anyway, it has things about web developing occasionally and games too! (:">
 <meta name="author" content="MrDJK">
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <link rel="stylesheet" href="css/style.css?v=1">
 <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
 <script src="js/modernizr-1.5.min.js"></script>
</head>




<body> 

 <div id="container">
<span id="times" style="display:none;">0</span>
<p id="saved"></p>

<form action="" id="theForm">
	<input type="submit" id="formButton" value="Save" onClick="theClicks(); return false"/>
</form>
 </div>
<script type="text/javascript">
	function theClicks() {
		var stored = document.getElementById('times'),
			times = stored.innerHTML;
		times++;
		document.getElementById('saved').innerHTML = 'This has been saved ' + times + ' times';
		stored.innerHTML = times;
	}
</script>

</body>
</html>

Sim · January 12, 2011

Thanks for the great effort Djkanna, but I need to use jQuery. I will displaying a lot more then just a form. There will a lot of other things being displayed and more then one other form being displayed too.

rulerofzu · January 12, 2011

DJK's example is using Jquery 8o

Arson · September 9, 2011

Line 10 of your ajax.php file:

$_SESSION['ajax']++;;

I'm thinking your problem could be one to many semi-colons?

Make it:

$_SESSION['ajax']++;

Edited September 9, 2011 by Arson

lucky3809 · September 9, 2011

could be your action is not in the directory as stated in your script make sure the path is correct

Sign In

jQuery helps ;[

Recommended Posts

Sim

BlackScorp

Sim

BlackScorp

Sim

BlackScorp

Sim

Djkanna

Sim

Djkanna

Djkanna

Sim

rulerofzu

Arson

lucky3809

Join the conversation

Browse

Activity

Hosting