Javascript - Apply CSS after page has finished initializing
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.
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.
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().
加载中,请稍侯......
精彩评论