Codeigniter pagination with jQuery

Question

I have been stuck on this problem for days and am about the crack... I have no idea what I'm doing wrong or where I should look for help.

I have a search page that allows users to filter the results by a number of categories.

This is the view:

<form method="post" id="search_form" name="search_form">
 <input type='hidden' id='seeking_gender_id' value='<?php echo $profile->gender_id ?>'/>

 <div id='sidebar_wrapper'>
  <div id='sidebar'>
   <div class="slider_header">
    Country
   </div>
   <div class="slider_content">
    <select id="country_dropdown" name="country_dropdown">
    <?php
     if($countries->num_rows() > 0)
     {
      foreach($countries->result() as $row)
      {
       $selected = ($row->country_id == $profile->country_id ? "selected='yes'" : "");
       echo "<option value='" . $row->country_id . "' "  . $selected . ">" . $row->country ."</option>";
      }
     }
    ?>
    </select>
   </div>
   <div class="slider_header">
    Region
   </div>
   <div class="slider_content">
    <select id='region_dropdown' name='region_dropdown'>
     <option value="0">All regions</option>
     <?php
      if($regions->num_rows() > 0)
      {
       foreach($regions->result() as $row)
       {
        $selected = ($row->region_id == $profile->region_id ? "selected='yes'" : "");
        echo "<option value='" . $row->region_id . "' "  . $selected . ">" . $row->region ."</option>";
       }
      }
     ?>
    </select>
   </div>
   <div class="slider_header">
    Gender
   </div>
   <div class="slider_content">
    <?php
     $male_checked = ($profile->seeking_gender_id == 1 ? "checked='yes'" : "");
     $female_checked = ($profile->seeking_gender_id == 2 ? "checked='yes'" : "");
    ?>
    <input id='male_checkbox' type="checkbox" name="genders" <?php echo $male_checked ?> value="1" />
    Male
    <br/>
    <input id='female_checkbox' type="checkbox" name="genders" <?php echo $female_checked ?>  value="2" />
    Female
   </div>
   <div class="slider_header">
    Age
   </div>
   <div class="slider_content">
    Between 
    <input id="min_age" type="text" maxlength="2" style="width: 35px" value='<?php echo $profile->min_age ?>'/>
    and
    <input id="max_age" type="text" maxlength="2" style="width: 35px" value='<?php echo $profile->max_age ?>'/>
   </div>
   <input id='profile_search_button' type='button' value='Search'></input>
  </div>
  <div id='sidebar_content'>
   <div id='content_header'>
    Search
    <div id='profiles_found' style='float: right'>0</div>
   </div>
   <div id='search_results'></div>
  </div>
  <div id='sidebar_footer'></div>
 </div>
</form>

So when the "profile_search_button" is clicked, the following jQuery code is run:

    $("#profile_search_button").click(function()
 {
  $('#search_results').hide();

  $.post("http://localhost/index.php/search/search_database",
  function(data)
  { $('#search_results').html(data);
   $('#search_results').slideDown('slow');
  });
 });

That function calls the following PHP function:

public function search_database()
{
// HOW AM I MEANT TO GET THE VALUES OF THE FORM FILTERS? eg: country_id, region_id etc

$this->load->library('Jquery_pagination');

$config['base_url'] = site_url('search/blahh/');
$config['total_rows'] = 100;
$config['per_page'] = '10';
$config['div'] = '#search_results';

$this->jquery_pagination->initialize($config);
echo $this->jquery_pagination->create_links();
}

The code above works... I just have no idea how to read the values of the filters from the "search_database" PHP function.

I have been working off this example, but that's all I can seem to find:

http://tohin.wordpress.com/2008/10/07/codeigniter-ajax-pagination-exampleguideline/

Anyone able to help?

Answer 1

Got it working guys. Just a few silly mistakes. Had to serialise the form data instead of sending it as a JSON object

$("#profile_search_button").click(function()
{
    $('#search_results').hide();

    $.post("http://localhost/index.php/search/search_database",  serialize_form(),
    function(data)
    {
        $('#search_results').html(data);
        $('#search_results').slideDown('slow');
    });
 });

And turns out that the 'additional_param' was working after all.

Answer 2

Use the 'data' section of $.post.

http://api.jquery.com/jQuery.post/

$.ajax({
  type: 'POST',
  url: url,
  data: { $('#form_field').val() },
  etc.