Edwin Slattery Edwin Slattery - 5 months ago 55
Javascript Question

Codeigniter pagination with jQuery

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

Use the 'data' section of $.post.

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

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