CODEWITHSUNDEEP
phpjavascriptgetelementbyid
Ambrose
Ambrose

Reputation: 163

getElementById is sometimes null. Already tried .onload and .ready

I have some code where I am displaying content from html, xml or txt files within a new window. I am having an issue where getElementById is sometimes returning null. It generally seems to work in Chrome, but IE8 and especially Firefox is very unstable.

More specifically it will not work once I am trying to display the txt files.

I have already tried to add the (in my case) newWindow.onload = function(){ ... and the $(newWindow.document).ready(function() { ... Although, since I am new to javascript and php I might have done it wrong.

Below is the relevant code:

Javascript:

function newWindow(pathname, type){

    var newWindow = window.open("newWindow.php");

    $.ajax({
            type: "post",
            url: "windowHelper.php",
            data: {pathname: pathname, type: type},
            dataType: "json"
    })
    .done(function(data, textStatus, jqXHR){  //tried to add the .onload and .ready here

            newWindow.document.getElementById("newWindow").innerHTML = data.data1;

     })
    .fail(function(jqXHR, textStatus, errorThrown){

            newWindow.document.getElementById("newWindow").innerHTML = textStatus + errorThrown;
    });
}

php:

        if(isset($_POST["pathname"]) && !empty($_POST["pathname"]) && isset($_POST["type"]) && !empty($_POST["type"])){

            $pathname = $_POST["pathname"];
            $type = $_POST["type"];
            $filename = str_replace("/var/tmp/ciscat/", "", $pathname);

                    if($type == 'html'){
                            $contentString = str_replace("<html>", "", file_get_contents($pathname));
                            $contentString = str_replace("</html>", "", file_get_contents($pathname));
                            $contentString = str_replace("<body>", "", file_get_contents($pathname));
                            $contentString = str_replace("</body>", "", file_get_contents($pathname));
                            }
                    else if($type == 'xml'){

                            $contentString = htmlspecialchars(file_get_contents($pathname), ENT_QUOTES);
                    }
                    else if($type == 'txt'){
                            $contentString = str_replace("\n", "<br/ >", file_get_contents($pathname));
                    }
                    else{
                            $contentString = "Blir feeeeel!!";
                    }

            $reportContent = "<p class = 'normalText'>Content of the file: $filename. Download the file in order to utilise the full content. </p> $contentString";
            print json_encode(array( "data1" => $reportContent));
    }

HTML:

<!DOCTYPE html>

<html>
<head>

<SCRIPT type="javascript/text" src="functions.js"></SCRIPT>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id = "newWindow">
</div>

</body>
</html>

Does anyone have any additional ideas that I can try? Any help would be much appreciated! :)

I suspect that there might be a bit of "bad" code here, some comments on that would ofc also be nice, but my main issue is the evul getElementById.

Thank you in advance

Upvotes: 1

Views: 218

Answers (3)

Ambrose
Ambrose

Reputation: 163

Well, since I wasn't able to get anything else to work, including .onload and .ready (these two broke other things instead) I decided to do a bit of an "ugly" fix for my problem.

The tags, such as the newWindow don't have time to load before my Javascript, and the getElementById(""newWindow) therefore returns null, as the ID does not exist yet.

What I did was to add a timer that waits for 0,5 seconds before posting into the new window, making sure that it has time to load. This works, but it is not a good answer as it may fail at times when the new window loads very slowly (I suspect). However, it does work, and in lack of better options, this is what I will do.

Except for the timer I also changed the order of my tags in the HTML-document and changed the variable names to make sure that no two things are named the same. These did not fix my issue, but it is good praxis.

The new JS-code:

function openNewWindow(pathname, type){
    /*newWindow has to be defined here*/
    var popWindow = window.open("newWindow.php");


    $.ajax({
            type: "post",
            url: "windowHelper.php",
            data: {pathname: pathname, type: type},
            dataType: "json"
    })
    .done(function(data, textStatus, jqXHR){

            setTimeout(function() {

            popWindow.document.getElementById("newWindowDiv").innerHTML = data.data1;

            }, 500);
     })
    .fail(function(jqXHR, textStatus, errorThrown){

            setTimeout(function() {

            popWindow.document.getElementById("newWindowDiv").innerHTML = textStatus + errorThrown;

            }, 500);

});
}

Upvotes: 0

Barrie Reader
Barrie Reader

Reputation: 10713

[edited]

I guess you could try wrapping $.ajax() like so (jQuery should still be added first though ^_^):

$.ajax({
    type: "post",
    url: "windowHelper.php",
    data: {pathname: pathname, type: type},
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
        newWindow.document.getElementById("newWindow").innerHTML = data.data1;
    },
    error: function(data, textStatus, errorThrown) {
        newWindow.document.getElementById("newWindow").innerHTML = textStatus + errorThrown;
    }
})

Upvotes: 1

Rajat Modi
Rajat Modi

Reputation: 1343

add jQuery first,

instead of this 

 newWindow.document.getElementById("newWindow").innerHTML = data.data1;

can you use this one

 $("#newWindow").html(data.data1);

hope this helps.

Upvotes: 0

Related Questions