AJAX Autoreload instead of onclick, how?

Question

I have on my index page this code snippet, based on this tutorial: https://blog.kulturbanause.de/2012/12/inhalte-per-ajax-jquery-nachladen/ But it is needed, that the "source.php" is loaded automatically directly after the code in the snippet is loaded, and while the content of the index.php is showned. I tried with a set TimeOut function, but wasn't succesfull. How to modify the function?

    <body  id="body">
        <div id="target"><!DOCTYPE HTML>
            <div id="Ladeanimation">
                <img id="Ladeanimation-1" src="pics/favicon.ico" alt="Webseitenlogo">
                <input type="radio" name="color" id="box" checked /><label for="box"></label>
                <ul class="Ladepunkte">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
                <p id="Ladeanimation-2">
                    Diese Webseite nutzt JavaScript. Bitte aktiviere JavaScript in deinem Browser, um zur Webseite zu gelangen.
                </p>
            </div>
            <script>
                (function($) {
                    setTimeout(function() {
                    $("#Ladeanimation").fadeOut(500);
                    }, 7500);
                    })(jQuery);
            </script>



                <div id="Warnmeldung" class="foo">
                    <p id="Warnmeldung-1">
                        Versetze dein Gerät, oder dessen Viewport, bitte in ein Breitbildformat. 
                    </p>
                    <p id="Warnmeldung-2">
                        (mindestens 5:4/maximal 22,5:9) 
                    </p>

                </div>
                <script>
                    document.addEventListener("DOMContentLoaded", checkDimensions);
                    window.addEventListener('resize', checkDimensions);
                    function checkDimensions() {
                            // http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
                            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                            var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                      var ratio = w/h;
                      // console.log(ratio); // check your browser console

                      if (ratio >= 1.25 & ratio <= 2.5) {
                            // fade out
                        document.querySelector('.foo').style.zIndex = -500;
                        document.querySelector('.foo').fadeOut(500);
                      }
                      else {
                            // fade in
                        document.querySelector('.foo').style.zIndex = 500;
                      }
                    }
                </script>



            <div id="Hintergrundfarbe">

            </div>
        </div>
        <p>

          <button onclick="kb_source_2_target()">Hier klicken</button>
        </p>
        <script src="jquery.js" type="text/javascript"></script> 
        <script>
            function kb_source_2_target() {
                $.get('source.php', function(data) {
                    $('#target').html(data);    
                })
            }
        </script>**strong text**
        <script src="shariff.min.js"></script>
    </body>
</html>

that is, I left the whole header, because otherwise I had to ride more text, because of the text/code-ratio — QuackBrick, May 16 '17 at 07:15
That's good. You should not include more then needed. But there is still one on the second line that does not belong there. — Ivar, May 16 '17 at 07:16

Ilario Engler · Answer 1 · 2017-05-16T07:23:17.447

1

Just call it in the script ;)

<script>

    function kb_source_2_target() {
        $.get('source.php', function(data) {
            $('#target').html(data);    
        })
    }

    kb_source_2_target();

</script>

Do not write your javascript directly in html. Move all your JavaScript Code to another file and include it like this at the bottom of your html page.

<script src="main.js"></script>

Maybe this helps...

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="jquery"></script>
    <script src="yourfile"></script>
  </body>
</html>

edited May 16 '17 at 07:23

answered May 16 '17 at 07:14

Ilario Engler

2,419
2
27
40

@Ivar It is for readability and organizing your code, at least for large websites. Most websites are large anyway so it is a good practice to place your js code in separate files, and call them like Ilario Engler suggests. – almost a beginner May 16 '17 at 07:23

AJAX Autoreload instead of onclick, how?

1 Answers1