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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -