Warning: file_exists(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www/devblog/wp-content/uploads/2023/05) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2036

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www/devblog/wp-content/uploads/2023) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www/devblog/wp-content/uploads) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www/devblog/wp-content) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www/devblog) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH/www) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002/sc63337-VMNH) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c/sub002) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage/home107c) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/mounted-storage) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: is_dir(): open_basedir restriction in effect. File(/) is not within the allowed path(s): (/home/www/zoon.dk/:/tmp/domains/6aa/zoon.dk/:/usr/share/php_binaries/include/) in /home/www/zoon.dk/wp-includes/functions.php on line 2047

Warning: Cannot modify header information - headers already sent by (output started at /home/www/zoon.dk/wp-includes/functions.php:2036) in /home/www/zoon.dk/wp-content/plugins/wordpress-mobile-pack/inc/class-wmp-cookie.php on line 50
Load data into table using JQuery and AJAX | CODExperiments Populate a table using AJAX and JQuery

Load data into table using JQuery and AJAX

Time for a small JQuery post, which I’m sure some people will find useful. Now, first off, I don’t use JQuery on a regularly basic – so some things might be done quicker/better. I can only say that it works for me 🙂

The code presented will be using JQuery 1.7.2, but should also work with 1.8.x!

This example will load a JSON file once a button on the page is clicked! The request will be using AJAX. I’ve inserted some comments into the code, so it should be easy to understand.

var globalgrid;
function loadgrid()
{
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'ajaxdemo.json',
    success: function(griddata)
    {
  	  globalgrid = griddata.lines;

      // remove all data - but the headers!
      $("#gridtable").find("tr:gt(0)").remove();

      if( globalgrid.length === 0)
      {
           $('#errormsg').html('Sorry, no rows returned!');
           return;
      }

      for( var i=0; i < globalgrid.length; i++ )
      {
         var line = globalgrid[i];
         // insert after last row! (yes! it *can* be done differently - but it works!)
         $('#gridtable > tbody:last').append(''+line.d1+''+line.d2+''+line.d3+''+line.d4+'');
      }
    },
    error: function(data, errorText)
    {
      $("#errormsg").html(errorText).show();
    }
  });                     
}   

The reason I save the data from the request in globalgrid is it is easier to debug later on (open the console in Chrome and type “globalgrid;” and you will know what I mean!)

I made a small example ready to run here. You are free to use the code 😉 If you find it usefull, drop me a line 😉


6 Responses to “Load data into table using JQuery and AJAX”

Leave a Reply

You must be logged in to post a comment.