Page not loading when using jQuery and AJAX - Jquery ajax

DanielDavis
May 6, 2020
119 views
1 vote
2 Answers

When this function is ran, results.php does not get loaded. I have tested to see if the function itself is even called, and it is (as “hello1” gets alerted). However, for some reason, the contents of results.php are not getting loaded into the correct section.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function loadTable(){
    alert("hello1");
    $("#results_page").load("results.php");
}
</script>
<div id="results_page"></div>

Here are the contents of results.php. (I used an alert("Hello2") to check if it gets loaded, and hello2 does not get alerted so I am assuming the page does not get loaded.

<html>
<script type="text/javascript">
alert("hello2");
</script>
</html>

It thus seems the issue lies with the following statement in wedding.php (the original document)

$("#results_page").load("results.php");

Any ideas?

EDIT:

loadTable() gets called in a seperate function which too is loaded. Here is a more detailed version of what the main program (wedding.php) looks like.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#form_details").load('form.php');
});
function loadTable(){
    alert($("#results_page").length);
    $("#results_page").load("results.php");
}

</script>
<div id="form_details"></div>
<div id="results_page"></div>

So upon execution, form.php gets loaded. This file contains a form which gets filled in. Once the form is submitted, a function called load() gets called which calls loadTable().
Here is what form.php looks like.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function load(){
    alert("hello");
    loadTable();
}

form.php also contains a form, however to keep things concise I have not included it.

When testing, hello gets alerted, and therefore i believe load() is correctly executed. Hello1 also gets alerted, and therefore i believe loadTable() is correctly executed

Answers

add run of function loadTable() like this:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function loadTable(){
     alert("hello1");
     $("#results_page").load("results.php");
  }
</script>
<div id="results_page"></div>
<script type="text/javascript">
  loadTable();
</script>

EDIT:

file: index.php:

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function loadTable(){
         alert("hello1");
         $("#results_page").load("results.php");
      }

      $(document).ready(function(){
         loadTable();
      });        
    </script>
  </head>
  <body>
    <div id="results_page"></div>
 </body>
</html>

file results.php:

<html>
<script type="text/javascript">
alert("hello2");
</script>
</html>

All worked fine.

alert(“hell1”) -> alerted

alert(“hello2”) -> alerted

EDIT: Try #2.

I have created what I think is a replica. Three html pages.

main.html – On page load, loads form.html

form.html – Click the button and it calls main.html function loadResult()

result.html – has the result info

main.html

<html>
<head>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function loadResult(){
        console.log("loading result");
        $("#resultPage").load("result.html");
    }

    function loadForm(){
        console.log("loading form");
        $("#formPage").load("form.html");
    }

    $(document).ready(function () {
        loadForm();
    });
</script>

</head>
<body>

<h1>MAIN PAGE</h1>

<div id="formPage"></div>

<div id="resultPage"></div>

</body>
</html>

form.html

<html>
<head>

<script type="text/javascript">
    function submitForm() {
        console.log("calling loadResult on main page");
        loadResult();
    }
</script>

</head>
<body>

<h1>FORM PAGE</h1>

<form onsubmit="submitForm(); return false;">
<input type="submit"/>
</form>

</body>
</html>

result.html

<html>
<head>
<script type="text/javascript">
console.log("inside result page");
</script>
</head>

<body>
<h1>RESULT PAGE</h1>
<i>The Result</i>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Page not loading when using jQuery and AJAX – Jquery ajax

Answers