Problem with searching for items loaded by .load ()

1

I am experimenting with a new platform of forums and a problem has arisen to me: I have tried to load, by means of load , a section of the forum to extract its id and place it on the current page. What happens is that, for some reason, when looking for the element (in the section to extract the id) you simply can not find it.

I have read there that I should use on , but no matter how hard I try, I do not finish configuring it as it should, therefore I come here to ask for help.

This is the base code, without the uses of the on , which always assigns undefined for the reason that I have already explained.

var topfor = $('#ST .activeuserstrip:nth-last-child(2) strong a').attr('href');
$('#actualfor').load(topfor + ' .forum-header');
var actfor = $('.forum-header').attr('id');
$('#ST .maintitle')[0].setAttribute('id', actfor);

And this is the simplified HTML:

<body id="ST" class="user-1 mod-1 admin-1">
    <div id="forum-hidden">
        <div id="actualfor">
            <div id="forum-1" class="forum-header">
                <div class="forum-cover">
                    <div class="forum-name">
                        A Test Forum
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="forum-body">
        <div id="forum-center">
            <div id="wrapper">
                <div id="innerwrapper">
                    <div class="tableborder">
                        <div class="maintitle" id="undefined">
                            &nbsp;<span class="topic-title">Prueba</span>, Prueba</div>
                        </div>
                    </div>
                    <div class="activeuserstrip" align="center">
                        <!--SOCIAL_BOOKMARKS--> « <a href="URL 1">Next Oldest</a> | <strong><a href="URL 2">A Test Forum</a></strong> | <a href="URL 3">Next Newest</a> »
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
asked by Lady Soup 24.06.2017 в 15:27
source

2 answers

0

What I can understand is that you are extracting the id of the class .forum-header .

Now, the use of on is quite simple:
Usually I always put everything in the event of loading the page. when the page is ready

$(document).on("ready", function({

    $("#myId").on("Click", function(){
        var id_clickeado = $(this).attr("id");

    });

});
    
answered by 24.06.2017 в 15:50
0

The HTML you place is after having executed $ ('# actualfor'). load, which asks the server for the next HTML fragment that is placed inside the <div id="actualfor>

        <div id="forum-1" class="forum-header">
            <div class="forum-cover">
                <div class="forum-name">
                    A Test Forum
                </div>
            </div>

But when you execute the next two lines the <div id="actualfor> is still empty since it is loaded by an ajax (the load)

$('#actualfor').load(topfor + ' .forum-header'); //Pides el .forum-header al servidor
var actfor = $('.forum-header').attr('id'); //El servidor aún no te contesta, por lo tanto no existe .forum-header y regresa Undefined

What you have to do is add the callback function of the load

$('#actualfor').load(topfor + ' .forum-header', function(){
    var actfor = $('.forum-header').attr('id');
    $('#ST .maintitle')[0].setAttribute('id', actfor);
});

.load () documentation

    
answered by 11.07.2017 в 23:12