Handling script loading when loading page through Ajax

Question

Is there a way to handle scripts loading through Ajax page calls? I would like to not load those already loaded in the first place by the base page as they are in conflict.

Is the solution to create multiple pages one for the normal call (with the scripts) one for the ajax ones (without the scripts that are duplicates)?

Example:

base_page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

  <div id="ajax_page"> </div>

  <div id="other_ajax_call"> </div>
  <div id="second_result"> </div>

  </script>
    $(document).ready(function(){
      $.ajax({
        url: '/ajax_page',
        type: 'GET',
        success: function (result) {
          $('#ajax_page').html(result)
        }
      });
    });


    $( "#other_ajax_call" ).on( 'click', function() {
      $.ajax({
        url: '/another_page',
        type: 'GET',
        success: function (result) {
          $('#second_result').html(result)
        }
      });
    });

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

ajax_page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

  <div id="ajax_second_page"> </div>

  </script>
    $(document).ready(function(){
      $.ajax({
        url: '/a_third_page',
        type: 'GET',
        success: function (result) {
          $('#ajax_second_page').html(result)
        }
      });
    });

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

In this example, on the 'base_page' I load through Ajax 'ajax_page' that itself is using Ajax (this page is usually called without Ajax and therefore will need to keep the script).

The problem is that when this is done, the jquery scripts are in conflict and the second ajax call of the 'base_page' (for "#other_ajax_call") is not working and I receive the following exception :

Uncaught TypeError: $.ajax is not a function

This is a repost of Ajax call - Loading page script only if not there in the base page that was closed as I first didn't put enough details and my question was not clear enough and I have no way to reopen it.

It's not clear how this logic is working to begin with, as your provided code is importing slim versions of jQuery, which typically do not include the ajax method. — Taplar
– Taplar, Commented Feb 27, 2020 at 18:21
But related to the question, when pulling in pages with ajax, you should not be pulling in a complete page (<html>...</html>) but it should be pulling in a fragment of a page that will be placed on the pre-existing page. Loading an <html> inside another <html> is invalid markup. — Taplar
– Taplar, Commented Feb 27, 2020 at 18:23
Ok so the best way to do it would be having a "body" that both pages load through Ajax ? — BleuBizarre
– BleuBizarre, Commented Feb 27, 2020 at 18:32
Whatever is the smallest fragment of a page body that needs to be loaded to the existing page body. If you load a new <body>, you would replace the existing body with that content, making sure to not have a <body><body></body></body> — Taplar
– Taplar, Commented Feb 27, 2020 at 18:32

CoderLee · Accepted Answer · 2020-02-27 18:48:57Z

1

Since you are getting the full pages anyway it doesn't make sense to do that with ajax, especially when it breaks proper HTML. What you could do is to use an iframe to display your pages, and then manage them with some simple javascript in the parent document.

For example:

<!-- iframe for one of your pages -->
<iframe id="page-foo-iframe"
    title="page foo"
    width="100%"
    height="100%"
    src="/a_third_page">
</iframe>

<script>
    /*
    * You can have a button, or something else, call these functions
    * whenever you need to show/hide a page.
    */
    function showIframePage(id) {
      let page = document.getElementById(id);
      page.style.display = "block";
    }

    function hideIframePage(id) {
      let page = document.getElementById(id);
      page.style.display = "none";
    }
</script>

I would also suggest that you look into using a framework, in particular the JS ones like Vue/React/Angular, because they will make handling things like this a lot simpler and easier to maintain. If you have to load full documents though, iframes are the best way to do that.

edited Feb 27, 2020 at 18:48

answered Feb 27, 2020 at 18:46

CoderLee

3,5298 gold badges36 silver badges68 bronze badges

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

1 Comment

BleuBizarre Over a year ago

Thank you very much

Collectives™ on Stack Overflow

Handling script loading when loading page through Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related