CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Eslam Hamdy
Eslam Hamdy

Reputation: 7386

how to dynamically set the ' data-collapsed' and 'data-theme' dynamically in jQuery Mobile?

i have a problem in setting the 'data-theme' and 'data-collapsed' dynamically at run time, i used:

$(selector).attr('data-collapsed',false)

and 

$(selector).attr('data-theme',b)

but it doesn't work, how to solve this problem using jQuery or javascript?

Upvotes: 3

Views: 14221

Answers (5)

Sathesh
Sathesh

Reputation: 6428

You can use,

$(".selector").collapsible( "option", 'collapsed',false );

or 

$(".selector").collapsible({ collapsed: false });

Upvotes: 3

John Mills
John Mills

Reputation: 11

Here is a brief code snippet illustrating how you can accomplish this:

$('#collapseMe').trigger('collapse');

Upvotes: 1

JensT
JensT

Reputation: 729

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

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85318

You can do the with pagebeforecreate event

Note that by binding to pagebeforecreate, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd 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>
​

Upvotes: 5

Kiliman
Kiliman

Reputation: 20312

You really can't just change the data-* attribute and expect JQM to restyle your page. For the most part, 'refresh' is used when you add new markup (like adding list elements) and want JQM to enhance those new items. Most form element widgets have a method like .checkboxradio() to update the enhanced markup from the underlying native controls. That is, if you change the selected radio button programmatically, you need to call .checkboxradio('refresh') so it will update the enhanced version.

BTW: You really should learn how to use jsfiddle.net so people can see what you've tried. Responding with 'it doesn't work!' doesn't help, since we can't tell if you've applied the solution properly or if particular markup is causing issues. You should create the simplest markup and javascript to identify your problem. That will help everyone out immensely in assisting you.

Anyway, I've created a sample for programmatically collapsing/expanding a collapsible. As you can tell, it's simply a matter of triggering the expand/collapse event on the collapsible. JQM doesn't provide a way to find out if it's collapsed or not, so you have to look too see if a specific class exists.

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'll notice a lot in JQM that you will sometimes need to know what the enhanced markup looks like and manipulate that.

For example, there is currently no way to dynamically change the theme once a page is enhanced. 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.

This answer has a great example that shows how to change the themes on various elements.

change jquery mobile color swatch dynamically

Upvotes: 2

Related Questions