Posted in
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();
});
}
The list of dynamic content links...
rs3 Quickest way to get the Yack Track Monster Killing task done
apps google chrome tabs not saving when reloading the browser
rs3 Tim and Crunchy Location RS3
atom atom editor useful keyboard shortcuts
apps getting a random cursor in my chrome browser
factorio Factorio Blueprint Books
rs3 purple partyhat price info feb 21
rs3 Level 3 to All Capes - Ultimate Runescape Guide
utoob Test external Link
The target where the links should load
...
View Statistics
This Week
35
This Month
449
This Year
0
Add Comment
Other Items in jquery
load json data url with jquery
validate email address from string with jquery working function
mouse enter mouse leave jquery hover hoverout
simulate a click on an element with jquery
append a #link to the end of all href urls on a target
scroll down the page using a button click
check if a ul contains a ul li
jquery check if a sub element exists
jquery toggle menu testing
json load from jquery and loop through the results
json jquery ajax request
add click event to multiple link items and load the link content into a target div ajax
add click event to multiple link items
Uncaught TypeError: $(...).slideToggle is not a function
jquery page search [testing]
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
add a jquery date picker to your text box
replicating the bootstrap dropdown toggle in jquery
using jquery appear for checking if an element is visible on screen
fix for Uncaught TypeError: e.indexOf is not a function
add a class or remove it based on window scroll location
find and replace hrefs in existing page links using jquery
get the href value using jquery
jquery document ready with foundation init as well
jquery add a click function if the window size is greater than target_width
jquery enable and disable attribute
jquery click function
Change link target with JQuery
document ready wordpress jquery
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress