How to dynamically set "rolled data" and "data-topics" dynamically in jQuery Mobile?
You can do this with the page to create an event
Note that by linking to pagebeforecreate, you can manipulate the markup before running jQuery Mobile default are automatically initialized. For example, you want to add data attributes via JavaScript instead of in your HTML source, this is the event you will use.
Example:
Js
$('#home').live('pagebeforecreate',function(event) {
var col = $('#collapseMe');
// Alternative settings
//col.attr('data-collapsed','false');
//col.attr('data-theme','b');
col.data('collapsed',false);
col.data('theme','b');
});
Html
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible" data-theme="a" data-content-theme="a" id="collapseMe">
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "A".</p>
</div>
</div>
</div>
</body>
</html>
source to share
You really can't just change the data- * attribute and expect JQM to restore your page. Most of the time "refresh" is used when you add new markup (for example, adding list items) and want JQM to enhance those new items. Most form element widgets have a method, such as .checkboxradio (), to update rich markup from basic inline controls. That is, if you programmatically change the selected radio button, you need to call .checkboxradio ('refresh') for it to update the improved version.
BTW: You really need to learn how to use jsfiddle.net so people can see what you've tried. My answer is "it doesn't work!" doesn't help as we can't tell if you applied the solution correctly or if some special markup is causing the problem. You should create some simple markup and javascript to identify your problem. This will help everyone, without exception, to help you.
Anyway, I created a sample to programmatically collapse / expand collapsible. As you can tell, it's just a matter of firing an expand / collapse event on the assembly. JQM does not provide a way to find out if it crashed or not, so you need to see if a particular class exists as well.
I have an example here: http://jsfiddle.net/kiliman/pEWJz/
$('#page').bind('pageinit', function(e, data) {
// initialize page
var $page = $(this);
$('#toggle-collapsible').click(function() {
var $collapsible = $('#collapsible'),
isCollapsed = $collapsible.find('.ui-collapsible-heading-collapsed').length > 0;
$collapsible.trigger(isCollapsed ? 'expand' : 'collapse');
});
});
You learn a lot in JQM that sometimes you need to know what the enlarged markup looks like and manipulate it.
For example, there is currently no way to dynamically change the theme after a page is zoomed in. You will basically have to go and replace all the classes to use the correct theme. For example, change .ui-body-c to .ui-body-e.
There is a great example in this answer that shows you how to change themes for different elements.
source to share
use this for example:
$(selector).attr('data-theme','b').trigger('create');
http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-scripting.html
source to share