Jump to content


Do Javascript function after ajax_list finished

ajax javascript initialize function

  • Please log in to reply
8 replies to this topic

#1 Racing Chocobo

Racing Chocobo

    Member

  • Members
  • PipPip
  • 28 posts

Posted 29 November 2013 - 01:53 PM

Hi all, I've some problem to the current grocery crud,

I realize that all of the data in the flexigrid table is fetched by ajax_list

which means any function after $(document).ready() will not work at all.

 

Therefore I go through the javascript function that called the ajax list, and add and extra function that will called my function in my view page.

 

(The javacript file is flexigrid.js, inside a $('.filtering_form').submit(function(){ .... }); )

 

However, this will be restricted to the function need to be named the same as what I named in the view page.

 

May the latest function can add a new implement function that let the user to self define a function that need to be implement after the ajax function finished (the success callback) ?

 

Many thanks for it!
Thank you very much



#2 Amit Shah

Amit Shah

    grocery CRUD Master

  • Advanced Member
  • PipPipPip
  • 1,192 posts
  • LocationMumbai, India

Posted 30 November 2013 - 09:49 AM

Hi Racing Chocobo

 

Well there ain't a direct way of doing it.. but if you are interested, i can share you one of the solutions i applied / added

 

in Grocery_CRUD.php,

 

under

class Grocery_CRUD extends grocery_CRUD_States
........

//Add the variable to accept the callbacks as an array
protected $post_ajax_callbacks                    = array();


..................
//in the same class - add some place a function
    public function post_ajax_callbacks($callback) {
        $this->post_ajax_callbacks[] = $callback;
    }

................................
then under the following function
protected function showList($ajax = false, $state_info = null)
..........
//add the following line
$data->post_ajax_callbacks     = $this->post_ajax_callbacks;        //This avails the list of callbacks

Now in the assets/grocery_crud/themes/flexigrid/js/flexigrid.js

