I’m piggybacking off of this post in hopes that someone can help me out,
I’m pretty much doing the same, with a few exceptions. 1) I’m using a combination of PHP (CodeIgniter), JQuery & Ajax when rendering my tables. 2) Users submit a query, which then calls to a .js file which returns the results to table.
The problem (I think) I’m encountering is that since my table and its contents are rendered dynamically, I cannot get your example to work. While everything renders, when clicking on a checkbox, it doesn’t remove that corresponding table row.
My code is below, with “Do it here?” where I think it should go?
Any and all assistance is greatly appreciated!
Search.php (main page that the results are shown on):
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').jqTransform();
$(".suggest a").fancybox();
$(".go a").fancybox();
//DO IT HERE???
$('#eventRecords').dataTable();
$(':checkbox[name="rendering_filter"]').click(function() {
var filter = '',
regexFilter = true,
smartFilter = false;
filter = $('[name="' + this.name + '"]:checked').map(function () {
return this.value;
}).toArray().join('|');
$('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});
});
</script>
</head>
</head>
<body class="inner-page">
<div class="wrapper">
<!-- Shell -->
<div class="shell">
<!-- Header -->
<div id="header">
<h1 id="inner-logo"><?php echo anchor('public_home/index', Null);?></h1>
<!-- Top Menu -->
<div class="top-menu">
<ul class="social">
<li class="facebook"><a href="#">facebook</a></li>
<li class="twitter"><a href="#">twitter</a></li>
<li class="youtube"><a href="#">youtube</a></li>
</ul>
<ul>
<li class="mycart"><?php echo anchor('public_pop/openCart', 'my cart');?></li>
<li class="myaccount"><?php echo anchor('public_pop/openAcct', 'my account');?></li>
</ul>
</div>
<!-- end Top Menu -->
<div class="cl"> </div>
</div>
<!-- end Header -->
<!-- Main -->
<div id="main" class="search-page">
<div class="search-left">
<!-- Search Box -->
<div class="search-box">
<div class="search-box-b">
<div class="search-box-t">
<span class="red-mark"></span>
<h3>REFINE RESULTS</h3>
<form action="" method="post">
<div class="form-box">
<p class="title">EVENT TYPE:</p>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Sports" checked="checked"/><label>Sports</label>
</div>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Theater" checked="checked"/><label>Theater</label>
</div>
<div class="cl"> </div>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Lift Tickets" checked="checked"/><label>Lift Tickets</label>
</div>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Activities" checked="checked"/><label>Activities</label>
</div>
<div class="cl"> </div>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Concerts" checked="checked"/><label>Concerts</label>
</div>
<div class="check-field">
<input type="checkbox" name="rendering_filter" value="Other" checked="checked"/><label>Other</label>
</div>
<div class="cl"> </div>
</div>
<div class="form-box">
<p class="title">DATES:</p>
<input type="text" class="date blink" name="" value="begin date" title="begin date" id="from" />
<a class="date-picker" href="#"></a>
<div class="cl"> </div>
<input type="text" class="date blink" name="" value="end date" title="end date" id="to" />
<a class="date-picker" href="#"></a>
<div class="cl"> </div>
</div>
<!-- <div class="form-box">
<p class="title">EVENT NAME:</p>
<?php
$events_options = array();
foreach($events as $event){
$events_options[$event->event_id]=$event->event_name;
}
echo "<td>" . form_dropdown('pTicketEvent', $events_options, null, 'id="pTicketEvent"') . "</td>";
?>
</div>
<div class="form-box">
<p class="title">EVENT VENUE:</p>
<?php
$venue_options = array();
foreach($venues as $venue){
$venue_options[$venue->venue_id]=$venue->venue_name;
}
echo "<td>" . form_dropdown('pEventVenue', $venue_options, null, 'id="pEventVenue"') . "</td>";
?>
</div>
<div class="form-box">
<p class="title">CHANGE CITY:</p>
<?php
$cities_options = array();
foreach($cities as $city){
$cities_options[$city->city_id]=$city->city_full;
}
echo "<td>" . form_dropdown('pVenueCity', $cities_options, null, 'id="pVenueCity"') . "</td>";
?>
</div>-->
</form>
</div>
</div>
</div>
<!-- end Search Box -->
<?php $img = img('css/images/suggest-event.png'); ?>
<p class="suggest"><?php echo anchor('public_search/openSuggest', $img);?></p>
<!-- Search Box -->
<div class="search-box">
<div class="search-box-b">
</div>
</div>
<!-- end Search Box -->
</div>
<div class="search-right" id="readEvents">
<table border="0" cellspacing="0" cellpadding="0" id="eventRecords">
<thead>
<tr>
<th>TYPE</th>
<th>EVENT</th>
<th></th>
<th>DATE</th>
<th>PRICE</th>
<th>CITY</th>
<th></th>
</tr>
</thead>
<!-- <tfoot>
<tr>
<th>TYPE</th>
<th>EVENT</th>
<th></th>
<th>DATE</th>
<th>PRICE</th>
<th>CITY</th>
<th></th>
<th width="108">TYPE</th>
<th width="162">EVENT</th>
<th width="48"> </th>
<th width="97">DATE</th>
<th width="102">PRICE</th>
<th width="98">CITY</th>
<th width=""> </th>
</tr>
</tfoot>
<tbody></tbody>-->
</table>
</div>
<!-- $img2 = img('css/images/go.png'); echo anchor('public_search/openGo', $img2);-->
<table id="eventRecords"></table>
<script type="text/template" id="readEventsTemplate">
<tr id="${event_id}">
<td>${eventtype_desc}</td>
<td><p class='event-name'>${event_name}</p><p>${venue_name}</p></td>
<td class="go"><a href="${buyLink}"><img src="css/images/go.png" alt="Buy!" /></a></td>
<td><p><strong>${event_date}</strong></p><p>${event_day}</p></td>
<td><span class="price">${tickets_discountprice}</span> <img src="css/images/beer.png" alt="image" /> <img src="css/images/p.png" alt="image" /></td>
<td>${city_full}</td>
<td><a class="facebook-social" href="#"><span>3</span><img src="css/images/facebook-icon.png" alt="image" /></a></td>
</tr>
</script>
<!-- <div class="bottom-nav">
<ul>
<li class="first"><a href="#"><img src="css/images/left-arrow.png" alt="image" /></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="last"><a href="#"><img src="css/images/right-arrow.png" alt="image" /></a></li>
</ul>
</div>-->
</div>
<div class="cl"> </div>
</div>
<!-- end Main -->
<div class="cl"> </div>
</div>
<!-- end Shell -->
<div class="push"></div>
</div>
<!-- end Wrapper -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-boxes">
<div class="footer-box">
<span class="red-mark"></span>
<span class="shadow"></span>
<img src="css/images/box1.png" alt="image" />
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna felis, vestibulum” - Jake, San Francisco</p>
</div>
<div class="footer-box">
<span class="red-mark"></span>
<span class="shadow"></span>
<img src="css/images/box2.png" alt="image" />
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna felis, vestibulum” - Jake, San Francisco</p>
</div>
<div class="buttons">
<p><a href="#">venues</a></p>
<p><a href="#">advertising</a></p>
</div>
<div class="cl"> </div>
</div>
<p class="footer-nav">
<a href="#">about</a>
<a href="#">privacy</a>
<a href="#">faq</a>
<a href="#">contact</a>
</p>
</div>
</div>
<!-- end Footer -->
<script type="text/javascript" src="js/public_events.js"></script>
<pre>$(':checkbox[name="rendering_filter"]').click(function() {
var filter = '',
regexFilter = true,
smartFilter = false;
filter = $('[name="' + this.name + '"]:checked').map(function () {
return this.value;
}).toArray().join('|');
$('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});</pre>
</body>
</html>
My .js page that calls to my backend to get the query results and push the to the display:
var readUrl = 'index.php/public_search/readEvents',
dataTable,
buyUrl = 'index.php/public_eventdetails/eventdetails';
$( function() {
readEvents();
});
function readEvents() {
//display ajax loader animation
$( '#ajaxLoadAni' ).fadeIn( 'slow' );
$.ajax({
url: readUrl,
dataType: 'json',
success: function( response ) {
for( var i in response ) {
response[ i ].buyLink = buyUrl + '/' + response[ i ].event_id;
}
//clear old rows
$( '#eventRecords tbody' ).html( '' );
//append new rows
$( '#readEventsTemplate' ).tmpl( response ).appendTo( "#eventRecords" );
//apply dataTable to #records table and save its object in dataTable variable
if( typeof dataTable == 'undefined' )
dataTable = $( '#eventRecords' ).dataTable();
//DO IT HERE???
$(':checkbox[name="rendering_filter"]').click(function() {
var filter = '',
regexFilter = true,
smartFilter = false;
filter = $('[name="' + this.name + '"]:checked').map(function () {
return this.value;
}).toArray().join('|');
$('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});
//hide ajax loader animation here...
$( '#ajaxLoadAni' ).fadeOut( 'slow' );
}
});
} // end