Response title
This is preview!
how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)
in jQuery Mobile
•
9 years ago
I have a system setup like the following
Phonegap Backbone for routing Jquery + jquerymobile for dom manipulation and UI
in the backbone view, I am dynamically loading a template from a file, and try to inject it into the html, but after page is loaded, no css is applied to the dynamically injected content. I tried everything from page() etc, nothing worked
here are my codes
view
render : function() { alert('render main'); try { var template = _.template(tpl); this.$el.html(template).page(); //append to the selector or perform other jquery dom manipulation option this.$el.attr('data-role','page'); $(this.holder).html(this.$el.html()); //$('body').append(this.$el.html()); return this; } catch (error) { DEBUG(MSG_TYPE_ERROR,'render mainview error'+error.message,'MainView'); } }router//jquery changepage changePage: function (page, page_reverse, page_transition) { alert('change page called '+page.page_id); try { page.render(); $.mobile.changePage($(this.currentView.el), {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition}); } catch (error) { DEBUG(MSG_TYPE_ERROR,' change page error in router >> '+error.message+' : '+error.stack,'AppRouter'); } }html to inject<div id="main_template_wrapper"> <div data-role="header" data-position="fixed" data-theme="b"> <h1>title</h1> </div><!-- /header --> <div data-role="content" data-theme="a"> <a href='#userprofile' data-role="button">userprofile</a> <a href='#login' data-role="button">login</a> <a href='#tutorial/1/1' data-role="button">tutorial</a> <a href='./spec.html'>Jasming</a> </div><!-- /content --> <div data-role="footer" data-id="fool" data-position="fixed" data-theme="b"> <div data-role="navbar"> </div><!-- /navbar --> </div><!-- /footer --> </div>inject into<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=false"> <script type="text/javascript" src="js/library/phonegap/cordova.js"></script> <!-- Load jquery css files --> <link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.3.2.min.css"> <!-- use require.js to load system --> <script data-main="js/main.js" src="js/library/require/require.js"></script> <!-- <script data-main="js/jm_requirejs_test.js" src="js/library/require/require.js"></script> --> <title>Title</title> </head> <body class="main_body"> <div id="page_holder"> </div> </body> </html>
I tried everything, page, trigger('create') etc. trigger just cause wierd css to be applied
1