1.11M Members

AJAX loaded form submit button not working with Live

 
0
 

Hello, thanks for reading my thread. I'm still new to web development so I appreciate your help in advance. I am having a problem that I am sure many people have run across in the past. In my project, I have sidebar menus loaded based upon the user permission level after login. I am loading the different php files into a "content" div in the index.php page with AJAX. This is working great. However, once I have loaded the php file into the div, I lose the php files functionality and I am trying to get it back. I understand that is because I am using AJAX to load the files into the div. So I have been trying to use Live to bind the DOM. If anyone can help me with some code suggestions or code examples I would greatly appreciate it. I am posting some stripped down basic code examples to try to get the concept figured out. The slider is link is working but I am having trouble with the sayhello.php page not displaying the results from the submit button and refreshing or displaying the results in the div "content" in index.php page. What happens is the index.php page just simply reloads with no results.

Thanks for you help!


here is the index.php file code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixLt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mydiv').live('click',function(){
		$("p").slideToggle();
    alert("Thank you for using the Slide Toggle"); 
});
  });
</script>

<script type="text/javascript">
$(document).ready(function(){

$('#content').live('submit',function(){
	alert("Thank you for using the submit button"); 
});	
  });

</script>
</head>

<body>

<div class="container">
  <div class="sidebar1">
    <ul class="nav">
  <li><li><a href="javascript: addContent('ajax_live_slidetoggle.php', 'content')">Ajax-Live-Slide Toggle</a></li>
  <li><li><a href="javascript: addContent('sayhello.php', 'content')">sayhello</a></li>
    </ul>
    <p> </p>
    <!-- end .sidebar1 --></div>
  <div id="content">
    <h1>Div &quot;content&quot;</h1>
   
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>



Here is the sayhello.php page that AJAX loads into the div on the index page:

<?php
// Print a greeting if the form was submitted
if ($_POST['user']) {
    print "Hello, ";
    // Print what was submitted in the form parameter called 'user'
    print $_POST['user'];
    print "!";
} else {
    // Otherwise, print the form
    print <<<_HTML_

<div id="content">

<form name="MyForm" action="" method="post" >

Your Name: <input type="text" name="user">
<br/>
<input type="submit" value="submit">
</form>
_HTML_;
}
?>

</div>



ajax_live_slidetoggle.php page code here:

<html>
<head>

</head>
<body>

<div id="mydiv">
<div style="background-color:blue">
<p>Slide toggle text for the click event. </p>
<input type="submit" value="Submit">
</div>
</div>

</body>
</html>
 
0
 

There's a few things there.

  • You need just one $(document).ready ... structure containing both sets of .live() code (or whatever else is necessary for the page to work).
  • Avoid embedding javascript in HTML. Attach event handlers to DOM elements in javascript, inside the $(document).ready ... structure.
  • ajax_live_slidetoggle.php includes HTML, HEAD and BODY tags. Content returned to an ajax response handler should be devoid of these wrappers. Reason being, the page on which the content will be displayed already has the necessary HTML structures in place and only needs them once.

Airshow

 
0
 

Hi Airshow, Thanks for the pointers and they are all appreciated and understood.. The reason I put the ajax_live_slidetoggle.php file in there is because it does work and it shows, that after the slide action takes place the results simply display still in the index.php page.

However, what I really need help with is the "sayhello.php" page. I load the sayhello.php file dynamically into the "content" div on the index.php page. This part is working if you try my code.. Also I have the submit button now working using the jquerry live function where I am binding everything inside the <div id="content"> including the PHP function. Even this is working. However, once I click on submit the results are displayed in the "sayhello.php page in the browser, instead of back inside the "content" div back in the index.php page.

So what I am trying to achieve is the ability to load php files from my menu dynamically into a div on the index page without an entire page reload. Then I would like to in essence bind the dom with all the functionality of that dynamically loaded file to work and re-display back in the index.php inside the "content" div...

If you or anyone can take this code and show me how to put the results back into the "content" div on index.php page I would be very grateful. Here is the updated code.. please excuse my poor and incomplete example code, just trying to get something working.. Thanks in advance!

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixLt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mydiv').live('click',function(){
		$("p").slideToggle();
    alert("Thank you for using the Slide Toggle"); 
});
  });

</script>
<script type="text/javascript">
$("#form").live('submit' , function() {  
    alert("Form submitted!");        
    return false; 
}); 

</script>
</head>

<body>

