Javascript - Apply CSS after page has finished initializing

Question

So I am building a form dynamically with inputs styled with Jquery Mobile and was wondering if there was a way to trigger a refresh not related to Jquery. Basically, I am using a 3rd party plugin for a date picker and when the page loads, it is not getting the appropriate styles. Does anyone know of a method to refresh a single input to a form?

I don't want to reload the whole page, just refresh the form to apply the 3rd party styles to the single input. Sorry if this is a noob question, I am just getting started with JS and HTML5. Does anyone have any suggestions?

UPDATE: So the HTML string I am building and inserting into the form looks like this:

<input id="date-example" type="date" data-options="{'mode':'calbox'}" data-role="datebox" name="date-example">

This works perfectly if I add it to the page HTML, but not when I add it dynamcially into the form. The strings are identical which I can only assume means it is not refreshing with the CSS styles.

not sure I understand, are the styles loaded on the page? why do you want to "refresh"? — jesse reiss
– jesse reiss, Commented Sep 7, 2011 at 18:31
Well bascially I am building the from from an AJAX call, parsing the output and building a string. Then I add it to the form HTML and refresh the form. This all works fine for the native JQM widgets, but the date picker is not formatting because it is a 3rd party plugin. It is not getting the styles specified in the CSS file. I am really not sure why... — gabaum10
– gabaum10, Commented Sep 7, 2011 at 18:34
If you refresh the whole page does it work/look the why you want? — Phill Pafford
– Phill Pafford, Commented Sep 7, 2011 at 19:35
No, refreshing the page rebuilds everything again. At then end of building my HTML string, I do this: $(form).html(formFields); $(form).trigger('create'); Which reloads the forms with the new inner HTML, applying the necessary CSS — gabaum10
– gabaum10, Commented Sep 7, 2011 at 19:37

T. Stone · Accepted Answer · 2011-09-07 19:22:07Z

2

So, a rule with jQuery mobile is that you need to un-learn a lot of common practices. JQM navigates to the next page by downloading the target page via AJAX then loading it's HTML into a DIV and animating that DIV onto the current DOM.

One (of the many) side effects of this is that media assets, CSS, JS, whatever, need to be planned carefully. It's likely that the CSS for this 3rd party datepicker widget is in the <head> of the document being navigated to? Things that are in the <head> don't always get loaded.

I've gotten around this by moving some things to the <body> tag but that's kind of a hacky solution. The better way is to have a single, minified and compressed CSS file that serves up everything needed, including the datepicker's CSS.

answered Sep 7, 2011 at 19:22

T. Stone

19.5k15 gold badges72 silver badges100 bronze badges

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

2 Comments

gabaum10 Over a year ago

I don't think it is this. I tried combining the CSS file into my main application CSS file. It worked when I added the date picker to the static HTML, but still nothing when I try to build the form...

gabaum10 Over a year ago

Determined it was a bit of all of this. I moved the order the JS/CSS was loading and it seemed to do the trick. Thanks.

ggutenberg · Accepted Answer · 2011-09-07 19:16:17Z

1

It's likely that the CSS that's being applied to the date picker is either declared inline or has precedence to what you've declared.

If it's a precedence issue, check out http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/.

If it's an inline issue, just add something to your code that overrides these values. Ex:

$(document).ready(function() {
    $('.datepicker').css('color', 'blue');
});

You don't have to "refresh" the page. With the above code, when all of the elements have loaded the inline style(s) will be applied. You can do the same thing in your AJAX callback instead of $(document).ready().

answered Sep 7, 2011 at 19:16

ggutenberg

7,4008 gold badges42 silver badges48 bronze badges

1 Comment

T. Stone Over a year ago

jQuery Mobile has it's own DOM ready which should be used instead. This is due to the way jQM loads pages via AJAX.

Collectives™ on Stack Overflow

Javascript - Apply CSS after page has finished initializing

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related