jquery: replacing div with URL get request instead of a showing a hidden div

Question

new to jquery here and I've been learning how to show/hide divs. I'd like to take it a step further and be able to replace a div with an AJAX call instead of showing a hidden div.

In this example I've been working on, the 'expand' button hides div.post-small and shows div.post-big

http://jsfiddle.net/ejwFr/

How would I begin to modify this so that the 'expand' button instead hides div.post-small and replaces the contents of div.post with an AJAX request (which would return a hypothetical div.post-big-ajax)

Thanks a lot for any insights!!

Jeff Wilbert · Accepted Answer · 2011-11-23 22:07:28Z

1

Use the load() method

Description: Load data from the server and place the returned HTML into the matched element.

Example

$("div.expand").click(function() {
    $(this).parent('.post-small').hide();
    $(this).parent().next().load('ajax/content.html');        
});

Load() fetches data from the server via an AJAX call and sets the HTML contents of the matched element to the returned data.

edited Nov 23, 2011 at 22:07

answered Nov 23, 2011 at 21:30

Jeff Wilbert

4,5201 gold badge24 silver badges36 bronze badges

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

2 Comments

trying_hal9000 Over a year ago

thanks for the help, I think I actually do need the .post-small to be hidden, and for the ajax to load into .post-big so that a user can 'close' .post-big and show .post-small again. Does that make sense?

Jeff Wilbert Over a year ago

That's actually the way I originally answered my question until I saw what you had typed in your question. I went ahead and reverted my answer back to the way I originally thought and the way you want it.

JesseBuesking · Accepted Answer · 2011-11-23 21:36:36Z

0

I think you want something like this jsfiddle update...

answered Nov 23, 2011 at 21:36

JesseBuesking

6,6165 gold badges46 silver badges92 bronze badges

Comments

Chris · Accepted Answer · 2011-11-23 21:39:10Z

0

You probably want something like this which checks if the div has content before loading in the html through ajax if it's needed. The load method retrieves the data and sets the html content of the element to what has been returned.

$("div.expand").click(function() {
    $(this).parent('.post-small').hide();

    //if content exists, ajax has been executed just show the div
    if ($(this).parents('.post').find('.post-big').text().length > 0) {
        $(this).parent('.post').find('.post-big').show("slow")
    }
    else {
        //perform the ajax call to the page set up to return the content
        $(this).parent('.post').find('.post-big').load('ajax/content.html');
        $(this).parent('.post').find('.post-big').show("slow")
    }

});

can also be seen in this jsfiddle http://jsfiddle.net/FMjum/

answered Nov 23, 2011 at 21:39

Chris

3,1521 gold badge21 silver badges27 bronze badges

3 Comments

trying_hal9000 Over a year ago

thanks for the help, is there a way to have jsfiddle load an actual ajax response, right now nothing shows up

Chris Over a year ago

I've been trying to work that out myself, i'm relatively new to jsfiddle myself ^^

trying_hal9000 Over a year ago

got it $(this).parents('.post').load('/echo/html/', { html: 'Hello!' }); });

Collectives™ on Stack Overflow

jquery: replacing div with URL get request instead of a showing a hidden div

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related