<div class="container">
  <div class="sidebar1">
    <ul class="nav">
  <li><li><a href="javascript: addContent('ajax_live_slidetoggle.php', 'content')">Ajax-Live-Slide Toggle</a></li>
  <li><li><a href="javascript: addContent('sayhello.php', 'content')">sayhello</a></li>
    </ul>
    <p> </p>
    <!-- end .sidebar1 --></div>
  <div id="content">
    <h1>Div &quot;content&quot;</h1>
   
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>





Here is the "sayhello.php" code:

<div id="content">
<?php
// Print a greeting if the form was submitted
if ($_POST['user']) {
    print "Hello, ";
    // Print what was submitted in the form parameter called 'user'
    print $_POST['user'];
    //print "!";
} else {
    // Otherwise, print the form
    print <<<_HTML_

<div id="content">

<form name="MyForm" action="sayhello.php" method="post" >

Your Name: <input type="text" name="user">
<br/>
<input type="submit" value="submit">
</form>
_HTML_;
}
?>

</div>
 
0
 

Chris,

OK, here's something to get you started:

Main Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixLt.css" rel="stylesheet" type="text/css" />
<!--script src="js/ajax.js" type="text/javascript"></script-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#mydiv").live("click", function(){
    $("p").slideToggle();
    alert("Thank you for using the Slide Toggle");
  });

  $('.sidebar1 a').click(function() {
	var $a = $(this);
	var url = $a.attr('href');
	var linkText = $a.html();
	var target = $a.attr('target');
	$.ajax({
      context: $('#'+target),
      error: function(XMLHttpRequest, textStatus, errorThrown){
        this.html('AJAX error<br>' + linkText + '<br>' + url);
	  },
      success: function(data, textStatus, XMLHttpRequest) {
        this.html(data);
      },
      timeout: 5000,
      type: 'GET',
      url: url
    });
	return false;
  });

  $('form[name="MyForm"]').live('submit', function() {
	var form = $(this);
	var url = form.attr('action');
	var target = form.attr('target');
	var data = form.serialize();
    $.ajax({
      context: $('#'+target),
	  data: data,
      error: function(XMLHttpRequest, textStatus, errorThrown){
        this.html('AJAX error<br>Form submitted: ' + form.attr('name') + '<br>' + url);
      },
      success: function(data, textStatus, XMLHttpRequest) {
        this.html(data);
      },
      timeout: 5000,
      type: 'POST',
      url: url
    });
	alert("form submitted");
    return false;
  });
});
</script>
</head>

<body>

<div class="container">

  <div class="sidebar1">
    <ul class="nav">
      <li><a href="ajax_live_slidetoggle.php" target="content">Ajax-Live-Slide Toggle</a></li>
      <li><a href="sayhello.php" target="content">Say Hello</a></li>
      <li><a href="sayGoodbye.php" target="content">Say Goodbye</a></li>
    </ul>
  </div><!-- end .sidebar1 -->

  <div id="content">
    <h1>Div &quot;content&quot;</h1>
  </div><!-- end .content -->

</div><!-- end .container -->

</body>
</html>

"sayhello.php" page:

<?php
// Print a greeting if the form was submitted
if ($_POST['user']) {
    // Print what was submitted in the form parameter called 'user'
    print "Hello, " . $_POST['user'] . "!";
} else {
    // Otherwise, print the form
?>
<form name="MyForm" action="sayhello.php" method="post" target="content">
Your Name: <input type="text" name="user"><br/>
<input type="submit" value="submit">
</form>
<?php
}
?>

You will see in the main page what I mean by the suggestions in my earlier post.

Note also the use of the href="....." and target="content" attributes in the nav links. These is used by the javascript to determine the url to request and the div in which to load the response data, while providing a fallback for users with javascript disabled - the requested page will load in a window of the same name as the target div (ie "content"). Similarly, in "MyForm", we have action="....." and target="content" for the same reason.

Before posting I did some limited testing of the code but without a php server.

Airshow

 
0
 

Airshow, Thank you very much! You really helped me out! I did a quick test and all is working great with PHP! I'm really happy because I had been stuck for several days trying different code.

I will apply this new code to my main project and see how it works. I can also see your points clearly about proper coding for users who may have javascript disabled.

I hope that this basic example can help out many others as well. I'm sure I will have other questions as I go along through my projects and I really appreciate your help! Thanks again!

Question Answered as of 3 Years Ago by Airshow
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: