Wednesday, February 26, 2014

How To Add Multiple DISQUS Threads On Same Page Using Codeigniter ?

Recently, I came around a problem with the Disqus comment system while I needed multiple disqus comment threads on one page. I have solved my problem using following method.

You can add multiple or several disqus threads on same page using little trick. You can read about reset method in Using Disqus on AJAX sites

Let's start with the control set for loading the Disqus module in a form of a "show comments" link below each individual post that would point to some function outside and pass all the necessary attributes for loading Disqus for the first time or resetting it with new parameters if it was already loaded.

We need disqus_identifier that tells Disqus how to uniquely identify the current page and disqus_url that tells Disqus the location of the page for permalinking purposes.

<div class="wrapper-1">
<a onclick="loadDisqus(jQuery(this), 'upcoming', '<?php echo base_url()."#!upcomingEvents"; ?>');">
Show comments</a>
</div>

<div class="wrapper-2">
<a onclick="loadDisqus(jQuery(this), 'future', '<?php echo base_url()."#!futureTrends"; ?>');">
Show comments</a>
</div>

Armed with the controls, let's create a generic outside function that seals the deal. Put that in a file somewhere, in the page header or anywhere you like.
<script type="text/javascript">
var disqus_shortname = 'your-sites-short-name-in-disqus';
var disqus_identifier;
var disqus_url;

function loadDisqus(source, identifier, url) {

if (window.DISQUS) {
   jQuery('#disqus_thread').insertAfter(source);
   /** if Disqus exists, call it's reset method with new parameters **/

    DISQUS.reset({
  reload: true,
  config: function () { 
   this.page.identifier = identifier.toString();    //important to convert it to string
   this.page.url = url;
  }
 });
} else {
//insert a wrapper in HTML after the relevant "show comments" link

   jQuery('<div id="disqus_thread"></div>').insertAfter(source);
   disqus_identifier = identifier; //set the identifier argument
   disqus_url = url; //set the permalink argument
   //append the Disqus embed script to HTML
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
   jQuery('head').append(dsq);
}
};
</script>
While using DISQUS.reset method, you must follow following requirements
Both variables this.page.identifier and this.page.URL
Full hashbang #!

Source: http://mystrd.at/articles/multiple-disqus-threads-on-one-page/
http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

Wednesday, February 19, 2014

How To Use Callback Function In Ignited Datatables ?

I did some research on jQuery datatables wrapper [IgnitedDatatables] and made it working on a project to load huge data. One problem where i stuck was how to use callback function on edit columns. After several hours of try, i fixed it. Below is the solution on how i fixed it.

This post is not about how to use Ignited Datatables. I assume that you have working Ignited Datatables .

This example is taken from https://github.com/n1crack/IgnitedDatatables-php-library/blob/master/examples/callback_functions/ajax.php
$this->datatables->select('customer_id, first_name, last_name, email')
->from('customer')
->add_column('edit', 'Edit', 'customer_id')
->add_column('delete', 'Delete', 'customer_id')
->edit_column('email', '$1', strtolower('email')) // php functions
->edit_column('email', '$1', $this->custom_email('email'))  // custom functions
->edit_column('first_name', '$1', $this->fix_first_name('first_name'));

echo $this->datatables->generate();
// Callback Functions
function custom_email($val)
{
  return substr($val, 0, 3) . '..' . strstr($val, "@");
}


function fix_first_name($val)
{
  return ucwords(strtolower($val));
}

How to use callback function properly in an ignited datatables is shown below.

The above solution (custom edit_column callback function ) will not work for example, if you want to check the status of the user and want to display active or inactive status instead of 1 or 0.

I just want to tell you that you have to put callback functions in the Codeigniter helper file and not in the same controller. A CodeIgniter helper file is a PHP file with multiple functions. It is not a class.
To make it work. you have to load the helper file ($this->load->helper('My_datatable_helper')) before $this->datatables->generate() method.

Do remember that callbacks are made inside a library file which of course has no direct access to which controller uses it. Therefore, it is much easier or actually, just possible (from a library point of view) to use helpers instead for their callbacks.
/* Controller */

$this->load->helper('My_datatable_helper');  //load before generate function
->edit_column('status', '$1', 'check_status($status)')  // custom callback functions
echo $this->datatables->generate();
The controller has check_status($status) callback function to display ACTIVE OR INACTIVE depending on status (0 or 1 in the mysql database). In order to achieve that, you need to create a Codeigniter helper file and save this to 'application/helpers/' directory. I created 'MY_datatable_helper.php' and place a function inside. The check_status function checks the status variable and return Active, it is 1 otherwise Inactive. Below is the helper file:
/* MY_datatable_helper.php*/

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/** 
*  edit_column callback function in Codeigniter (Ignited Datatables)
*
* Grabs a value from the edit_column field for the specified field so you can
* return the desired value.  
*
* @access   public
* @return   mixed
*/

if ( ! function_exists('check_status'))
{
    function check_status($status = '')
    {
        return ($status == 1) ? 'Active' : 'Inactive';
    }   
}

/* End of file MY_datatable_helper.php */
/* Location: ./application/helpers/MY_datatable_helper.php */  

All credit goes to codeigniter Ignited-Datatables library. You can download the library from https://github.com/IgnitedDatatables/Ignited-Datatables

Monday, February 17, 2014

How To Get All Files Of Directory-Subdirectories as Dropdown List Using Codeigniter?

I have a folders inside a view directory. Some of the folders contains files and some other contains another subfolder with its file. What I want is list list all the files of folders and subfolders inside a view directory.

I found a the Directory Helper in Codeigniter. It contains functions that assist in working with directories. I used following function (recursive method) to create a drop-down list with files inside a view directory.
<?php
$this->load->helper('directory'); //load directory helper
$dir = APPPATH. "views/your_folder/";
$map = directory_map($dir);
echo "<select name='yourfiles'>";

function show_dir_files($in,$path) { foreach ($in as $k => $v) { if (!is_array($v)) {?> <option><?php echo $path,$v ?></option> <?php } else { print_dir($v,$path.$k.DIRECTORY_SEPARATOR); } } } show_dir_files($map,''); // call the function echo "</select>"; ?>

Friday, February 14, 2014

How To Dynamically Set Select Option Selected Using Jquery?

I have a select field with some options in it and want to select a specific option of a select tag dynamically:
The select List as follows:
<select id="my_val">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

You can solve the above problem using following small piece of jquery function.
 $(document).on('change', '#my_val', function(e) { 
 
     e.preventDefault();
     var option_val = $("#my_val").val(); //store the dynamic value of select option
      $( "#my_val" ).find( 'option[value="' + option_val + '"]' ).prop( "selected", true ); //Set select option 'Selected'
                                   
});
There may be many other possible solutions. Above one worked best for me.