Loading Content Via Ajax

Question

Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.

I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.

<div id="#ajax-wrap"></div>

I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.

Link:

<a href="always a different url" class="home-right"></a>

Current jQuery:

$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});

Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.

Thanks in advance for any help folks!

Answer 1

try this:

$(function(){
    $("a.home-right").click(function () {
          $('#ajax-wrap').slideUp();                                  
           var url = $(this).attr("href")                                 
          $.ajax({
            type: "get",
            url: url,
            success: function(msg){
                $('#ajax-wrap').html(msg)        
                $('#ajax-wrap').slideDown();
            },
            error: function(){
              alert("An error occured");
            }
      });
    })

})

Answer 2

You can simply use the ajax like this:

$("a.home-right").click(function () {
  $.ajax({
    type: "get",
    url: "YOUR URL HERE",
    success: function(data){
           $('#ajax-wrap').html(data);
          $('#ajax-wrap').slideToggle();
    },
    error: function(){
      alert("An error occured");
    }
  });
});

Answer 3

Use get:

// Inside click handler
$.get('url_that_returns_data')
  .done(function(response){
    var $response = $(response);
    $('#ajax-wrap').html($response.find('#content')).slideToggle();
  });

Answer 4

You want to set the ajax for the links. Requirements:

1. Writing a handler for links.
2. We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
3. Removing old data ajax recieved from server and make the #ajax-wrap fresh.
4. Load the remote page via ajax and set it to #ajax-wrap.
5. Now slide it down.

---

// Document Ready
$(function () {

    // attaching click handler to links
    $("a.home-right").click(function (e) {
        // cancel the default behaviour
        e.preventDefault();

        // get the address of the link
        var href = $(this).attr('href');

        // getting the desired element for working with it later
        var $wrap = $('#ajax-wrap');

        $wrap
            // removing old data
            .html('')

            // slide it up
            .slideUp()

            // load the remote page
            .load(href + ' #content', function () {
                // now slide it down
                $wrap.slideDown();
            });
    });

});