.hide() method not working

Question

I'm simply try to hide a select element before a page loads. Here is my Javascript / jQuery:

$(document).on('pagebeforeshow','#searchpage', function() {
    $("#searchuniversitycampus").empty();
    $("#searchuniversitycampus").hide();        
});

Here is my HTML:

<select name="searchuniversitycampus" id="searchuniversitycampus" ></select>

I'm not sure as to why the element is still shown when the page is loaded.

@JeevanJose no, it wasn't a random downvote. please read the comment I left, as why I downvoted the answers. — Omar, Jun 27 '13 at 13:57
@Omar Yea, I commented before you'd specified the reason. Thank you for pointing the error out. I guess none of us noticed that the OP was talking about mobile. — reggaemahn, Jun 27 '13 at 14:01
@JeevanJose that's why tags are made for; plus `pagebeforeshow` is a jQuery Mobile event. — Omar, Jun 27 '13 at 14:04

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

jQuery Mobile wraps select with a div with class ui-select. You need to use .closest() to target that div and hide/show it.

Demo: Using .hide() / .show().

Demo: Using custom class and .toggleClass() - Recommended.

$("#searchuniversitycampus").closest('div.ui-select').hide();

Explanation

.closest(): It begins with the current element, and travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set, in document order.
.parents(): It begins with the parent element, and travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied. The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order.

Recommendation

For jQuery Mobile, It is recommended to add/remove custom classes rather than using inline styles. Using .hide()/.show() adds style attribute to the element display: none;/display: block; which may cause conflict with elements that have display: block; in jQuery Mobile CSS.

In light of the above, instead of using .hide()/.show(), make a custom class:

.hide {
  display: none !important;
 }

and use it with .toggleClass() or .addClass()/.removeClass().

You are the one!! Thank you so much! Thanks to everyone else for the replies as well!! Omar could you possible explain further what exactly the closest() method does? — user481610, Jun 27 '13 at 13:21
@user1638809 you're welcome :) I'll update my answer with more details. Check it back in 15 mins. — Omar, Jun 27 '13 at 13:29

score -1 · Answer 2 · answered Jun 27 '13 at 12:47

-1

Change your code to this:

$(function(){
  $("#searchuniversitycampus").empty();
  $("#searchuniversitycampus").hide();
});

I hope I understand your question correctly. You want to hide it on page load. If you are only trying to hide it untill the document loads completely and then want to show it, add this to the above:

$(document).ready(function(){
  $("#searchuniversitycampus").show();
});

answered Jun 27 '13 at 12:47

reggaemahn

6,272
6
34
59

Currently the searchuniversitycampus element is visible. I basically want the element to be invisible on that page. So hence the reason I use the .hide() before the page loads. Unless there's another way of making the searchuniversitycampus element invisible – user481610 Jun 27 '13 at 12:53
1

Well, if all you want to do is hide it then no jquery needed. Just do this: – reggaemahn Jun 27 '13 at 12:56
I've literally copy pasted your code and still nothing the element still appears on the page... SIGH. I'm honestly not sure whats going wrong – user481610 Jun 27 '13 at 13:04
Here is a working fiddle. You can see the difference: http://jsfiddle.net/Cxyek/ – reggaemahn Jun 27 '13 at 13:09
`.ready` shouldn't be used with jQuery Mobile. Reason: http://stackoverflow.com/a/14469041/1771795 – Omar Jun 27 '13 at 13:13
The code you gave me earlier works perfect on the jsFiddle so its clearly not the code, perhaps there's some conflict with the jquery and the jquery mobile? or some other libraries that I'm using because that can only be my next guess – user481610 Jun 27 '13 at 13:16
@user1638809 If you create a fiddle for your page we might be able to help you better. – reggaemahn Jun 27 '13 at 13:22

.hide() method not working

2 Answers2

Explanation

Recommendation