Load dynamic data on click

Question

I'm currently loading my page data dynamically clicking on an element like this:

<a onclick="load('url_of_data')">Some Text</a>

But for a better UX I now want to have an element like this:

<a href="url_of_data">Some Text&</a>

and then just use preventDefault like this;

$("a").click(function(e){
    var self = $(this);
    var href = self.attr('href');
    e.preventDefault();

    load(href);         
});

I got this code from this question.

But it does not work, the site is still reloading and not running the function.

I now apply the click handler everytime the dynamic content was loaded and it works fine.

Where is the code for `load()`? What errors are thrown? Give a proper explanation of what should happen....broken code is not a good substitute for an explanation — charlietfl, Jun 19 '17 at 10:24
When the `a` tag itself was dynamically loaded, you either have to reapply the click handler or you have to use jquery's `on` function overload with the additional selector argument. — Patrick Günther, Jun 19 '17 at 10:31
Okay you are right, I now also added the click() event in the load() function and it works, thank you — Alexander Kutschera, Jun 19 '17 at 11:08

Marcel Wasilewski · Answer 1 · 2017-06-19T10:26:08.220

0

You will need to specify the container div to which the content will be loaded into.

$("a").click(function(e){
    var self = $(this);
    var href = self.attr('href');
    e.preventDefault();

    //Replace "self" with the container you want to load the content into, e.g. $("#myDiv").load(href);
    self.load(href);         
});

edited Jun 19 '17 at 10:26

answered Jun 19 '17 at 10:09

Marcel Wasilewski

2,519
1
17
34

You chose the anchor as the container div it needs to load into? – Douwe de Haan Jun 19 '17 at 10:16
@DouwedeHaan this is just an example. I have no idea whats the context and what he is planning to do with it. He can choose whatever he wants. – Marcel Wasilewski Jun 19 '17 at 10:24
1

True, but maybe you can point it also out in the code (with a comment maybe), so your code is more clear. – Douwe de Haan Jun 19 '17 at 10:25
1

@DouwedeHaan i did :) – Marcel Wasilewski Jun 19 '17 at 10:26
The load function is not the problem, the problem seems to be that preventDefault isn't preventing the page reload – Alexander Kutschera Jun 19 '17 at 11:05

score 0 · Answer 2 · answered Jun 19 '17 at 10:09

0

You need to add return false at the end of your function

$("a").click(function(e){
   var self = $(this);
   var href = self.attr('href');
   e.preventDefault();

   load(href);
   return false;         
});

answered Jun 19 '17 at 10:09

Victor Leontyev

8,488
2
16
36

This will say that load is not defined. – Marcel Wasilewski Jun 19 '17 at 10:18
how you defining your `load` function – Victor Leontyev Jun 19 '17 at 10:19
You need to gibe the load function a container where the content will be loaded into. (self.load(href)) or it won`t work. Have you tested your code? it returns an error. – Marcel Wasilewski Jun 19 '17 at 10:22
2

You don't need `return false` when `preventDefault()` is already used – charlietfl Jun 19 '17 at 10:23
load() is defined just above the $('a').click(); – Alexander Kutschera Jun 19 '17 at 11:03

score 0 · Answer 3 · answered Jun 19 '17 at 11:03

0

I Think this will make the work.

$('a').click((e) => {
    e.preventDefault(); 
    const href = $(e.currentTarget).attr('href');

    window.location.href = href;
});

answered Jun 19 '17 at 11:03

Eyal Cohen

1,188
2
15
27

score 0 · Accepted Answer · answered Jun 19 '17 at 11:16

0

I just needed to reapply the click handler everytime the dynamic content was loaded.

Now it's working fine

answered Jun 19 '17 at 11:16

Alexander Kutschera

13
7

score -1 · Answer 5 · answered Jun 19 '17 at 10:12

-1

$("a").click(function(e){
   var self = $(this);
   var href = self.attr('href');

  window.location.assign(href);
});

It helps you

answered Jun 19 '17 at 10:12

Neeraj Pathak

759
4
13

This answer makes no sense – charlietfl Jun 19 '17 at 10:28

Load dynamic data on click

5 Answers5