jQuery append to element

Question

What I want to do is, to create a button and this button is pressed, it will change the theme color on my jQuery mobile test site.

So say that my html parent div looks like this

<div id="firstPage" data-role="page">

I want it so that on click, that it appends data-theme="theme letter here" to the div so that it ends up like this <div id="firstPage" data-role="page" data-theme="theme letter here">

OR

If I start the div like this <div id="firstPage" data-role="page" data-theme="theme letter here"> That on the buttons click, that it changes that data-theme attribute to another letter

so something for example, like this

$('#themeBtn').click(function(){
        $('#firstPage').setAttribute("data-role","ANOTHER theme letter");   
    });

or

$('#themeBtn').click(function(){
        $('#firstPage').append("data-role","a");    
    });

or something like this. How can I properly go about this?

Thanks in advanced.

EDIT* based on the responses, ive tried**

/////////////TESTING THEME BUTTON (check STACK OVERFLOW for answer)
$('#themeBtn').click(function(){
    //$('#firstPage').jqmData("role","a");
    //$('#firstPage').attr("data-theme","a");
    //$('#firstPage').jqmData("theme","a");
    $('#firstPage').data('theme','a');
});

To make sure that the button is firing off, i commented all those lines out and did a simple

$('#themeBtn').click(function(){
    alert("foo");
    });

and sure enough it fired the alert on button click so im positive its working.(the button i mean).

I added a jsFiddle so you can see it in action(of not working lol) http://jsfiddle.net/somdow/yRmKd/1/ if you un-comment the alert, itll fire off, when you uncomment the other lines(based on responses) it doesn't update.

Andreas Wong · Answer 1 · 2012-08-22T09:53:58.573

0

You can use jqmData method:

$('#firstPage').jqmData('role', 'a');

docs

When working with jQuery Mobile, jqmData and jqmRemoveData should be used in place of jQuery core's data and removeData methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).

edited Aug 22 '12 at 09:53

answered Aug 22 '12 at 09:48

Andreas Wong

59,630
19
106
123

2

doesn't jQuery Mobile use jqmData() instead? docs: http://jquerymobile.com/test/docs/api/methods.html – Zathrus Writer Aug 22 '12 at 09:51
Hello thanks for the reply, ive edited my post to show what ive tried based on the reply, and its not working. – somdow Aug 22 '12 at 10:03
@somdow: You had some unclosed quotes in your HTML. Try this: http://jsfiddle.net/somdow/yRmKd/1/. – João Silva Aug 22 '12 at 10:47
@somdow If you are looking to change the entire theme, there'll be more stuff involved instead of just changing the attribute: http://stackoverflow.com/questions/7972140/jquery-mobile-change-theme-on-click – Andreas Wong Aug 22 '12 at 11:30

score 0 · Answer 2 · answered Aug 22 '12 at 09:50

0

Just use: $('#firstPage').data('theme', 'ANOTHER theme letter');

answered Aug 22 '12 at 09:50

Danil Speransky

29,891
5
68
79

1

doesn't jQuery Mobile use jqmData() instead? docs: http://jquerymobile.com/test/docs/api/methods.html – Zathrus Writer Aug 22 '12 at 09:52
Hello thanks for the reply, ive edited my post to show what ive tried based on the reply, and its not working. – somdow Aug 22 '12 at 10:05

score 0 · Answer 3 · answered Aug 22 '12 at 09:52

0

You can do something like this to set the attribute:

   $('#themeBtn').on('click', function() {
  $('#firstPage').attr("data-theme", "new Theme");   
});

answered Aug 22 '12 at 09:52

Schokea

708
1
9
28

Hello thanks for the reply, ive edited my post to show what ive tried based on the reply, and its not working – somdow Aug 22 '12 at 10:12

score 0 · Answer 4 · answered Aug 22 '12 at 10:17

0

have you tried?

$('#themeBtn').click(function(){
    $('#firstPage').attr("data-role","ANOTHER theme letter");   
});

This should update the data-role

answered Aug 22 '12 at 10:17

Daniel Rivers

68
4

Hello Daniel, Yep i tried that at first and it didnt update. i then tried .removeAttr and it didnt remove it. to MAKE SURE that the button was targeted and firing off, i commented them all out and added a alert('foo'); and sure enough on click it alerted so the button is working. Just cant seem to fire off the theme change on click – somdow Aug 22 '12 at 10:28

jQuery append to element

4 Answers4