javascript - How to force jQuery mobile to apply styling after ajax request and page update -
i trying force jquery mobile apply styling contents loaded in after ajax call.
i unable post link json file privacy , security reasons posted code below.
what trying after stuff json files, load result .ui.content. works fine styling not apply.
i new jquerymobile , read use .trigger('create') , have tried not know happening , still not styling or maybe not doing right way..
here code use.
thanks.
<!doctype html> <html> <head> <!-- include meta tag ensure proper rendering , touch zooming --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- include jquery mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- include jquery library --> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- include jquery mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <title>our video download</title> <style> body{ text-align: center; font-family: arial; } .button{ margin:20px; font-size:16px; font-weight: bold; padding:5px 10px; } </style> <style> a{ text-decoration:none; } </style> </head> <body> <div id="content" data-role="page"> <div data-role="header"> <h1>video download</h1> </div> <div data-role="main" class="ui-content"> <div id="display"> display place </div> <input id="studio" type="button" value="studio" onclick="processit('linktostudio.json')"/> <input id="family" type="button" value="family" onclick="processit('linktofamily.json')"/> <input id="teenagers" type="button" value="teenagers" onclick="processit('linktoteenager.json')"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> <!-- file size conversion feature --> function humanfilesize(bytes, si) { var thresh = si ? 1000 : 1024; if(math.abs(bytes) < thresh) { return bytes + ' b'; } var units = si ? ['kb','mb','gb','tb','pb','eb','zb','yb'] : ['kib','mib','gib','tib','pib','eib','zib','yib']; var u = -1; { bytes /= thresh; ++u; } while(math.abs(bytes) >= thresh && u < units.length - 1); return bytes.tofixed(1)+' '+units[u]; } // file conversion function ends here html = ""; function processit(url){ $.ajax({ url: url, datatype: "text", success: function(data) { var json = $.parsejson(data); category_and_description = '<h1> jw video ::' + json.category.name + "</h1> <br />" + json.category.description; html += category_and_description; categoryname = json.category.name; $.each(json.category.subcategories, function() { subcategoryname = this.name; category_and_subcategory = '<h2> ' + categoryname + "->" + subcategoryname + '</h2>'; html += category_and_subcategory; $.each(this.media, function(){ //individual video title videotitle = this.title; videoduration = this.durationformattedminsec; vid_title = '<div data-role=\"collapsible\" data-collapsed-icon=\"carat-d\" data-expanded-icon=\"carat-u\" data-content-theme=\"a\" data-default="true" data-inset=\"true\"> <h4>' + videotitle + '</h4 </div>'; vid_duration = '<strong>' + this.durationformattedminsec + '</strong>'; html += vid_title; //$.each(this.) // alert(videotitle + "\n" + videoduration); $.each(this.files, function(k, v){ eachlink = '<a href=' + v.progressivedownloadurl + ' ' + ' data-role="button" data-enhance="true" data-icon="arrow-d" data-inline="true" data-mini=false>' + v.label + "->" + humanfilesize(v.filesize,true) + '</a>'; html += eachlink; //$('.ui-content').trigger("create"); $('.ui-content').html(html); }) }) }); } }); }; </script> </div> <div data-role="footer"> <h1>footer text</h1> </div> </div> </body> </html>
Comments
Post a Comment