Load mysql query after pageload

Question

I have a few queries that are quite big, i only want queries to run them once the page has finished loading.

This is what i have tried.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            $("#query").load("sql-query.php");
        });
    </script>
</head>

<div id="query">Loading...</div>

sql-query.php

$data = DB::table('tapplicant')->limit(5000)->get();
var_dump($data);

The idea is to return the query data once the page has loaded.

@Amani , im new to Javascript and Ajax, how would i do that or could you refer me to some documentation, thanks for the help — xTRIFAC70Rx, Oct 11 '17 at 12:55
I re-built your case and I got this error : `TypeError: a.indexOf is not a function` so your problem is the jquery version .. you can no longer use `$(window).load(function() {});` use `$(window).on("load", function (e) {})` instead --> please see:https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed — Amani Ben Azzouz, Oct 11 '17 at 13:09

score 2 · Answer 1 · answered Oct 11 '17 at 13:05

2

I recommend using jQuery.get() after the document.ready()

 $( document ).ready(function() {
     $.get( "sql-query.php", function( data ) {
         $( "#query" ).html( data );
     });
 });

answered Oct 11 '17 at 13:05

Hamza Abdaoui

2,029
4
23
36

thank you, this work if i call a html file, but not php file – xTRIFAC70Rx Oct 11 '17 at 13:11

score 2 · Accepted Answer · answered Oct 11 '17 at 13:08

Version mismatch "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        /*
        $( window ).load(function() {
          $("#query").load("sql-query.php");
        });         
        */
        $(window).on('load', function(){ 
            $("#query").load("sql-query.php");
        });
    </script>
</head>

<div id="query">Loading...</div>

Suggest you to use document ready function (i.e $(function()) instead of window onload document.ready vs window

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#query").load("sql-query.php");
        });
    </script>
</head>

<div id="query">Loading...</div>

score 0 · Answer 3 · answered Oct 11 '17 at 13:17

0

This is due to some changes made in this JQuery version ..

Just change

$(window).load(function() {});
to

$(window).on("load", function (e) {}); and keep the rest as it is.

Please refer to this for more details.

answered Oct 11 '17 at 13:17

Amani Ben Azzouz

2,477
3
15
26

Load mysql query after pageload

3 Answers3