[jQuery] a jquery enabled form doesn't work in a div

Hi all,

I am stuck with this, i created a jquery-form.php with jquery and it works fine (just like http://nettuts.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/)

But now when i load jquery-form.php in a div on the page, when i click submit it refreshes the whole page????

The way jquery-form.php is included is in a file called content.php

switch($category) {
................
case "form":
	ob_start();
	include('jquery-form.php');
	$contentText = ob_get_contents();
	ob_end_clean();
	break;
................
}
echo $contentText;

Code (markup):

with jQuery it goes like this:

  $(document).ready(function(){
	 $(".loadForm").click(function() {  
	   // Your code here
		  $.get("content.php", { category: 'form' }, function(data){
				$("div#textContent").html(data);
			  } );
	  //end code
	   }); 
 });

Code (markup):

But now the form doesn't work anymore???

Any tips?

regards

 

look for js errors - also make sure that:
1. jquery is being loaded in a timeley fashion - thats early for the page load, not immediately before you call upon functions defined in the library.
2. the form's submit is being handled. not sure about this particular plugin (which is why i dont like jquery) - but typically, javascript is event based. you have click events and they fire off submit methods/events. typically, the way ajax works on forms is that said events are being "handled" so the default action is prevented from taking place. this restored control of what happens to your script - which can then do things like field verification or it can 'fork' the submit call and watch it work in the background, capturing the response and doing something with it.

anyway, not here to teach you how to suck eggs. if the page submits and the ajax does not work - one of the two above are not correct.

also, jquery-form.php may output crap like a html, head and body, as well as trying to load jquery and set events. check and make sure that any excess baggage is taken out and move your <script src="jquery.js"></script> into the main head section of the page. best advice: see what it generates as standalone, copy it into your main templates into the relevant sections, leaving out what is not needed/duplicated. make sure you have a onload/domready that sets the events. thats all.. for more help -post a url of the problem.