0

I have the following code that dosn't work very well and wondered what I was doing wrong. Sometimes it dosn't run under localhost, sometimes I get extra slashes at the beginning which increase in number.

If anybody can put me right that would be great.

index.html

<html>
<head>
</head>
<body>
    <div>Main Body</div>
    <div>URL Params: <span class="body-value"></span></div>
    <div class="ajax"></div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $('.body-value').text(window.location.search);

            var url_search = '?test=2';
            var r = /[^\/]*$/;
            var url_base = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + url_search;
            var url_ajax = (window.location.protocol + "//" + window.location.host + "/" + window.location.pathname).replace(r, '') + 'ajax.html' + url_search;

            //window.history.pushState(new Date(),'',url_base);
            $('.ajax').load(url_ajax);

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

ajax.html

<div>Ajax</div>
<div>URL Params: <span class="ajax-value"></span></div>

<a href="#" class="ajax-change" data-value="3">Change test to 3</a>
<a href="#" class="ajax-change" data-value="4">Change test to 4</a>

<script type="text/javascript">
    $(document).ready(function(){
        $('.ajax-value').text(this.location.search);

        $('.ajax-change').click(function(evt){
            evt.preventDefault();

            var numb = $(this).data('value');

            var url_search = '?test=' + numb;
            var r = /[^\/]*$/;
            var url_base = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + url_search;
            var url_ajax = (window.location.protocol + "//" + window.location.host + "/" + window.location.pathname).replace(r, '') + 'ajax.html' + url_search;

            window.history.pushState(new Date(),'',url_base);
            $('.ajax').load(url_ajax);

        })

    });
</script>

Thanks for any help

Stephen Brown
  • 564
  • 1
  • 9
  • 23
  • There may be a confusion of concepts here. You call a document via AJaX but you do nothing with the data provided by this call. Maybe reading a bit more about AJaX would help? http://stackoverflow.com/questions/1510011/how-does-ajax-work – Marc Compte Dec 01 '16 at 14:09
  • I display the test data, this is just a test case for a bigger project. – Stephen Brown Dec 01 '16 at 14:19
  • What test data? how do you display it? where? In index.html after the `$('.ajax').load(url_ajax);` there is nothing we can see. It makes the call, gets the result and does nothing with it. What are you trying to accomplish? what "does not work" mean? and "sometimes"? Do you get an error in the Javascript console? – Marc Compte Dec 01 '16 at 14:24

0 Answers0