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

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

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

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

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.

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

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.

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

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

As I suspected it made it ureadable

Only text.

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

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.

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

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

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

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

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