Retrieve the javascript code from a different page using Ajax and xmlHttp.open

Question

Retrieve the javascript code from a different page using Ajax and xmlHttp.open

I have a JSP page called DEMO1.jsp where I've implemented AJAX code to refresh every minute. In DEMO1.JSP, the code snippet looks like this:

<head>

    <script type='text/javascript'>
        setInterval(function(){
            document.getElementById('bgframe').contentWindow.myInternalFunction();
        }, 5*1000);

    </script>
</head>
<body onload="AutoRefreshValid();"  style="margin:1px;font-family: Serif, Arial, Times, serif;" id="ValidWaybills"><center>

    <iframe id='bgframe' style='display:none;' src='DEMO2.jsp'></iframe>

    <script type="text/javascript">
        function AutoRefreshValid(){
            var xmlHttp;
            try{
                xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
            }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){
                        alert("No AJAX");
                        return false;
                    }
                }
            }

            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4){
                    document.getElementById('ValidWaybills1Valid').innerHTML=xmlHttp.responseText;
                    setTimeout('AutoRefreshValid()',5*1000);
                }
            }

            xmlHttp.open("GET","DEMO2.jsp",true);
            xmlHttp.send(null);



        }
    </script>
    <div  id="ValidWaybills1Valid">

    </div>

In DEMO2.JSP, I've written JavaScript code that needs to run using AJAX in DEMO1.jsp without reloading the page every 5 seconds. Here is the code from DEMO2.jsp:

<head>


    <script type="text/javascript">
        function callme3(){

        <%  Date d1 = new Date();
        %>
                alert("Date is          <%=d1%>");
            }
    </script>
</head>
<body onload="callme3()">



</div>

Thank you and regards, Sudarshan

javascript ajax google-maps google-maps-markers

Answer 1

Answer №1

An XML Http Request is responsible for sending and retrieving data, but not for executing the retrieved data.

Below is a simplistic solution to your issue, although it is not recommended:

xmlHttp.open("GET", "SU3.jsp", true);
xmlHttp.onload = function(evt) {
  var div = document.createElement('div');
  div.innerHTML = evt.target.responseText;
  document.body.appendChild(div);
};
xmlHttp.send(null);

This code will cause the browser to crash after an extended period of time.

The correct approach is to have SU3.jsp return data in JSON or plain HTML format and handle all logic in SU2.jsp.

Based on the most recent information provided (which should ideally be included from the initial version), the solution is straightforward and effective.

In Su2.jsp, add the following code:

// assuming 'map' refers to the map object.
// Using jQuery for clarity, but using XMLHttpRequest directly is also acceptable.

var timer = null;

function updateMarker() {

  $.get('su3.jsp', function(data) {
    for (var i = 0; i < data.length; i++) {
      var datum = data[i];
      new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(datum.pos.lat, datum.pos.lng),
        title: datum.title
      });
    }
    // After all tasks are completed, set a timeout for the next update.
    // Use setTimeout() instead of setInterval() to accommodate network latency.
    timer = setTimeout(updateMaker, 5000);
  });

}

// This should be called within the onLoad() handler.
updateMaker();

In SU3.jsp, ensure that the data is output using Content-Type: application/json, displaying marker information like so:

[{"pos":{"lat":-25.363882,"lng":131.044922},"title":"Australia"}]

Answer 2

An XML Http Request is responsible for sending and retrieving data, but not for executing the retrieved data.

Below is a simplistic solution to your issue, although it is not recommended:

xmlHttp.open("GET", "SU3.jsp", true);
xmlHttp.onload = function(evt) {
  var div = document.createElement('div');
  div.innerHTML = evt.target.responseText;
  document.body.appendChild(div);
};
xmlHttp.send(null);

This code will cause the browser to crash after an extended period of time.

The correct approach is to have SU3.jsp return data in JSON or plain HTML format and handle all logic in SU2.jsp.

Based on the most recent information provided (which should ideally be included from the initial version), the solution is straightforward and effective.

