how to load content in a dynamic created div with ajax on a click

Question

This my current code:

var container, url;

$(".nav-list li a").on("click", function(e) {

   e.preventDefault();

   var $url = this.href + " #content";
   var container = $("#content");

   $(".nav li").removeClass("active");
   $(this).parent().addClass("active");

   $(this).addClass("clicked");

   var $row = $(".span10");
   var $rowNew = $('.new');

   if ($rowNew.children().length > 1) {
        $(".span10 div").removeClass("new");
        $('<div class="row-fluid new"></div>').prependTo($row);
   }

   if ($(".new").length == 0) {
        $('<div class="row-fluid new"></div>').prependTo($row);
        $('<div class="span6">' + container.load(url) + '</div>').appendTo('.new');
   } else {
        $('<div class="span6">' + container.load(url) + '</div>').appendTo('.new');
   }

});

I am trying to load content inside <div class="span6">HERE</div> but I am getting confused on how to set the .load and load the content in it.

Current html output:

<div class="row-fluid new">
   <div class="span6">
       container.load(url)
   </div>
</div>

I guess the row var url = this.href + ".content"; wont work as this.href in the jquery context should be $(this).attr('href') — jtheman
– jtheman, Commented Feb 7, 2013 at 21:31
WHy you have var container, url; and than again var url = this.href + ".content"; var container = $("#content"); — Roko C. Buljan
– Roko C. Buljan, Commented Feb 7, 2013 at 21:31
Have you tried loading first, and then use container.html()? — rkrdo
– rkrdo, Commented Feb 7, 2013 at 21:32
@jtheman changed $(this) and updated the question with th current output — rob.m
– rob.m, Commented Feb 7, 2013 at 21:35

Clemens Klein-Robbenhaar · Accepted Answer · 2013-02-07 22:37:55Z

2

I do not think you should use load this way; it is only meant to place the result into an existing element that you know beforehand. Better use get with a success callback:

    e.preventDefault();

    var url = $(this).attr('href') + ".content";

    [...]

    $.get(url, '', function(result) {
      if ($(".new").length == 0) {
        $('<div class="row-fluid new"></div>').prependTo($row);
        $('<div class="span6">' + result+ '</div>').appendTo('.new');
      } else {
        $('<div class="span6">' + result + '</div>').appendTo('.new');
      }
    });

No need to use the var container = $("#content"); and remove its id in the process.

edited Feb 7, 2013 at 22:37

answered Feb 7, 2013 at 21:39

Clemens Klein-Robbenhaar

3,5371 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

rob.m Over a year ago

Nothing is load, not even adding the new divs

rob.m Over a year ago

this is what i did and i get nothing at all, not even new divs pastebin.com/27DCXS8n

Clemens Klein-Robbenhaar Over a year ago

Ah, I see that url is undefined. If you want to use the href of the currently clicked link, use var url = $(this).attr('href'); instead of the current var $url = ... (just var url = this.href might usually work, too)

rob.m Over a year ago

yes i changed it to var url = this.href + ".content"; but it doesn't load the content, what it does is it replaces the whole thing. I don't see the new divs created

Clemens Klein-Robbenhaar Over a year ago

ah, phew, thanks, curiously I had a similar problem with the $ just a few hours ago ;)

|

Collectives™ on Stack Overflow

how to load content in a dynamic created div with ajax on a click

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related