CODEWITHSUNDEEP
jqueryhide
bingjie2680
bingjie2680

Reputation: 7773

How can I hide element loaded via ajax

I would like to hide some part of content loaded via ajax, when the content is inserted into html page. those live, bind, and delegate are only for events, what can I use here?? thanks for help.

update: initially, the same part was already hidden when the page loaded.

initially, I have something like this:

<a id="link" href="">a link</a>
   <ul class="list">
         <li>...</li>
         <li>...</li>
   </ul>

and jquery:

$('.list').hide();
$('#link').moserover(function(){
      $('.list').show();
})

Now, this part will be replaced with other content received from ajax,which is the same,

 <a id="link" href="">another link</a>
   <ul class="list">
         <li>****</li>
         <li>****</li>
   </ul>

but when this content is inserted to the page,,, the list is not hidden, my question is how can I hide this list whenever it comes from ajax. hope this is clear.

Upvotes: 2

Views: 17557

Answers (6)

Aspfreak Kunzmann
Aspfreak Kunzmann

Reputation: 9

display:hidden .. via css ..

$(".elementid").css("display","none");

Upvotes: 0

Andrew Rasskazoff
Andrew Rasskazoff

Reputation: 3

As one of the solutions:

$("#myAjaxContent").fadeOut(1);

Upvotes: 0

jfriend00
jfriend00

Reputation: 707606

If you want it hidden by default when it first loads, use CSS in a stylesheet or put an inline style on it in the markup. That will make it's default condition hidden. If, there's some reason you can't do that, then right after it is loaded via ajax, you can hide it with jQuery.

If there's more to your question than this, please clarify or explain in more detail what you want.

Suppose the content you're adding is this:

<div id="myAjaxContent">My content here</div>

Then, you could just have CSS in your stylesheet like this and the element will automatically be hidden without you having to do anything else (no jQuery required):

#myAjaxContent {display: none;}

or you could have an inline style on the content:

<div id="myAjaxContent" style="display: none;">My content here</div>

Or, if you want to show/hide it with code, you can use this right after the ajax call completes (it is your code that loads it via ajax so you can run any code you want after it's loaded):

$("#myAjaxContent").hide();

.live() is only for events like clicks. You can't use .live() to automatically call hide() on any new elements. You would use pre-defined CSS (either in a stylesheet or inline on the object) to do that.

If you want it to be easy to toggle visibility later, then put a specific class on the object:

<div id="myAjaxContent" class="notVisible" style="display: none;">My content here</div>

and have a pre-defined CSS stylesheet rule like this:

.notVisible {display: none;}

The, later on, if you want to programmatically show the object, you can just do:

$("#myAjaxContent").removeClass("notVisible");

and that will show it.

Upvotes: 3

Nic
Nic

Reputation: 13733

My vote is for rethinking your current method.

You are making an AJAX call and returning a whole block of HTML, which is structurally similar to what you already had in the page when you loaded it. This seems a little inefficient, and creates more overhead (as you are seeing).

Try returning the li or a values in JSON/XML, then using .text() to replace the values in the HTML. This will be beneficial in a few ways; you're reducing the size of your response and accomplishing what you need.

Upvotes: 0

Gowri
Gowri

Reputation: 16845

if you using jquery load then you can perform things in call back function

small example here 

$('#result').load('server.php', function() {

$(".list").hide();  

});

Edit

If you don't want to write code again and again thats good.

So you can declare function and call it where every you want ! like

function foo(){

// your code
}

//call it on document load
foo();

 $('#result').load('server.php', function() {    
    foo();    
    });

but in your case it just single line code.if you still like to simplify it, Thats simple

var myele =  $(".list");

myele.hide();
myele.show();

Hope it helps it

Upvotes: 4

Soatl
Soatl

Reputation: 10592

Well you could try to have the AJAX return a string of html code to insert. Make sure there is an ID or class for each item that you want to hide. Then through a few simple .apppend() or .html() calls you can add all that code to your page.

From there its as easy as using $('#YourID').css('display', 'none');

Upvotes: 1

Related Questions