Dynamically loaded content via AJAX breaks loading jQuery objects.

  • I’m using the following code to load content onto the homepage when a section is clicked:

    $.ajaxSetup ({
	cache: false
});
	var ajax_load = "<center><img src='<?php bloginfo("template_url"); ?>/images/loading.gif' alt='Loading...' /></center>";  

	var loadUrl = "https://localhost:8888/cnNew/?portfolio=portfolio-test";
		$("#ourTeam").click(function(){
			$("#main")
				.html(ajax_load)
				.load(loadUrl + " #content");
		});

    The issue that i’m running into is with the content that’s being loaded.

    Both sections of the loaded content are using jQuery in which neither work when it’s loaded in via Ajax (but work when going directly to the page).

    Are the jQuery objects coming in broken because the .js files have already loaded?
    Do I need to refresh the scripts somehow when the content is loaded?

    Thanks for the help!

Viewing 7 replies - 1 through 7 (of 7 total)

  • .load(loadUrl + ” #content”);

    Only that part of the page is loaded and nothing else. If you want to load scripts using ajax then you can use jQuery.getScript function.

    Thread Starter jet71dl

    (@jet71dl)

    The way it’s currently set up is that all the .js scripts are in the header to be loaded on page load because items on the home page use them as well.

    So by telling the scripts to load when a button is clicked would load them a second time. Would this cause issues?

    I have jQuery being loaded the correct way via wp_enqueue_script so i have no clue on how to get that to refresh when the object is clicked.

    I don’t get it. What are you trying to achieve?

    Thread Starter jet71dl

    (@jet71dl)

    I’m creating a theme that uses only the homepage. When a button is clicked, the content for that section is loaded into a div on the homepage via AJAX (script above).

    The issue:
    All of the .js files are being loaded in the Header on page load. Except for the jQuery which is being loaded with wp_enqueue_script. Because items on the homepage are using the scripts as well.

    Since the page isn’t refreshing and the content is being loaded into a DIV via AJAX when a button is clicked, i’m guessing, the content that is being loaded in that uses jQuery and other .js files is coming in broken because the .js files have already loaded without that content being on the page.

    I need to find a way to “refresh” the already loaded .js files so that the newly loaded content doesn’t come in broken.

    Maybe this can help
    https://www.wphardcore.com/2010/5-tips-for-using-ajax-in-wordpress/

    Thread Starter jet71dl

    (@jet71dl)

    Thanks for the help, i found that article hard for me to follow as i’m a novice to AJAX and jQuery.

    You need to use the .live() code for your JS for content loaded in via AJAX.

    Where you would do this with out ajax:

    $(‘a’).click(function(){ do stuff… })

    You would do:

    $(‘a’).live(‘click’,function(){ do stuff… });

    This allows you to control the new links added in via AJAX.

    https://api.jquery.com/live/

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Dynamically loaded content via AJAX breaks loading jQuery objects.’ is closed to new replies.