{"id":448,"date":"2022-08-30T15:01:31","date_gmt":"2022-08-30T15:01:31","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/ajax-does-not-post-to-div-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:01:31","modified_gmt":"2022-08-30T15:01:31","slug":"ajax-does-not-post-to-div-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/ajax-does-not-post-to-div-collection-of-common-programming-errors\/","title":{"rendered":"Ajax does not post to div-Collection of common programming errors"},"content":{"rendered":"

I receive no errors from either jshint or console for this code. Yet, my ajax content does not post to the intended div(s). The alerts, however, fire:<\/p>\n

    var recentVar;\n    var highlightsVar;\n    var test3;\n    var test4;\n\nfunction switcher(divToShow, thisVar, otherVar, url, div){\n    $(\"#site-nav li a\").parents().removeClass(\"nav-active\");\n        $(div).addClass(\"nav-active\");\n        if (otherVar){ $(otherVar).detach();}\n\n        if(typeof thisVar === 'undefined') {\n            thisVar = $(divToShow + \" ul.top-level\").load(\"assets\/includes\/\" + url, function () {\n                alert(\"I'm new\");\n            });\n        } else {\n            $(thisVar).appendTo(\"#content-listing\");\n            alert(\"I'm old\");\n        }\n}\n\n    \/\/Recent\n    $(\"#site-nav .nav1\").on(\"click\", function (event) {\n    switcher(\"#recent\", \"recentVar\", \"highlightsVar\", \"recent.php\", \"#site-nav .nav1\");\n    event.preventDefault();\n    });\n\n    \/\/Highlights\n    $(\"#site-nav .nav2\").on(\"click\", function (event) {\n    switcher(\"#highlights\", \"highlightsVar\", \"recentVar\", \"all-web.php\", \"#site-nav .nav2\");\n    event.preventDefault();\n    });\n<\/code><\/pre>\n
    \n
  1. \n
    It has nothing to do with AJAX, but I think your issue is here.<\/p>\n
    $(thisVar)\n<\/code><\/pre>\n
    thisVar<\/code> is simply text. If you check, you will see that $(thisVar).length<\/code> is 0. This is because you are calling: $(\"recentVar\")<\/code>, which will search for any elements of type , which clearly there are none. If your intent is to append that text, you can use append<\/code> or create an element and set the text to recentVar<\/code> and append that.<\/p>\n
    EDIT<\/strong>: Another issue:<\/p>\n
    $(divToShow + \"ul.top-level\")\n<\/code><\/pre>\n
    You need a space here:<\/p>\n
    $(divToShow + \" ul.top-level\")\n<\/code><\/pre>\n
    Otherwise you are trying to match #recentul.top-level<\/code> which is nonsense.<\/p>\n<\/li>\n
  2. \n
    Upon execution of switcher, thisVar is always going to be a string. It’s never going to have typeof undefined. It also LOOKS like you want to pass in an object (due to the declared variables) but… as stated, you’re always passing in a string.<\/p>\n
    [per James Montagne’s comment]<\/p>\n<\/li>\n
  3. \n
    Try this:<\/p>\n
    if(typeof thisVar === 'undefined') {\n        thisVar = $(divToShow + \" ul.top-level\").load(\"assets\/includes\/\" + url, function () {\n            alert(\"I'm new\");\n        });\n    } else {\n        $(thisVar).appendTo($(\"#content-listing\"));\n        alert(\"I'm old\");\n    }\n<\/code><\/pre>\n<\/li>\n
  4. \n
    AMAIK, jQuery’s load()<\/code> method directly inserts the result into the calling object. Thus the result should get loaded into $(divToShow + \" ul.top-level\")<\/code> element. Have you checked it?<\/p>\n<\/li>\n
  5. \n
    If the current document does not contain an element with an ID of divToShow + \" ul.top-level\"<\/code> the .load()<\/code> method is not executed.<\/p>\n
    Try Firebug or such things to track request. Maybe something is wrong with your response.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 19:43:11. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I receive no errors from either jshint or console for this code. Yet, my ajax content does not post to the intended div(s). The alerts, however, fire: var recentVar; var highlightsVar; var test3; var test4; function switcher(divToShow, thisVar, otherVar, url, div){ $(“#site-nav li a”).parents().removeClass(“nav-active”); $(div).addClass(“nav-active”); if (otherVar){ $(otherVar).detach();} if(typeof thisVar === ‘undefined’) { thisVar = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-448","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=448"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/448\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}