Posted in jquery
15
3:51 am, March 9, 2021

add click event to multiple link items and load the link content into a target div ajax

this will get a group of links with existing href targets and load them dynamically with an ajax callback

you will need to also include the full jquery script as the slim one does not include the ajax load functionality. 

also this will only work on request from the same domain, so you cant just add a bunch of external links and load them into your page this way

if you add an external link it will give you an error about not allowed xcss something or other. 

Like this: 

HTML

<h2>The list of dynamic content links...</h2>
<div class='a-div'>
<div class="list-group">
    <a href="/view/content/43j8M/quickest-way-to-get-the-yack-track-monster-killing-task-done/" class="list-group-item list-group-item-action text-truncate" title="Quickest way to get the Yack Track Monster Killing task done" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Quickest way to get the Yack Track Monster Killing task done</a>  
<a href="/view/content/IwjZ5/google-chrome-tabs-not-saving-when-reloading-the-browser/" class="list-group-item list-group-item-action text-truncate" title="google chrome tabs not saving when reloading the browser" data-toggle="tooltip"><span class="badge badge-info">apps</span> google chrome tabs not saving when reloading the browser</a>  
<a href="/view/content/xaUP7/tim-and-crunchy-location-rs3/" class="list-group-item list-group-item-action text-truncate" title="Tim and Crunchy Location RS3" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Tim and Crunchy Location RS3</a>  
<a href="/view/content/HJpFl/atom-editor-useful-keyboard-shortcuts/" class="list-group-item list-group-item-action text-truncate" title="atom editor useful keyboard shortcuts" data-toggle="tooltip"><span class="badge badge-info">atom</span> atom editor useful keyboard shortcuts</a>  
<a href="/view/content/TM928/getting-a-random-cursor-in-my-chrome-browser/" class="list-group-item list-group-item-action text-truncate" title="getting a random cursor in my chrome browser" data-toggle="tooltip"><span class="badge badge-info">apps</span> getting a random cursor in my chrome browser</a>  
<a href="/view/content/RJOfc/factorio-blueprint-books/" class="list-group-item list-group-item-action text-truncate" title="Factorio Blueprint Books" data-toggle="tooltip"><span class="badge badge-info">factorio</span> Factorio Blueprint Books</a>  
<a href="/view/content/HCLjy/purple-partyhat-price-info-feb-21/" class="list-group-item list-group-item-action text-truncate" title="purple partyhat price info feb 21" data-toggle="tooltip"><span class="badge badge-info">rs3</span> purple partyhat price info feb 21</a>  
<a href="/view/content/5a7E3/level-3-to-all-capes--ultimate-runescape-guide/" class="list-group-item list-group-item-action text-truncate" title="Level 3 to All Capes - Ultimate Runescape Guide" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Level 3 to All Capes - Ultimate Runescape Guide</a>  
  <a href="https://www.youtube.com/watch?v=KvRVky0r7YM" class="list-group-item list-group-item-action text-truncate" data-toggle="tooltip"><span class="badge badge-info">utoob</span> Test external Link</a>  
  

    </div>
</div>

<h2>The target where the links should load</h2>
<div id="load_target">...</div>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Javascript

$(document).ready(function(){
$('.a-div a').click( function(event){
  		event.preventDefault(); 
		console.log('you clicked ' + this);
  		load_ajax("#load_target", this + " .content");
	});
  });

function load_ajax(div_or_class, page_url) {
    $(div_or_class).load(page_url, function() {
        $(this).css('display', 'none');
        $(this).fadeIn();
    });
}

View Statistics
This Week
35
This Month
449
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
The happiest People don't have the best of everything, they just make the best of everything.
Unknown