Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kristian Terziev
28,449 PointsjQuery
Hello,
This is my jQuery function:
$.post(\'page.php\', {
include : id //We set the id to be passed to the page here
}, function(result){
$(\'#emptyDiv\').text(result);
});
This changes the content of the div here:
<div id="out_info">
<div><p><?php if(isset($_POST['include'])){ include('../upload/info/' . $_POST['include'] . '.txt');} ?></p></div>
<div id="emptyDiv"></div>
</div>
the problem is that the content is strange it outputs part of my websites code in form of a text like so:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-language" content="bg" />
<link rel="stylesheet" type="text/css" href="../css/normalize.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
.....AND so on.
i get the sense that the result variable in the function is evalueted to that code somehow but i don't know why.
Kristian Terziev
28,449 PointsThese are two separate files
page.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-language" content="bg" />
<link rel="stylesheet" type="text/css" href="../css/normalize.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/responsive.css">
<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value;
}
</script>
</head>
<body>
<nav>
<div id="sider">
<ul id="nav">
<li><a href="../index.html"><img src="../img/home.gif" height="45px "></a></li>
<li><a href="#"><img src="../img/location.gif" height="45px "></a></li>
<li><a href=""><img src="../img/phone.gif" height="45px "></a></li>
<li><a href="../contact.html"><img src="../img/msg.gif" height="45px "></a></li>
<li><a href="../upload/add.html"><img src="../img/settings.gif" height="45px "></a></li>
</ul>
</div>
</nav>
<div id="headerWhiteBorder">
<header>
<label id="header_title"><h1>Fast Track</h1></label>
</header>
</div>
<div id="white"></div>
<div class="content">
<div id="menuDropDown">
<select name="formal" onchange="javascript:handleSelect(this)">
<option value="../index.html" selected="selected">??????</option>
<option value="#">??????????</option>
<option value="#">?????????</option>
<option value="../contact.html">????????</option>
<option value="../upload/add.html">??????? ?? ?????</option> ?
</select>
</div>
<?php include ("output.php"); ?>
<img id="image_ID" width="384px">
<iframe id="iframge_ID" src="" width="384" height="288" frameborder="0" style="border:0"></iframe>
<div id="controls">
<a href="../3dplugin/3dpage.html"><img src="3d.png"></a>
</div>
<div id="out_info">
<div><p><?php if(isset($_POST['include'])){ include('../upload/info/' . $_POST['include'] . '.txt');} ?></p></div>
<div id="emptyDiv"></div>
</div>
<footer>
<div id="footerinfo">
<a href="#"><img src="../img/facebook-wrap.png"></a>
<a href="#"><img src="../img/twitter-wrap.png"></a>
</div>
<small id ="copy">© Copyright 2014</small>
</footer>
</div>
</body>
</html>
and this is the other: output.php
<?php
$content ='<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").on("click", "div", function(e){
var $name = $(this).find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
var id = $(this).data(\'id\');
$.post(\'page.php\', {
id : id //We set the id to be passed to the page here
}, function(result) {
$(\'#image_ID\').attr(\'src\', \'../upload/images/\'+id+\'.jpg\');
});
$.post(\'page.php\', {
include : id //We set the id to be passed to the page here
}, function(result){
$(\'#emptyDiv\').append(result);
});
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$(\'#searchid\').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
.searchBar{
width:500px;
margin:0 auto;
}
#searchid
{
width:500px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:500px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:15px;
height:50px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
@media screen and (max-width: 660px){
.searchBar{
width: 80%;
}
#searchid{
width:100%;
}
}
</style>
<div class="searchBar">
<input type="text" class="search" id="searchid" placeholder="???????" /> <br />
<div id="result"></div>
</div>';
$pre = 1;
include("html.inc");
?>
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsSo you're sending the ajax request to the same page that you're on, "page.php" This is a full html page which is why that is what is being sent back to your #emptyDiv
You should have a dedicated script that is responsible for retrieving the content associated with the 'id' that was clicked on. Perhaps call it "search_result.php"
You should post your 'id' to that page. Then inside that script you can output whatever html you need to go inside your div.
You have the following in page.php:
<div id="out_info">
<div><p><?php if(isset($_POST['include'])){ include('../upload/info/' . $_POST['include'] . '.txt');} ?></p></div>
<div id="emptyDiv"></div>
</div>
Is the second line there what you want the output to be once an id is clicked on? If so then that should go into "search_result.php".
I would just leave the "out_info" div empty.
<div id="out_info">
</div>
Then the output from "search_result.php" will be placed inside this div.
You'll want to update your ajax request:
$.post(\'search_result.php\', {
include : id //We set the id to be passed to the page here
}, function(result){
$(\'#out_info\').html(result);
});
I updated the url of where the request will be sent. Also, updated the selector for where the results will go and changed from the .text() method to the .html() method.
See how far you can get with that and give us an update if you get stuck.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Kristian,
Are you sending the request to the same page that you're on? What file is your jQuery function in? If I remember from your other post I thought "page.php" was the page you were showing the search results.
The result that is returned is the output from that script. So if "page.php" is a full html page then that might explain why you're getting a full html page back.