How do I adjust this JS code to make content work after it's been dynamically loaded using AJAX?

I’m having an issue where, after dynamically attempting to load content in through AJAX, the content isn’t responsive to the JS code that it used to be.

Here’s a jsfiddle of this navigation bar working before trying to dynamically loading it using AJAX… http://jsfiddle.net/neowot/m107L4mh/ (ignore that it’s offset, lol)

But now it’s just nonresponsive. I asked for similar help before and attempted to add proper event handlers, but clearly I’m still struggling.

Please help if you can. Thank you.

init.js

$(document).ready(function() {
    
                var nav, content, fetchAndInsert;

                nav = $('nav#main');
                content = $('section#content');


                //Fetches and inserts content into the container
                fetchAndInsert = function(href) {
                    $.ajax({
                        url: 'http://localhost/TTValid/content/' + href.split('/').pop(),
                        method: 'GET',
                        cache: false,
                        success: function(data){
                            content.html(data);
                        }                    
                    });
                }; 


                //User goes back/forward 
                $(window).on('popstate', function() {
                    fetchAndInsert(location.pathname);
                });


                nav.find('a').on('click', function(e) {
                    var href = $(this).attr('href');

                    //Manipulate history
                    history.pushState(null, null, href);

                    //Fetch and insert content
                    fetchAndInsert(href);


                    e.preventDefault();            
                });
      
});

page1.js

$(function () {
    
    var container = $('.navbar');
    
    $(document).on('click', '.navbar ul li a', function(event) { 
        $('.navbar > li:first-child > a').text($(this).text());
        $('.navbar > li > ul').addClass('hidden');
        $('.navbar li ul').slideToggle(100);
        $('.navbar ul li.gone').removeClass("gone");
        $(event.target).closest("li").addClass("gone");    
    });
    
    $(document).on('mouseenter', '.navbar > li', function(event) { 
        $(this).find('ul').removeClass('hidden');
    });
    
    $(document).on('click', '.ActiveListItem', function(event) { 
        $('.navbar li ul').slideToggle(300);
    });



    $(document).mouseup(function (e) {
        if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $('.navbar li ul').slideUp(300);
        }
    });

});

page1.php

<?php
require 'views/TTheader.php';
?>

<section id="content">
    <?php require 'content/TTpage1.php'; ?>
</section>

<?php
require 'views/TTfooter.php';
?>

content/page1.php

<div id="navbarcontainer">
                <ul class="navbar cf">
                    <li>
                        <a href="#" class="ActiveListItem">Category</a>
                        <ul>
                            <li><a href="#">Music</a></li>
                            <li><a href="#">Movie</a></li>
                            <li><a href="#">Book</a></li>
                            <li><a href="#">TV</a></li>
                            <li><a href="#">Game</a></li>
                            <li><a href="#">Activity</a></li>
                            <li><a href="#">Misc</a></li>
                        </ul>
                    </li>
                </ul>
 </div>

How are the init.js and page1.js scripts being loaded?

1 Like

Just included as scripts in the head tag of TTheader.php

When putting together a sample version for myself, the three events all test out as activating and working when I try them out.

Could it be that there’s be something else there that may be interferring?
I see for example that you are writing this code locally, based on the localhost address. You’ll need to add an access control directive to the start of your page1 code to allow things to work in a local environment.

header('Access-Control-Allow-Origin: *');

Make sure to remove this when preparing to go live though. It can help to add in a kill-switch so that it’ll only run in development on the localhost, to help prevent any unwanted embarrassments from having left the access control in there when you go live.

1 Like

First, thank you.

The three events do come through, but the dropdown menu doesn’t respond – the JS code behind it doesn’t function when the menu is dynamically loaded. Do you have suggestions for solving that issue?

The test that I put together from your code results in the menu collapsing and showing itself when clicking on Category. Is that different from what is supposed to occur?

1 Like

ha, you’re right. This is working now, just a silly error. Thank you! :smile_cat:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.