[Plugin: WP-Table Reloaded] How to Refresh table without refreshing whole page.

Hi Tobias,

Thanks, It always feel great to get response from the creator.

Well, I manage to make it work like this. Pl. comment if any improvement can be done.

$(document).ready(function(){
       $('.content1').bind('click', function(e){
         getContent('http://www.oyetweet.com/WP_prod/wp-content/plugins/autocompleter/values.php?tbl=1');
         event.preventDefault();
       });

                    function getContent(filename)
                    {
                        $.ajax({
                            url: filename,
                            type: 'GET',
                            dataType: 'html',
                            beforeSend: function() {
                                $('.wp-table-reloaded, .wp-table-reloaded-id-2').html('<img src="http://www.jquery4u.com/images/loading.gif" />');
                            },
                            success: function(data, textStatus, xhr) {
                                    $('.wp-table-reloaded, .wp-table-reloaded-id-2').html(data);
                            },
                            error: function(xhr, textStatus, errorThrown) {
                                $('.wp-table-reloaded, .wp-table-reloaded-id-2').html(textStatus);
                            }
                        });
                    }

     });

and in value.php I called these three functions.

if (($status = tony_update_wp_table_reload_cols_with_fb_opengraph(2)) !== FALSE){
  $status = tony_wp_table_reloaded_refresh(2);
  echo do_shortcode( '[table id=2 /]');
  } else {
  echo "Some issue, please refresh whole page.";
  }

Not sure on how expensive this could be or any other better way to achieve this but now it works.

Hi Tobias,

I tried this way but having one small issue,

Added in function.php

add_action('wp_ajax_my_action_wp_table_reload', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action_wp_table_reload', 'my_action_callback');

function my_action_callback() {
	global $wpdb; // this is how you get access to the database
	$whatever = intval( $_POST['whatever'] );
	//$whatever += 10;
  //echo $whatever;
if (($status = tony_update_wp_table_reload_cols_with_fb_opengraph($whatever)) !== FALSE){
  $status = tony_wp_table_reloaded_refresh($whatever);
  echo do_shortcode( '[table id=' . $whatever . ' /]');
  } else {
  echo "Some issue, please refresh whole page.";
  }
	die(); // this is required to return a proper result
}

and on the front0-end site, I added this in header template.

add_action('wp_head', 'prefix_ajax_add_foobar');

 function prefix_ajax_add_foobar() {
 ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

$('.content1').bind('click', function(e){
//event.preventDefault();
	var data = {
		action: 'my_action_wp_table_reload',
		whatever: 2
	};
  alert('Got this from the server system: ' + MyAjax.ajaxurl);
	// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
	$.post(MyAjax.ajaxurl, data, function(response) {
		alert('Got this from the server system: ' + response);
	});
  });
});
</script>
<?php
}

All seems to work nice and I do receive $response variable in alert, but instead of getting full html output of table’s shortcode , I just receive the string “[table id=2 /]” in $response.

Do I need to add “require_once($path.’/wp-config.php’);” in function my_action_callback() to make do_shortcode work ? Anything else am I missing ?

Hi,

Perfect, Works like a charm. Thanks.

Just one query, would it be expensive to add this controller file and initialize the class in every ajax callback functions ?

Cheers,
-Tony

Thanks.

Case closed.

🙂