CODEWITHSUNDEEP
javascriptjqueryajaxdjango
Juan Marquez
Juan Marquez

Reputation: 11

Load content from Ajax-loaded content

I can load content with Ajax to my project, but the content also has Ajax calls to the same function. But these calls don't work.

$(function cargar_ajax(){
$(".call_cuerpo").on("click",function(){
    var content_id = $(this).data("id")
    //~ console.log(content_id)
    $.ajax({
        url: "/get_content?content_id="+content_id,
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
            });
    });
});

I read that you must call the function after loading content but not how or where.

This is my div in HTML:

<div class="contenido_ajax"></div>

A working Ajax call:

<li><a href="#" class="call_cuerpo" data-id="1"><small>Load ajax content</small></a></li>

This call doesn't work if it's loaded with Ajax:

<li><a href="#" class="call_cuerpo" data-id="{{ item.content_id }}@{{ item.book_id }}">{{ item.code }}</a></li>

The code is loaded from an Ajax call.

Note: I'm using: Django 1.6 + bootstrap 3.2 + html 5

Thanks in advance.

Upvotes: 1

Views: 114

Answers (4)

Juan Marquez
Juan Marquez

Reputation: 11

Thanks for your answers and sorry for taking so long to answer.

Indeed the problem is: it does not run when called from ajax content.

After reading this and this the problem is not able to delegate the event.

This is the html code that is not called (previously loaded from ajax):

<a class="call_cuerpo" data-id="A0300306@1" href="#">03.06</a>

Must be loaded in this django template.html:

{% block book_content %}
<div class="contenido_ajax"></div>
{% endblock book_content %}

I have simplified the function like this:

$(function load_ajax(){
    $(".call_cuerpo").on("click", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        // console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

I tried several syntax and the event goes down.

I Try:

$(function load_ajax(){
    $(".call_cuerpo").on("click", "contenido_ajax", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

And:

$(function load_ajax(){
    $(".contenido_ajax").on("click", ".call_cuerpo", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

But that does nothing. What am I doing wrong?

PD: Sorry for my english

Upvotes: 0

Touhid
Touhid

Reputation: 659

Try as my code below tested in my local apache server. event.preventDefault() to prevent the default functionality occuring from link element.

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(".call_cuerpo").click(function(event){
           // alert("I am working");
            event.preventDefault();

        var content_id = $(this).data("id")
        //~ console.log(content_id)
        $.ajax({
            url: "./get_content.php?content_id="+content_id
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
        });

    });
</script>

Output: ajax_html_load_output

Upvotes: 0

empiric
empiric

Reputation: 7878

If i get this right, your click-event is not executed when its loaded via ajax ? Try:

$("document").on("click", ".call_cuerpo",function(){ ...

for your click-event

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Because the .call_cuerpo elements are being dynamically appended to the DOM you need to use a delegated event handler:

$('.contenido_ajax').on('click', '.call_cuerpo', function() {
    // rest of your code...
});

Upvotes: 2

Related Questions