Why doesnt My Ajax code work after converting my Custom HTML website to WORDPRESS

Question

I have been working for almost a month trying to get my jquery/ajax code to work with wordpress the same way that it works on my html5 design of my website. I am losing business and potential customers seeing that I have had my website down for a month now working on this code I cannot find it anywhere. I am new to wordpress coding and php. On my html version of my website the code works fine. http://trillumonopoly.com/index2.html

but after converting to wordpress I still cant get this code to work properly. I need the content of my post, pages, and search results to load into the specified div. Keeping the page from reloading everytime. and allowing my users to listen to music continuously without interuptions or page reloads.... bringing the player to a halt and restarting the music all over again

Heres My WordPress Conversion http://wp.trillumonopoly.com

Is my code wrong? am I missing something In my functions page? Header? or Footer? Should the div I want to load the content in be on the main index.php or should I make a new page template and assign it to all the pages?

Here is the code I am using:

$( document ).ready(function() {
  $.ajax({
    method: 'GET',
    url: " ",
    success: function(content) {
        $('#contentarea').html (content);
      }
  });
});

$('.menu_nav') .click (function () {
  var href = $(this) .attr('href');
  $('#contentarea').hide() .load(href).slideDown( 'very slow' )
    return false;
    });

PLEASE HELP

Answer 1 · 2016-06-16T00:55:41Z

June 16, 2016 12:55am

Have a look on your home page near the bottom for this [twinesocial app=”Illumonopoly101″ color=”gray” scrolloptions=”autoload”]. That will be a good place to start. You may well find that all the misbehaving scripts load after whatever plugin/module/etc. is breaking the template and printing this to screen [twinesocial app=”Illumonopoly101″ color=”gray” scrolloptions=”autoload”]. May very well just be that which is causing knock on effect.

Answer 2 · 2016-06-16T08:05:09Z

June 16, 2016 8:05am

Checking the browser console for errors shows a few errors, but here's one relating to the code you've pasted above:

"SyntaxError: missing } after function body" - nav.js (line 20)

Here's the pasted code from http://wp.trillumonopoly.com/wp-content/themes/ILLumonopoly/js/nav.js :

$(function () {
    $( document ).ready(function() {
        $.ajax({
            method: 'GET',
            url: "ajaxurl",
            success: function(content)
            {
                $('#contentarea').html (content);
            }
        });
    });

    $('.menu_nav') .click (function () {
        var href = $(this) .attr('href');
        $('#contentarea').hide() .load(href).slideDown( 'very slow' )

        return false;
    // Missing } needs to go here
});

Try adding the closing curly bracket where shown in the comment above and see if that makes a difference.

Welcome to the Treehouse Community

Looking to learn something new?

Terrelle Holliday

Terrelle Holliday

Why doesnt My Ajax code work after converting my Custom HTML website to WORDPRESS

2 Answers

Jake Cooper

Jake Cooper

Joel Bardsley

Joel Bardsley