1

I have the following working sample application that display typing text in a terminal window:

Step 1 - working sample which has no problem (3 files in one folder: index.php, style.css and typed-custom.js)

I have the following content for style.css:

 .terminal-window {
  text-align: left;
  width: 620px;
  height: 650px;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.terminal-window section.terminal {
  color: white;
  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
  font-size: 11pt;
  background: black;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0;
  overflow: auto;
}
.term-home{color: #0095ff;}

I have the following content for typed-custom.js

$(function() {
  var data = [

  {
    action: 'type',
    strings: ["typing-1:"],
    output: '<span class="green"><small> This is first typing</small></span>&nbsp;',
    postDelay: 1000,
  },

  {
    action: 'type',
    strings: ["typing-2:"],
    output: '<span class="green"><small>This is second typing</small></span>&nbsp;',
    postDelay: 1000
  },

  ];
  runScripts(data, 0);
});

function runScripts(data, pos) {
    var prompt = $('.prompt'),
        script = data[pos];
    if(script.clear === true) {
      $('.history').html('');
    }
    switch(script.action) {
        case 'type':
          // cleanup for next execution
          prompt.removeData();
          $('.typed-cursor').text('');
          prompt.typed({
            strings: script.strings,
            typeSpeed: 10,
            callback: function() {
              var history = $('.history').html();
              history = history ? [history] : [];
              history.push('<span class="term-home">root:~$</span> ' + prompt.text());
              if(script.output) {
                history.push(script.output);
                prompt.html('');
                $('.history').html(history.join('<br>'));
              }
              // scroll to bottom of screen
              $('section.terminal').scrollTop($('section.terminal').height());
              // Run next script
              pos++;
              if(pos < data.length) {
                setTimeout(function() {
                  runScripts(data, pos);
                                  }, script.postDelay || 1000);
              }
            }
          });
          break;
        case 'view':

          break;
    }
}

//Note: `typed-custom.js` depends on the library from `https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js` which I have included in index.php:

For displaying, I have the following content for index.php

<?php
?>
<!doctype html>
<html lang="en">
<head>

    <title>Test load (load.php)</title>
    <!-- Get jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
    <script src="typed-custom.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>

<body>

    <!-- terminal -->
    <div class="wrap">
        <div class="title-head"> <h5><font color="white">Test</font></h5></div>
        <div class="type-wrap">
            <div class="terminal-window">
                <header>
                    <div class="button green"></div>
                    <div class="button yellow"></div>
                    <div class="button red"></div>
                    <div class="button black"></div>
                </header>
               <section class="terminal">
                    <div class="history"></div>
                    <span class="term-home">root:~$</span>&nbsp;<span class="prompt"></span>
                    <span class="typed-cursor"></span>
                </section>
            <!-- data -->
    </div>
    </div>
    </div>
</body>
</html>

The above is working perfectly with no error.

Step 2 - the problem when loaded external php load.php file into index.php

but now I want to add another display from a php page, so I created a php file call load.php with the following content:

<!DOCTYPE html>
<html>
<head>
<title>load.php show data</title>
 <style>
        .loadData div {display:none;}
        .loadData div.display {display: block;}
 </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="loadData">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
</div>

<a href="#" id="loadMore">Load More</a>

<script>
// this code is used to reduce long div display. example 5 div, reduce it to 3 and when click Load More, it will show all.
$(function () {
    $(".loadData div").slice(0, 3).addClass('display');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".loadData div:hidden").addClass('display');
        if ($(".loadData div:hidden").length == 0) {
           $("#loadMore").remove();
        } else {
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
        }
    });
});

</script>
</body>
</html>

Then, I updated my index.php just to load the file load.php at the bottom like this:

index.php

<?php
?>
<!doctype html>
<html lang="en">
<head>

    <title>Test Terminal with another php file load at the bottom (load.php)</title>
    <!-- Get jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
    <script src="typed-custom.js"></script>
    <link href="style.css" rel="stylesheet" />
    <style>
        <!-- internal style -->
    </style>
</head>

<body>

    <!-- terminal -->
    <div class="wrap">
        <div class="title-head"> <h5><font color="white">Test</font></h5></div>
        <div class="type-wrap">
            <div class="terminal-window">
                <header>
                    <div class="button green"></div>
                    <div class="button yellow"></div>
                    <div class="button red"></div>
                    <div class="button black"></div>
                </header>
               <section class="terminal">
                    <div class="history"></div>
                    <span class="term-home">root:~$</span>&nbsp;<span class="prompt"></span>
                    <span class="typed-cursor"></span>
                </section>
            <!-- data -->
    </div>
    </div>
    </div>
    
<!-- NEW CODE HERE WHICH HAS ERROR: try to load an external file using js -->
<div class="container"></div>
<div> This index.php loads "load.php" below</div>
<div id="contents"></div>
<div> ----------------------- </div>
<script>
 $().ready(function() {
        $("#contents").load("load.php");

 });
</script>
</body>
</html>

but, when I run the above code, I got an error saying:

typed-custom.js:39 Uncaught TypeError: prompt.typed is not a function
    at runScripts (typed-custom.js:39)
    at typed-custom.js:57

and my terminal window stopped typing for the 2nd text (which I suspect is js conflict) but there is no problem clicking the 'Load More' button which also uses js to call.

Error screenshot: This is the error in visual

I searched this error and it said that I might have jquery conflict, but I'm not sure which part is the conflict. Any idea?

Improve this question
13
  • 1
    Please try and reduce the amount of code you have in your question. It can be useful to show how you got to the current problem, but for most questions it is only relevant to show the current code needed to reproduce the error. Commented Jun 15, 2020 at 6:58
  • My aim is for somebody to run this working sample with great visual. I will check, and try to reduce it. Commented Jun 15, 2020 at 6:59
  • Hi, I have reduced the code, and the problem starts in step 2. the step 1 is only for demonstration a working sample application. Commented Jun 15, 2020 at 7:20
  • There is a problem with typed-custom.js so where is the code from this file? Commented Jun 15, 2020 at 7:25
  • 1
    "it still breaks the js because the problem is the load.php has js."...not sure what you mean. You'd have to give specific details of error messages etc. Like I said, load.php doesn't need to add another copy of jQuery - have you removed it? Commented Jun 15, 2020 at 8:17

1 Answer 1

Reset to default
1

If load.php is intended to be inserted within index.php then it should not have its own html, head and body tags. It should just be a fragment of HTML which is going to be injected into the main page. Loading a whole new separate HTML document (as denoted by the html/head/body tags) inside another HTML document doesn't make any sense.

Also...you're just adding "load.php" to the page as soon as index.php has finished loading. Instead you can just include it via PHP's include command - that way it's sent to the browser at the same time as index.php and doesn't need to be fetched separately. That would be more efficient and less error-prone.

And load.php doesn't need to add another copy of jQuery, so you can remove that - it can cause conflicts or unexpected behaviour. The browser sees both files as being part of a single page, so it only needs a single copy of jQuery.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.