SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: Best way to show removed/hidden elements?

    Hi all,

    I'm currently doing a little function which will remove tbodies from a table depending on a value selected in a drop down menu, the only issue is that I'm not really sure how to "reset" the function each time I pick a new value. As it is now, once an element is removed - it won't show up if I pick the item in the drop down menu. Any suggestions?

    Code below:

    Code JavaScript:
    jQuery(document).ready(function() {
    	var city = document.getElementById('changeCity');
    	city.onchange = function() {
    		var selected = this.options[this.selectedIndex];
    		cityName = selected.getAttribute('value');
    		switch(cityName) {
    		case "london":
    			jQuery('#calendar tbody').not(':contains("London"), :first').hide();
    			jQuery('#calendar h2').replaceWith('<h2>London</h2>');
    			break;
    		case "tokyo":
    			jQuery('#calendar tbody').not(':contains("Tokyo"), :first').hide();
    			jQuery('#calendar h2').replaceWith('<h2>Tokyo</h2>');
    			break;
    		case "newyork":
    			jQuery('#calendar tbody').not(':contains("New York"), :first').hide();
    			jQuery('#calendar h2').replaceWith('<h2>New York</h2>');
    			break;
    		case "rest":
    			jQuery('#calendar tbody').hide(':contains("London"), :contains("Tokyo"), :contains("New York")');
    			jQuery('#calendar h2').replaceWith('<h2>Other cities</h2>');
    			break;
    		}
    	}
    });

  2. #2
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey, there are two options (that I know of), you could use if-clauses and use the opposite of "hide" - being "show".

    But alot easier is the jQuery.toggle(showhide) (http://api.jquery.com/toggle/) method.

    From the jQuery api:

    With no parameters, the .toggle() method simply toggles the visibility of elements:

    $('.target').toggle();

    The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
    Hope that helps

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks behati,

    Just solved it a minute ago. Probably not the best way, but it work: I just placed a jQuery('#calendar tbody').show(); right at the beginning of the anonymous function. So on each change it would first show everything and then continues with hiding unwanted elements.

    But there's another issue... The last one, which should display everthing else, removes everything. However, if I use remove rather than hide it works fine. And I have basically no idea how to fix that.

  4. #4
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Doesn't sound like the best of solutions, but if it's a relatively small table I guess it won't be a problem really (performance wise)


    Quote Originally Posted by madmats View Post
    But there's another issue... The last one, which should display everthing else, removes everything. However, if I use remove rather than hide it works fine. And I have basically no idea how to fix that.
    That sounds very odd! Is your method maybe trying to hide elements that are already hidden? It could be the same as above, calling .hide() on a hidden object would have little effect, while .remove() is different. All in all it still sounds to me like .toggle() would be a much easier way to go!

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha no, but it's a temporarily solution until I've learned some PHP so I can create my own database to output the information correctly rather than doing it this way.

    It's this part that doesn't work:

    case "rest":
    jQuery('#calendar tbody').hide(':contains("London"), :contains("Tokyo"), :contains("New York")');
    jQuery('#calendar h2').replaceWith('<h2>Other cities</h2>');
    break;

    For some reason, it hides all tbody tags. That's what I can't figure out. I'm gonna see if I can use toggle for this little function.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •