Pull working PHP file (with scripts) into div using JavaScript without iframes

Question

Working within system constraints, I needed a way to put working code from a local .php or .html into a target div without additional libraries, jfiddle, iframes, etc. (jquery was fine)

Here are my failed attempts.

First part of file

<a href="#" id="fruit"> This is some page!</a>
<script>$("#fruit").click(function(){Expand01("fruit.php"); return false;});</script>

<a href="#" id="orange"> A pretty good page...</a>
<script>$("#orange").click(function(){Expand01("orange.php"); return false;});</script>

<a href="#" id="tomato"> I like this page</a>
<script>$("#tomato").click(function(){Expand01("tomato.php"); return false;});</script>

Later in file (after Expand01 function declared)

<div id="thisdiv"></div>

Attempt 1

<script> function Expand01(targetUrl){  
    document.getElementById('thisdiv').style.display = "block";
    document.getElementById('thisdiv').innerHTML = targetUrl;
    document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script>

Attempt 2

<script> function Expand01(targetUrl){
    var myTargetUrl = new XMLHttpRequest();
    document.getElementById('thisdiv').style.display = "block";
    myTargetUrl.open("GET", targetUrl, true);
    myTargetUrl.setRequestHeader("Content-Type","text/plain");
    myTargetUrl.send("");
    document.getElementById('thisdiv').innerHTML = myTargetUrl.responseText;
    document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script>

Attempt 3

<script> function Expand01(targetUrl){
    document.getElementById('thisdiv').innerHTML = $.get(targetURL);
} </script>

Attempt 4

<script> function Expand01(targetUrl){
    var myFile = getHTTPObject();
    myFile.onreadystatechange = function() {
        if(request.readyState == 4) {
            if(myFile.status == 200 || request.status == 304) {
                var targetDiv = document.getElementById('thisdiv');
                targetDiv.innerHTML = myFile.responseText;
            } else {
                alert("Failure");
            }
        }
    }
    myFile.open("GET", targetUrl, true);
    myFile.send(null);
} </script>

"I've tried several different methods" — Such as? "that haven't worked." — What went wrong? — Quentin
– Quentin, Commented Feb 11, 2015 at 17:19
ajax.. put the php file on your serve and call it in with ajax and then just append it to the div.. If you give an example of your current html, js, and php I can write you up an answer — w3bMak3r
– w3bMak3r, Commented Feb 11, 2015 at 17:22
@Quentin I tried just dropping the file directly into innerhtml of my target div, but turns out javascript won't run. I've tried using XMLHttpRequest()'s responseText to put into the innerHTML, but it comes back blank (I'm using my own .php page as a test for it, and it displays just fine, by trying to pull it via XMLHttpRequest and responseText it doesn't work). I found out Iframes and adding new js libraries are disallowed on the server I'm working with. I've also tried various incendiaries, and although they relieved my frustration, they did not actually fix the problem. — lilHar
– lilHar, Commented Feb 11, 2015 at 17:43
Scripts added to the page -do- run. I think you should go back and check your process and keep an eye on the error console. AJAX is pretty much THE way to do what you're talking about, it isn't novel or difficult at all. The most likely pitfall is cross-origin problems, which it doesn't sound like you're dealing with (hard to say). — Chris Baker
– Chris Baker, Commented Feb 11, 2015 at 17:58
Realized I forgot to remove the "/markup" line in wrxsti's code. Fixed that, and it worked great! Thanks, wrxsti! — lilHar
– lilHar, Commented Feb 11, 2015 at 19:18

wrxsti · Accepted Answer · 2015-02-11 17:53:34Z

1

This is the method I use when doing this for ajax applications. It also allows for the usage of $_SESSION[] variables as well as any Javascript or jQuery located in the php file you are pulling into your container.

jQuery:

$.post('pageloader.php', {url: 'path/to/file.php'}, function(data){
    var o = $.parseJSON(data);
    if(o.status == 1){
        $('#yourContainer').html(o.markup);
    } else {
        alert(o.message);
    }
});

PHP: (pageloader.php)

$url = $_POST['url'];
$response = array();

ob_start();
include("markup/" . $url); // Replace or remove '"markup/" . ' depending on file locations  
$response['markup'] = ob_get_clean();

if($response['markup']){
    $response['status'] = 1;
} else {
    $response['status'] = 0;
    $response['message'] = 'There was an issue loading the page.';
}

echo json_encode($response);

Hope this helps!

edited Feb 11, 2015 at 17:53

answered Feb 11, 2015 at 17:46

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pull working PHP file (with scripts) into div using JavaScript without iframes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related