One version of this program uses .click function and a prompt to get a name to search for. This works fine.
The other version of this program uses a form and .change function to input a name to search for. This DOES NOT WORK. The jquery .load() doesn't access the .php file.
Sorry about the code below but this forum won't let be upload files with extensions of .txt, .html, .php so I don't know how to do it.
Thanks in advance for any help.
RP
Version 1.
Code: Select all
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>Page Loader</title>
<script type="text/javascript" src="../jquery/jquery-1.6.js"></script>
</head
<body>
<!--
<div id="container">
<fieldset>
<form id="getPartName" action="" >
<p> Type Partial Name to Search for a Name: and Click<br></p>
<p><input type="text" name="partnm" id="partnm"></p>
</form>
</fieldset>
</div>
-->
<div id="container">
<a href="#" id="loadData">Click This Link To Load My Favorite Movies</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#loadData").click(function() {
lukupname=prompt("Enter Partial Name to Search for:", 'All Names');
alert("lukupname "+lukupname);
$(this).text("...One Moment Please...");
$("#container").append('<div id="favoriteMovies"></div>')
.children("#favoriteMovies").hide()
.load("A-theOtherPage2.php ul#favoriteMovies", {'myname':lukupname}, function() {
$("#loadData").remove();
$("#favoriteMovies").show(); //.slideDown("slow");
});
return false;
});
});
</script>
</body>
</html>
Version 2.
Code: Select all
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>My Dysfunctional Page Loader</title>
<script type="text/javascript" src="../jquery/jquery-1.6.js"></script>
</head>
<body>
<div id="container">
<fieldset>
<form id="getPartName" action="" >
<p> Type Partial Name to Search for a Name: and Click<br></p>
<p><input type="text" name="partnm" id="loadData"></p>
</form>
</fieldset>
</div>
<!--
<div id="container">
<a href="#" id="loadData">Click This Link To Load My Favorite Movies</a>
</div>
-->
<script type="text/javascript">
$(document).ready(function() {
$("#loadData").change(function() {
lukupname=$('#loadData').val();
$(this).text("...One Moment Please...");
$("#container").append('<div id="favoriteMovies"></div>')
.children("#favoriteMovies").hide()
.load("AtheOtherPage2.php ul#favoriteMovies", {'myname':lukupname}, function() {
$("#loadData").remove();
$("#favoriteMovies").show(); //.slideDown("slow");
});
return false;
});
});
</script>
</body>
</html>
Code: Select all
<?php
$name=$_POST['myname'];
?>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>Movie Titles</title>
</head>
<body>
<ul id="favoriteMovies">
<li style="font-weight: bold; list-style-type: none;">My Favorite Movies</li><br>
<?php echo "<li>".$name."</li>\n"; ?>
<li>Contact</li>
<li>Shawshank Redemption</li>
<li>Napoleon Dynamite</li>
<li>Back To The Future</li>
<li>The Goonies</li>
<li>Cinderella Man</li>
<li>Apollo 13</li>
</ul>
</body>
</html>