In Su2.jsp, add the following code:

// assuming 'map' refers to the map object.
// Using jQuery for clarity, but using XMLHttpRequest directly is also acceptable.

var timer = null;

function updateMarker() {

  $.get('su3.jsp', function(data) {
    for (var i = 0; i < data.length; i++) {
      var datum = data[i];
      new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(datum.pos.lat, datum.pos.lng),
        title: datum.title
      });
    }
    // After all tasks are completed, set a timeout for the next update.
    // Use setTimeout() instead of setInterval() to accommodate network latency.
    timer = setTimeout(updateMaker, 5000);
  });

}

// This should be called within the onLoad() handler.
updateMaker();

In SU3.jsp, ensure that the data is output using Content-Type: application/json, displaying marker information like so:

[{"pos":{"lat":-25.363882,"lng":131.044922},"title":"Australia"}]

Answer 3

Answer №2

To run javascript from SU3.jsp, consider using a hidden iframe in SU2.jsp to call it.

Include the following JavaScript/Markup code in SU2.jsp

<html>
<head>
  <script type='text/javascript'>

    setInterval(function(){
        document.getElementById('bgframe').contentWindow.location.reload();
    },60000); // refresh every 60 seconds

  </script>
</head>
<body>
    <iframe id='bgframe' style='display:none;' src='SU3.jsp'></iframe>
</body>
</html>

Keep in mind that if SU3.jsp needs access to functions/variables within its parent (SU2.jsp), you should use window.parent. More details can be found here

If you simply need to execute a JavaScript function within SU3.jsp every 60 seconds, you can achieve this with the following code:

document.getElementById('bgframe').contentWindow.myInternalFunction();

setInterval(function(){
    document.getElementById('bgframe').contentWindow.myInternalFunction();
}, 60000);

Answer 4

To run javascript from SU3.jsp, consider using a hidden iframe in SU2.jsp to call it.

Include the following JavaScript/Markup code in SU2.jsp

<html>
<head>
  <script type='text/javascript'>

    setInterval(function(){
        document.getElementById('bgframe').contentWindow.location.reload();
    },60000); // refresh every 60 seconds

  </script>
</head>
<body>
    <iframe id='bgframe' style='display:none;' src='SU3.jsp'></iframe>
</body>
</html>

Keep in mind that if SU3.jsp needs access to functions/variables within its parent (SU2.jsp), you should use window.parent. More details can be found here

If you simply need to execute a JavaScript function within SU3.jsp every 60 seconds, you can achieve this with the following code:

document.getElementById('bgframe').contentWindow.myInternalFunction();

setInterval(function(){
    document.getElementById('bgframe').contentWindow.myInternalFunction();
}, 60000);

Retrieve the javascript code from a different page using Ajax and xmlHttp.open

Answer №1

Answer №2

Similar questions

Developing a universally accessible variable for utilization in various functions

What is the best method to extract the values of objects in an array that share

What is the best way to delete a container when its child element includes a specific string?

Having trouble getting JavaScript validation to function properly

I keep encountering a 404 error page not found whenever I try to use the useRouter function. What could

Managing the Navigation Bar

Displaying a PDF in a new browser tab using JavaScript after retrieving data with cURL

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

JavaScript code snippet to remove a specific element from an array and store it in an object

Updating Page Content with JQuery AJAX Post Without Page Reload

Tips for displaying unformatted text using HTML

Steps for establishing a one-to-many relationship in my comment database table

Is it possible to read a file with a different dynamically generated name each time in Cypress?

Creating a worldwide directive using AngularJS

Getting the unique identifier of a newly generated object using AJAX post request

Clearing a textarea in jQuery that is populated with text

Guide to creating a personalized matcher in Jasmine

Tips for dynamically adding divs inside a parent div until its width and height are fully utilized

Best practices for distinguishing between template and style for mobile and desktop in Angular 2 components

Triumph with AJAX and jQuery, yet nothing altered