//Under the following code
var ajax_list_info_url = $(this).attr('data-ajax-list-info-url');

        $(this).ajaxSubmit({
........
                 this_form.ajaxSubmit({
                     success:    function(data){
                        this_form.closest('.flexigrid').find('.ajax_list').html(data);
                        call_fancybox();
                        execPostListCallbacks();      //Add this line here - this will ensure a callback to the functions that are registered to be called post ajax list.

in the list_template.php    ... add the following code

	var callback_queue = new Array();
	<?php if(isset($post_ajax_callbacks) && count($post_ajax_callbacks) > 0) { 
		foreach($post_ajax_callbacks as $callback) {
	?>
	callback_queue.push("<?php echo $callback?>");
	<?php 
		}
	} ?>

	function execPostListCallbacks() {
		for(i=0; i < callback_queue.length; i++) {
			console.log("Making a callback to - " + callback_queue[i]);
			var fn = eval(callback_queue[i]);
			fn;
		}
	}

Now in your controller - when u need to call back a function .. u can write it into a js file and add that file using $crud->set_js

//Example  - assets/scripts/callback.js
function print_message() {
	console.log("Yes i got called in");
	alert("This is a test callback");
}

//Now in the controller
......
$crud->set_js('assets/scripts/callback.js');      // here i add / include the js file where the function to be called is in....
$crud->post_ajax_callbacks('print_message()');      // Here i register the function to be called back... 

Now - this is not restrcited / limited to a single call.. you can register such - multiple calls and avail the benefit from the same

 

 

Happy GCing :)



#3 MD Rahat Islam Khan

MD Rahat Islam Khan

    Member

  • Members
  • PipPip
  • 13 posts

Posted 15 March 2014 - 09:09 AM

it doesn't work...



#4 Amit Shah

Amit Shah

    grocery CRUD Master

  • Advanced Member
  • PipPipPip
  • 1,192 posts
  • LocationMumbai, India

Posted 16 March 2014 - 06:41 AM

well it works for me perfectly.. wht error do you get as such? can u update? - check in firebug for the same.. there may be a minor glitch which can be fixed.. but this is quite possible. I have tested it and it works in smooth!!



#5 MD Rahat Islam Khan

MD Rahat Islam Khan

    Member

  • Members
  • PipPip
  • 13 posts

Posted 18 March 2014 - 10:35 AM

it works at last..thanks a lot bro...



#6 Amit Shah

Amit Shah

    grocery CRUD Master

  • Advanced Member
  • PipPipPip
  • 1,192 posts
  • LocationMumbai, India

Posted 18 March 2014 - 12:26 PM

Most welcome .. happy GCing :)



#7 bluepicaso

bluepicaso

    Member

  • Members
  • PipPip
  • 21 posts
  • LocationIndia

Posted 13 May 2014 - 08:07 AM

works like a charm, awesome hack


Harpreet Singh Bhatia
[web developer, programmer, entrepreneur]
Portfolio: TheCodingBox


Follow Me: facebook.png twitter.png googleplus.pngskype.png


#8 asaraf

asaraf

    Newbie

  • Members
  • Pip
  • 1 posts
  • Locationindia

Posted 10 July 2015 - 12:31 PM

great. thanks



#9 jacksun

jacksun

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 10 October 2016 - 12:20 PM

Hi Racing Chocobo

 

Well there ain't a direct way of doing it.. but if you are interested, i can share you one of the solutions i applied / added

 

in Grocery_CRUD.php,

 

under

class Grocery_CRUD extends grocery_CRUD_States
........

//Add the variable to accept the callbacks as an array
protected $post_ajax_callbacks                    = array();


..................
//in the same class - add some place a function
    public function post_ajax_callbacks($callback) {
        $this->post_ajax_callbacks[] = $callback;
    }

................................
then under the following function
protected function showList($ajax = false, $state_info = null)
..........
//add the following line
$data->post_ajax_callbacks     = $this->post_ajax_callbacks;        //This avails the list of callbacks

Now in the assets/grocery_crud/themes/flexigrid/js/flexigrid.js

//Under the following code
var ajax_list_info_url = $(this).attr('data-ajax-list-info-url');

        $(this).ajaxSubmit({
........
                 this_form.ajaxSubmit({
                     success:    function(data){
                        this_form.closest('.flexigrid').find('.ajax_list').html(data);
                        call_fancybox();
                        execPostListCallbacks();      //Add this line here - this will ensure a callback to the functions that are registered to be called post ajax list.

in the list_template.php    ... add the following code

	var callback_queue = new Array();
	<?php if(isset($post_ajax_callbacks) && count($post_ajax_callbacks) > 0) { 
		foreach($post_ajax_callbacks as $callback) {
	?>
	callback_queue.push("<?php echo $callback?>");
	<?php 
		}
	} ?>

	function execPostListCallbacks() {
		for(i=0; i < callback_queue.length; i++) {
			console.log("Making a callback to - " + callback_queue[i]);
			var fn = eval(callback_queue[i]);
			fn;
		}
	}

Now in your controller - when u need to call back a function .. u can write it into a js file and add that file using $crud->set_js

//Example  - assets/scripts/callback.js
function print_message() {
	console.log("Yes i got called in");
	alert("This is a test callback");
}

//Now in the controller
......
$crud->set_js('assets/scripts/callback.js');      // here i add / include the js file where the function to be called is in....
$crud->post_ajax_callbacks('print_message()');      // Here i register the function to be called back... 

Now - this is not restrcited / limited to a single call.. you can register such - multiple calls and avail the benefit from the same

 

 

Happy GCing :)

I can't get this to work. I've done it all checked it twice but still doesn't work. It issues no error but the do_the_sum() function doesn't print the HTML code. Everything else looks in place.







Also tagged with one or more of these keywords: ajax, javascript, initialize, function

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users