.removeClass() working on jsFiddle but not in the browser

Question

Im using jquery mobile and trying to remove some classes instead of writing up a bunch css. When I test it in jsFiddle it works fine but not when I view it in the browser. Ive put the script inside the data-role="page" so it should of loaded correctly. Ive also tried .trigger("updatelayout"); but that did not seem to work. Any help would be much appreciated since this should have been a 2 minute task turn into 2 hour headache.

jquery:

$("#panelforminput div").removeClass("ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c");
$("#newdoctorDiv ul").removeClass("ui-shadow");

jsFddle:

http://jsfiddle.net/adam123/9XXcj/6/

here's the markup from firebug:

<span id="panelforminput" class="ui-li-aside">
  <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini">
    <input id="adddocFirstName" class="ui-input-text ui-body-c" type="text" data-mini="true"
    placeholder="John" value="" name="adddocFirstName">
  </div>
</span>

Did you put the code inside ready callback function? It may not a problem in jsFiddle, because jsFiddle does that for you. — Okan Kocyigit, Apr 27 '13 at 14:39
It should be working everywhere, assuming you have the right jQuery and jQuery UI libraries. Are you sure that you're calling it in the right place? Try putting an alert('testing'); tag just after you remove the class to see if it's doing something you don't expect, or put a break point in the script debugger in Firebug — Brian Hoover, Apr 27 '13 at 14:40
@Adam You've added the jQuery Mobile tag. So in case you're using jQuery Mobile, note that you shouldn't use the document ready handler in combination with jQuery Mobile. The reason is that jQuery Mobile uses by default Ajax for navigations and you will face issues with the execution of the document ready handler. It is recommended to check the jQuery Mobile events like api.jquerymobile.com/pageinit — Apostolos Emmanouilidis, Apr 27 '13 at 14:58

score 4 · Accepted Answer · answered Apr 27 '13 at 14:40

4

You need to put the script in document.ready in your code to make the elements available to your script also make sure you included jQuery successfully, read how jQuery works.

In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code, Reference.

answered Apr 27 '13 at 14:40

Adil

146,340
25
209
204

2

It is not recommended to use the document ready handler in combination with jQuery Mobile. http://api.jquerymobile.com/pageinit/ – Apostolos Emmanouilidis Apr 27 '13 at 14:51
@TolisEmmanouilidis I agree but when I initially tried this it did not work, it's possible that I had a typo in my selector at the time, because it works now! Thank you!!! – Adam Apr 27 '13 at 14:59
It will @Adam but its not recommended. – Omar Apr 27 '13 at 15:06

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

jQuery Mobile - .ready() vs page events

For jQuery Mobile refrain from using .ready() in your code. Stick to jQuery Mobile events http://api.jquerymobile.com/category/events/

In your case, you can use pagebeforeshow or pageshow. Hence, your code should look like this.

$('.selector').on('pagebeforeshow', function () {
 // code
});

edited May 23 '17 at 12:18

Community

1
1

answered Apr 27 '13 at 14:58

Omar

32,302
9
69
112

Are you saying I should not use .on("pageinit", function() {});? – Adam Apr 27 '13 at 15:19
1

@Adam `pageinit` fires only one time, once the page is inserted into DOM. However, `pageshow`, `pagebeforeshow`, `pagehide`, `pagebeforehide`..etc fire each time the event occurs. I've added a link explaining the difference between `.ready()` and other events. – Omar Apr 27 '13 at 15:26

score 0 · Answer 3 · answered Apr 27 '13 at 14:41

$(document).ready(function(){

$("#panelforminput div").removeClass("ui-shadow-inset ui-corner-all ui-btn-shadow ui-body- 
c");
$("#newdoctorDiv ul").removeClass("ui-shadow");
});

The jQuery code you need to write with in the ready function only.

SEE HERE

.removeClass() working on jsFiddle but not in the browser

3 Answers3

Linked