Adding Click Events To Pagination

[Xtremer360]

My issue here is that the click event (edit) will work on page one but it won't when there's more than one page. What I need to do is add the click event to each page and I'm not sure where I need to accomplish this at.

 

<?php
    
error_reporting(E_ALL);

// Include the database page
include ('../inc/dbconfig.php');

$query = "SELECT 
    CONCAT_WS(' ', handlers.firstName, handlers.lastName) AS name, 
    DATE_FORMAT(characters.dateCreated, '%M %d, %Y') AS dateCreated, 
    characters.ID, 
    characters.characterName, 
    statuses.statusName, 
    styles.styleName 
FROM 
    characters
    INNER JOIN handlers 
        ON characters.creatorID = handlers.ID
    INNER JOIN statuses
        ON characters.statusID = statuses.ID
    INNER JOIN styles
        ON characters.styleID = styles.ID
ORDER BY 
    characters.characterName";
$result = mysqli_query ( $dbc, $query ); // Run The Query
$rows = mysqli_num_rows($result);

$itemsPerPage = 10;
$pages = ceil( $rows / $itemsPerPage );

?>

<script>
$(document).ready(function() {
    $('a', $('div#addform')).click(function() {
        $('#innerContent').load('forms/' + $(this).attr('id') + '.php?case=addnew');
    });


// Add the table sorter and table paginator plugins
$('#charactersPageList').tablesorter() 
                    		.tablesorterPager({
                				container: $( '#charactersPageList .paginate' ),
                				cssPageLinks: 'a.pageLink'
                			});
    $('.edit').click(function(){
        var characterID = $(this).attr('rel'); 
        $('#innerContent').load('forms/character.php?id=' + characterID + '&case=edit');
    });                                 
});
</script>

<!-- Title -->
<div id="title" class="b2">
<h2>Characters</h2>
<!-- TitleActions -->
<div id="titleActions">
	<!-- ListSearch -->
	<div class="listSearch actionBlock">
		<div class="search">
			<label for="search">Content Pages</label>
			<input type="text" name="search" id="search" class="text" />
		</div>
		<div class="submit">
			<button type="submit" id="search-button" class="button"><strong><img src="img/icons/search_48.png" alt="search" class="icon "/></strong></button>
		</div>
	</div>
	<!-- /ListSearch -->
	<!-- newPost -->
	<div id="addform" class="addNew actionBlock">
		<a href="#" id="character" class="button"><strong>Add New Character<img src="img/icons/add_48.png" alt="add new" class="icon "/></strong></a>
	</div>
	<!-- /newPost -->
</div>
<!-- /TitleActions -->
</div>
<!-- Title -->
<!-- Inner Content -->
<div id="innerContent">
    <!-- ListHeader -->
<div id="listHeader">
	<p class="listInfos">
		You have <?php echo $rows; ?> characters.
	</p>
</div>
<!-- /ListHeader -->
    <?php
    if ($rows > 0) {
    ?>
    	<!-- ListTable -->
    	<table cellspacing="0" class="listTable" id="charactersPageList">
    		<!-- Thead -->
    		<thead>
    			<tr>
                    <th class="first"><div><a href="#" title="Character Name">Character Name</a></div></th>
                    <th><a href="#" title="Character Status">Status</a></th>
                    <th><a href="#" title="Character Style">Style</a></th>
    				<th><a href="#" title="Creator">Creator</a></th>
    				<th><a href="#" title="Date Created">Date Created</a></th>
                    <th class="last">Edit/Delete</th>
    			</tr>
    		</thead>
    		<!-- /Thead -->
    		<!-- Tfoot -->
    		<tfoot>
    			<tr>
    				<td colspan="6">
    					<div class="inner">
    						<div class="paginate">
    							<?php
    							if( $pages > 1 ) {
    								for( $i = 1; $i <= $pages; $i++ ) {
    									echo '<span style="padding-left: 5px; padding-right: 5px;"><a class="pageLink" href="#">' . $i . '</a></span>';
    								}
    							}
    							?>
    						</div>
    					</div>
    				</td>
    			</tr>
    		</tfoot>
    		<!-- /Tfoot -->
    		<!-- Tbody -->
    		<tbody>
    		<?php 
            while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
              echo '
              <tr>
                  <td><a href=# title="' . $row['characterName'] . '">' . $row['characterName'] . '</a></td>
    			  <td>' . $row['statusName'] . '</td>
                  <td>' . $row['styleName'] . '</td>
    			  <td>' . $row['name'] . '</td>
    			  <td>' . $row['dateCreated'] . '</td>
                  <td style="text-align:center;"><img src="img/notepad.png" class="edit" rel="' . $row['ID'] . '"/></td>
    		  </tr>';
            }
            ?>
    		</tbody>
    		<!-- /Tbody -->
    	</table>
    <?php
    }
    ?>
   <!-- /ListTable -->
</div>
<!-- /Inner Content -->

[.josh]

I'm not going to fine-tooth comb your code but from eyeballing it, it looks like you are loading each page (pagination) via ajax.  So whenever you click on a new page it doesn't reload the whole page (more specifically, the edit click event) so the edit click event never gets added for new stuff.  The $('.edit').click(...) code needs to also be called whenever new content is loaded from the pagination. Maybe your paginator plugin has a generic callback function you can place the edit code in, or if not, you will need to hack the plugin itself.

[Xtremer360]

I'm using the jquery tablesorter pager plugin.

[.josh]

Yeah I saw that.  Which brings me to the part where I mentioned that you need to also call your $('.edit').click(...) stuff whenever the plugin loads new content, after it is loaded.  The plugin may have a special callback function you can put the code in.  If not, you will have to hack the plugin. 

 

I told you the issue in general and pointed you in the right direction of what you need to do as a next step.  I can't really be more specific than that because I don't know that plugin and TBH I'm not really interested in researching and finding out the inner workings of arbitrary scripts (like plugins) unless someone is interested in throwing money at me. 

 

Perhaps someone else around here has experience with that plugin specifically and will know offhand where you need to apply your code in regards to that plugin.  Or you may have better luck by going to the site of whoever made the plugin.

 

 

[Xtremer360]

I've looked around and can not find any results as to a call back function for this plugin.