I have a simple html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="c">
<div data-role="page">
<div data-role="header">
<h1> My Title </h1>
</div>
</div>
</div>
</body>
</html>
when the page loads this is how jquery “parses/formats” the body of that html:
<body>
<div id="c" class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
</div>
</body>
Note that tags have new attributes. Now my question is how can I know what function of jquery mobile library is doing that? I will like to call the method that is doing that!
The reason why I will like to call that method is because I replace the content of div id ‘c’ with ajax and the page does not render as I want it to. In other words doing:
$.ajax({
url: 'someUrl',
success: function (result) {
/*
result = "content of first example" =
<div data-role="page"><div data-role="header"><h1> My Title </h1></div></div>
*/
$('$c').html( result );
// I will like to call here something like: $('#c').RrenderHtml();
}
});
does not renders as I want it to. The reason why it not renders correctly is because the tags in the div id c does not have the attributes that jquery created on them when the page loads.
A solution to this problem will be return:
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
Instead of:
<div data-role="header">
<h1>
My Title
</h1>
</div>
On the ajax call. The problem with that solution is that I will have to figure out how each response will be formated on a new page by jquery when the page loads. Also some responses I am creating them dynamically like tables. Maybe I could create an iFrame place the jquery libraries in there also the response from the ajax call in the body wait for the page to load and then finally take the end resoult Hope I explained my self correctly.
You don’t need to know the methods. There is already a method provided to enhance injected pages and it’s:
More on this here: