Load content in a div with jquery

Question

i'm getting some problem using jquery. I hav a series of cards with an href attribute that call a php page and sends the attribute with the get method. Here's an example

    <div class="pers_genres_card">
<div class="card-panel teal_green">
    <span class="white-text"><a class="pers_href_white" target="_self" href="generatorgen.php?genre=Blues">Classica</a></span>
</div>
<div class="card-panel teal_orange">
    <span class="white-text"><a class="pers_href_white" href="generatorgen.php?genre=Blues">Blues</a></span>
</div>

Now I have a central div where i want to load the result of my php script without page refreshing. This is my jquery code:

$(document).ready(function(){
    $('a.pers_href_white').click(function(){
        var page = $(this).attr('href');
        $('#central').load(page);
        return false;
    }
    });
});

But when I try to click on the href, the results are shown in another page. In few words the jquery script doesn't start, so the classical href attribute load. I have already written another jquery script that works perfectly, also more complex than this script, i can't understand why it doesn't work.

You have syntax errors, so your javascript probably doesn't run at all, and when you click an anchor, it redirects, as it's supposed to do. Learn how to use your console and debug simple syntax errors, like not properly closing a function. — adeneo, May 15 '17 at 14:59
You need to prevent the propagation of the click event so it doesn't load a new page. `click( function ( e ) { e.preventDefault(); } )`. — hungerstar, May 15 '17 at 14:59
As @hungerstar says, you need to properly cancel the native click event. The `return false` is not doing that and can be removed and replaced with the code shown in the comment above. — Scott Marcus, May 15 '17 at 15:00
@ScottMarcus - Why wouldn't `return false` do that, it's `preventDefault` and `stopPropogation` rolled into one ? — adeneo, May 15 '17 at 15:01
@adeneo Is it? I didn't realize that. I was thinking in "vanilla" JavaScript. — Scott Marcus, May 15 '17 at 15:03
In jQuery it is, and `stopPropogation` won't help either when it's in the event handler for the anchor itself. — adeneo, May 15 '17 at 15:03
Stupid question but do you have a `central` div? Also, if you press f12 and click on the console tab, do you have any errors? — Pete, May 15 '17 at 15:26
@Pete, yes with another jquery script i already load another page in this central div, but clicking on one element of this div the new jquery script doesn't work — Alessio Corvaglia, May 15 '17 at 15:30
ok so this new link is dynamically loaded? if so you want to have a look at event delegation — Pete, May 15 '17 at 15:35
@Pete sorry I can't understand what you are saying, these are my first times using jquery — Alessio Corvaglia, May 15 '17 at 15:43
Did the link exist at the the time the page loaded? Or did you ajax the link in after? If you dynamically loaded the link, then you need to look at this: http://api.jquery.com/on/#direct-and-delegated-events — Pete, May 15 '17 at 15:51

Cpt.Kangar00 · Answer 1 · 2017-05-15T15:05:48.883

1

When you click the link the browser will just redirect to it. You have to actively prevent the browser from doing that. You can use the DOM method event.preventDefault() for that.

Change your JS to the following and it should work:

$(document).ready(function(){
    $('a.pers_href_white').click(function(e){
        e.preventDefault();
        var page = $(this).attr('href');
        $('#central').load(page);
        return false;
    });
});

edited May 15 '17 at 15:05

answered May 15 '17 at 15:03

Cpt.Kangar00

211
1
7

2

JQuery doesn't provide `event.preventDefault()`. That's part of the standard DOM API. (https://www.w3.org/TR/dom/#dom-event-preventdefault) Also, according to @adeneo, `return false` in JQuery accomplishes this. – Scott Marcus May 15 '17 at 15:04
@ScottMarcus Never knew that. It's part of the JQuery API doc (https://api.jquery.com/event.preventdefault/). I'll edit the post. – Cpt.Kangar00 May 15 '17 at 15:07
jQuery has it's own events and callbacks, so yes, it has it's own `preventDefault` -> http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – adeneo May 15 '17 at 15:08
@AlessioCorvaglia what does not work? What's the error? – Cpt.Kangar00 May 15 '17 at 16:30

Load content in a div with jquery

1 Answers1