Link to home
Start Free TrialLog in
Avatar of jblayney
jblayneyFlag for Canada

asked on

ajax wont trigger twice without a page refresh

Hello,

I have an ajax that records all link clicks into a database. It works great the first time you arrive on the page, but if you try to click multiple links (these are files for downloading) it only records the first click.

Here is the code

<a href='/downloadocs/newdoc.txt_2017-11-01-42.zip' name='file8'>Full Report</a>

<script type="text/JavaScript">
					$(document).ready(function(){
						$("[name=file8]").click(function(){
						$(  "#return-page8" ).load("/wp-content/themes/theme/record.php?thefile=8");

						});
					});
			</script> <ol id="return-page8"></ol>



<a href='/downloadocs/test.txt_2017-11-10-46.zip' name='file4'>Full Report</a>
<script type="text/JavaScript">
					$(document).ready(function(){
						$("[name=file4]").click(function(){
						$(  "#return-page4" ).load("/wp-content/themes/theme/record.php?thefile=4");

						});
					});
			</script> <ol id="return-page4"></ol>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

That is either because you are not disabling the default <a> behaviour or
 [name='file8'] is inside #return-page8  and the load is overwriting your event handler.

A much better (and more generic way of doing this) is like this

<a href='/downloadocs/newdoc.txt_2017-11-01-42.zip' data-fileid="8" class="file-link">Full Report</a>
<a href='/downloadocs/newdoc.txt_2017-11-01-42.zip' data-fileid="4" class="file-link">Full Report</a>
...
$(function() {
    // Bind dynamically to anything with a .file-link class - irrespective of whether
    // it was dynamically loaded or not
    $('body').on('click', '.file-link', function(e) {
         // Disable default <a> behaviour
         e.preventDefault();

         // Get the id we are interested from the custom data attribute on the <a>
         var id = $(this).data('fileid');

         // use the ID to target the result block and which page we want
         $("#return-page" + id).load("/wp-content/themes/theme/record.php?thefile=" + id);
    });
});

Open in new window

Avatar of jblayney

ASKER

Hi Julian,

This is a database driven page, everything is being loaded from  php function (don't worry it is a responsive table).

here is the page with it in action
http://www.baffinland.com/documents/?cat=1&subcat=1&archive=1&lang=en

Will your code work here, and will it trigger if user click on menu items?

$the_files .= "<table>
	<thead>
	<tr>
		<th>Title of report</th>
		<th>Pop Summary Eng.</th>
		<th>Pop Summary Inuk.</th>
		<th>Full Report</th>
		<th>Upload Date</th>
	</tr>
	</thead>
	<tbody>" ;

	if ($result_check_answers->num_rows > 0) {
	while($row_check_answers = $result_check_answers->fetch_assoc()) { 
	
	$the_files .= "<tr><td>".$row_check_answers['bdm_documents_name']."</td>";
	
	$the_files .= "<td>".$row_check_answers['bdm_documents_summary']."</td>";
	$the_files .= "<td>".$row_check_answers['bdm_documents_summary_in']."</td>";
	$the_files .= "<td><a href='/downloadocs/".$row_check_answers['bdm_documents_file']."' name='file".$row_check_answers['bdm_documents_id']."'>Full Report</a></td>";
	$the_files .= "<td>".date("M-d-Y", strtotime($row_check_answers['bdm_documents_date']))."</td>";
	
	$the_files .= '<script type="text/JavaScript">
					$(document).ready(function(){
						$("[name=file'.$row_check_answers['bdm_documents_id'].']").click(function(){
						$(  "#return-page'.$row_check_answers['bdm_documents_id'].'" ).load("/wp-content/themes/theme/record.php?thefile='.$row_check_answers['bdm_documents_id'].'");

						});
					});
			</script> <ol id="return-page'.$row_check_answers['bdm_documents_id'].'"></ol></tr>
			';
	
	
	}
	}
	
	$the_files .= "	</tbody>
</table>" ;
	

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Julian,

Was there a reason to rewrite my html output, it was working fine the way it was. other then the couple export changes was it just personal preference?
Hello Again,

so it records multiple clicks now, but the links are disabled and you can't download the files anymore.. and i see why you rewrote, it was to show the  heredoc
I just commented out
e.preventDefault();,

it all works now, thank you
You are welcome.