Set by code data-theme in JQMobile

Question

I have a page created dinnamically with jquery mobile and javascript. I am retrieving some data from server with ajax for showing on the page (descriptions, title,..., data-theme).

I have created the code of my page in html and in javascript I have something like:

$(document).on('pagebeforecreate', '#descripcion', function (event, ui) {
retrievePoiData();
function retrievePoiData(){
  var jsonFile = '{"poi":"' +  poiID + '"}';
  $.ajax({
          type: "POST",
          url: urlServer+"retrieveData.php",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          data: jsonFile,
          success: function(response) {
                  title = response['title'];
                  latitude = response['coordinates']['lat'];
                  ...

Then, in success function I set all texts and images of my webpage:

          document.getElementById("title_poi").innerHTML = title;
          document.getElementById("image_poi").src = imageURL;
          document.getElementById("derecha_poi").innerHTML = description_short;
          document.getElementById("descr_larga_poi").innerHTML = description_long;

And I can see them in my webpage.

But each time I tried to do the same with data-theme, I can't. Theme is always "a". I have a css file with lots of characters (a,b,c.....,v). I haven't found in my code any reference to "a" so I don't know why jqm is loading that theme.

I just want to set data-theme in data-role header and footer. Not in more places. What is the correct way to do it?

If you need to see more code, just ask.

Answer 1

Use .toolbar() method to change theme of header and/or footer.

$(".selector").toolbar({
    theme: "b" /* swatch */
});

.selector = [data-role=header] , [data-role=footer] , #id or .class .

Demo