CODEWITHSUNDEEP
javascriptjqueryajax
BleuBizarre
BleuBizarre

Reputation: 378

Handling script loading when loading page through Ajax

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.

Upvotes: 1

Views: 220

Answers (1)

CoderLee
CoderLee

Reputation: 3479

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.

Upvotes: 1

Related Questions