How can I make content open when clicked?

Y

yischyk2019-07-06 17:10:36

AJAX

yischyk, 2019-07-06 17:10:36

<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
  
<body>  
      
    <p>Какую страницу желаете открыть?</p>  
    <form>  
        <input id="btn1" type="button" value="Страница 1">   
        <input id="btn2" type="button" value="Страница 2">  
    </form>  
    <div id="content"></div>  
      
    <script>  
        $(document).ready(function(){  
          
            $('#btn1').click(function(){  
                $.ajax({  
                    url: "geography.php",  
                    cache: true,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
            $('#btn2').click(function(){  
                $.ajax({  
                    url: "page2.php",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
        });  
    </script>

there is such a code. Demo a0316623.xsph.ru/test.php
when you click on the button, the content is loaded without reloading the store.
but it reboots only after the second button press, why?
(I have charts from chartist there)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Zhuk, 2019-07-06
@yischyk

but it restarts only after the second button press

In fact, the content loads successfully the first time the button is clicked, but when rendering, an error occurs in JS:
All because you return a response to an AJAX request, which is not only executable code (which in itself not safe), it also contains a link to an external JS library, which naturally does not have time to load on time and everything crashes.
It is correct to keep the implementation of application functions in the main scripts loaded along with the page, and only return data from the server via AJAX, for example, in JSON.