Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

jQuery

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.

Hi 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.

These 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">&#169; 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="???????" />&nbsp; &nbsp;<br /> 
<div id="result"></div>
</div>';


$pre = 1;
include("html.inc");
?>

1 Answer

So 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.