CODEWITHSUNDEEP
javascriptjqueryhtmlajax
seroth
seroth

Reputation: 637

Cannot load HTML in a div that was ajax'd in

Good afternoon, I am at a total loss on why this is happening. I have searched online and tried to understand what I'm doing wrong for 5+ hours and could find no solution. Here is the situation.

I have 3 pages (index.html, index.js, and stuff.html) index.html is the main page and uses jQuery to load an HTML page into a div.

<html>
<head>
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div id="stuffHolder"></div>
  <script type="text.javascript">
    $(document).ready(function(){
      $('#stuffHolder').load('stuff.html');
    });
  </script>
</body>
</html>

The stuff.html page loads just fine for me.

Inside the stuff.html I have 2 div's 1. One of the DIV's uses sprites as anchor tags to call a function named actOnStuff(options). 

<div id="myStuff"><a class="myStuffSprite" href="Javascript:actOnStuff('newStuff')"><span>New Stuff</span></a></div>
<div id="yourStuff"><a class="yourStuffSprite" href="Javascript:actOnStuff('oldStuff')"><span>Old Stuff</span></a></div>
  1. The other DIV is empty but will have innerHTML written to it later.

Inside index.js, which sits on the index.html page, I have a function

function actOnStuff(youSelected){
  strHTML = "";
  switch(youSelected){
    case "newStuff":
      strHTML += "<div id='newDIV'><span>You selected New</span></div>";
      break;
    case "oldStuff":
      strHTML += "<div id='oldDIV'><span>You selected Old</span></div>";
      break;
  }
  $('#placement').html(strHTML);
  alert($('#placement').html());
}

My problem is that when I alert the innerHTML of the placement DIV it shows that the necessary DIV from the function as added in the alert. HOWEVER, nothing shows up in the placement DIV at all.

Any help you can provide would be wonderful as I am at a total loss as to what the problem is. Thanks in advance.

Upvotes: 2

Views: 1479

Answers (3)

mekwall
mekwall

Reputation: 28974

I'm not sure I can help solve the actual problem, but there's many issues and bad practices in your code that I'd like to point out for the greater good of the community.

Here's my take on your code:

HTML in body

<div id="stuff-holder"></div>

HTML in stuff.html

<div id="my-stuff">
    <a class="my-stuff-sprite" href="#"><span>New Stuff</span></a>
</div>
<div id="your-stuff">
    <a class="your-stuff-sprite" href="#"><span>Old Stuff</span></a>
</div>

Bad practice: CSS and HTML is most of the time not case-sensitive, so when naming IDs with camelcase such as fooBar, could create confusion with foobar or Foobar. Instead, use lowercase only and dash as separator (like in CSS).

JavaScript in index.js

I moved your ready function into index.js. I don't see a reason why you would want that in your HTML document when you already have a separate JavaScript file.

// Shorthand for ready
$(function(){

    // Cache the selector
    var $placement = $("#placement");

    // Put function in the local scope so we don't clutter the global scope
    function actOnStuff(youSelected) {
        // Not declaring variables with var, makes it global (bad idea!)
        var html = "";

        switch (youSelected) {
            case "my-stuff":
                html += '<div id="new-div"><span>You selected New</span></div>';
            break;

            case "your-stuff":
                html += '<div id="old-div"><span>You selected Old</span></div>';
            break;
        }

        // Put new html in placement element
        $placement.html(html);

        // Use console.log to debug your code instead of alert
        console.log($placement.html());
    }

    // Load stuff into stuff holder and bind event handler to load event
    $("#stuff-holder")
        .load("stuff.html")
        .on("load", function() {
            // After it has loaded, bind click events
            $("#my-stuff .my-stuff-sprite, #your-stuff .your-stuff-sprite").click(function(e) {
                // Prevent default click behavior
                e.preventDefault();
                // Get id of parent
                var id = $(this).parent()[0].id;
                // Execute function
                actOnStuff(id);
            });
        });
});

Bad practice: Executing JavaScript within the href is a big no-no in todays environments. Even using onclick attributes et al is since long outdated.

Tip: Passing a function directly into jQuery is a shorthand for $(document).ready

Tip: Use console.log() instead of alert() to output everything from objects to strings to your log (might give you errors in older IE)

I still don't know where your placement element is located. Perhaps that's your culprit? If you have any questions about the above or anything else, don't hesitate to ask.

Also, check out jQuery Fundamentals which is a great resource for everyone using jQuery, from beginners to pros.

Edit: Check this jsFiddle for a demonstration of the above.

Upvotes: 3

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

  • Make sure you only have ONE element with id="placement", IE will fail if you have more than one.

  • Also what is the output of alert(strHTML); putted just before $('#placement').html(strHTML); does it output the string right?

Upvotes: 0

mgraph
mgraph

Reputation: 15338

before

<script type="text/javascript" src="index.js"></script>

you should load jquery library first

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>

Upvotes: 1

Related Questions