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

JavaScript

Posted by Kristian Terziev
Kristian Terziev
28,449 Points

PhP include and jQuery

Hello,

What I am trying to do is to change the value of include() with jQuery.

This is my Html with the PhP code:

<div id="out_info">
                <div><p><?php include('../upload/info/1.txt'); ?></p></div>
</div>

And this is the Jquery fnction where id like to change the include ().

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\');
    });
});

Now my goal is to change this include() dynamically like i did with the image src attribute. my files are saved as id.txt so i want the include value to be something like this: ../upload/info/id.txt //where id is variable changed with jQuery.

Thanks in advance to anyone who can help me.

7 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Ok, so jQuery isn't what is going to be changing your value, instead the post variable that $.post is sending the server is what is going to be changing your include value. So what you need to do change your $.post to this:

    $.post(\'page.php\', {
    include : id  //We set the id to be passed to the page here
    }

By changing the first "id" to "include" you will give your $_POST variable a constant name that you can reference in you PHP. Next change your PHP to this:

<div id="out_info">
                <div><p><?php include('../upload/info/' . $_POST['include'] . 'txt'); ?></p></div>
</div>

This will dynamically include the file that matches the value sent to the server by the $.post call. Then for the success function of the $.post append the information sent from the server to the html document:

function(result){
    $("#some-empty-div").append(result);
}
Kristian Terziev
Kristian Terziev
28,449 Points

Thanks for the fast answer.

I did what you said 

$.post(\'page.php\', {
    include : id  //We set the id to be passed to the page here
    }, function(result){
        $("#emptyDiv").append(result);
    });

and the html

<div id="out_info">
    <div><p><?php include('../upload/info/' . $_POST['include'] . 'txt'); ?></p></div>
    <div id="emptyDiv"></div>
</div>

now the problem I get is this :

Notice: Undefined index: include in C:\xampp\htdocs\mapProject\output\page.php on line 54

Warning: include(../upload/info/txt): failed to open stream: No such file or directory in C:\xampp\htdocs\mapProject\output\page.php on line 54

Warning: include(): Failed opening '../upload/info/txt' for inclusion (include_path='.;C:\xampp\php\PEAR') in C:\xampp\htdocs\mapProject\output\page.php on line 54

now I do understand that at first start of the page I don't have value for the id but the same error occurs even when I chose item and the id is set to a value. I also notice that my page gets doubled strangely. I'm not sure how to upload screenshot but my header gets doubled down the page and most of other elements too.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Simple fix:

<div><p><?php if(isset($_POST['include'])){ include('../upload/info/' . $_POST['include'] . 'txt');} ?></p></div>

isset() will check to see if the $_POST['include'] exists and is not null. So when the page loads the first time you won't get the undefined index warning.

Kristian Terziev
Kristian Terziev
28,449 Points

Thanks fixed the error. The problem with the page is still here tough. The content of the emptyDiv div is filled with copy of my html code for some reason.

When I inspect the code in chrome it looks something like this 

<div id="emptyDiv">
   <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>
</div>

I pasted part of it in order to make it readable but it putts the full page not only the head.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Can you post the code that is in one of the the txt files? I suspect that the code is working fine, but you are getting unintended result because of the content in the txt files.

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Sure. Here is the content of one of the files:

?????????? ?? ?????????? ????? ? ??????? ? ???-?????????? ? ???????? ????????, ??????? ??????? ?? ??????????? "??????". ?????????? ?? ? ????? 15 ?????, ? ?? ?????? ??????, ?????????? ?? ?????? - 10.5?. ?????????? ? ???????? ???? 1954 ??????. ???????? ?? ?? ??????????? ????? ??????, ????? ????????, ???? ?????????? ? ??????????? ????? ??????????, ??????? ??????, ????? ???????? ? ?????????? ??????. ???????? ? ?? ???? ?? ???????? ?? ??????? - "?????????", ???????? ??? "???? ?? ??????????????". ?????????? ? ? ?????????????? ??????? ?? ????????? ?? ?????????????? ?? ??????? ?? ???????? ???????????. ?????????? ???????? ???????? ??????, ?????? ???????? ???????? "??????" (???-41) ? ????? ??????. ?? ?????????? ? ????????? ?????????, ? ?????? ??? ??? ????? "????? ?? ???????????? ???????? ????? ?????????????".

(its in bulgarian)

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

is the file only text or is there html in it as well?

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

As I suspected it made it ureadable

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Only text.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

try explicitly setting the datatype in the $.post call:

$.post('\page.php', { include : id }, function(result){
        $("#emptyDiv").append(result);
    }, 'text');
Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

you need to remove the backslash inside the single quotes of your url like this:

$.post('\page.php', { include : id }, function(result){
        $("#emptyDiv").append(result);
    }, 'text');

instead of this:

$.post(\'page.php\',

Right now you are escaping the single quote.

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Strangely the problem remains the div's content isn't even converted to text it's still html code.

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

I don't have backslash inside the url: $.post(\'page.php\' ,

the backslashes are for escaping the single quotes as I am saving this as string in $content variable.

The problem isn't in this part as i have other function that does roughly the same thing but for an image:

$.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\');
    });

and it works with no problem.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Without seeing your code as a whole I don't think I can help much more.

Kristian Terziev
Kristian Terziev
28,449 Points

Is there an easy way to share it with you or I should paste it in the forum?

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

By the way. My jquery is not in the <head>. Can this be the problem?