Replace HTML element with function

Question

I'm trying to replace the page_title div with the content of the name property. Below is what I have so far but it does not work. I'm new to jQuery any help. I'm using jquery Mobile.

 <script>
var siteData = {
    "name": "Site Name",
    "logo": "",
    "theme": "b",
    "fullSiteLink": "http://www.google.com",
    "pages": [{
            "id": "1364668689503",
            "name": "Page Title",
            "type": "basic",
            "components": {
                "img": "",
                "text": "Page content"
            }
        },
    }]
}
</script>

UPDATE

 $(document).ready(function(siteData) {
     //site name
     $('#page_title').html(siteData["name"]);
 });

So I have updated the question, but it still does not pull in name from the json. Instead it's now blank in the html markup. — MarkO, Mar 30 '13 at 19:50
There is nothing related to JSON in you question. JSON is a *data exchange format*, like XML. What you have a is simple object literal. Please be specific about what *"does not work"*. This is not a useful problem/error description. — Felix Kling, Mar 30 '13 at 19:52
@yckart: You might have removed exactly the part which is the reason the OP's code did not work. Why? — Felix Kling, Mar 30 '13 at 19:56

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/gMAf3/

$(document).on('pagebeforeshow', '#index', function(){      
    $(this).find('[data-role="header"] h3').html(siteData.name);
});

     var siteData = {


         "name": "Site Name",
             "logo": "",
             "theme": "b",
             "fullSiteLink": "http://www.google.com",
             "pages": [
         {
             "id": "1364668689503",
             "name": "Page Title",
             "type": "basic",
             "components": {
                 "img": "",
                 "text": "Page content"
             }
         }     ]


     }

Don't use document ready with jQuery Mobile, it will usually trigger before page is inserted into the DOM. To find more about this problem take a look at this ARTICLE, or find it HERE.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 30 '13 at 19:49

Gajotres

57,309
16
102
130

1

Given that you're not changing the HTML, why not simply use [`text()`](http://api.jquery.com/text/)? – David Thomas Mar 30 '13 at 19:50
In this case I can use it because it is a plain text. Reason for html() is just to be on a safe side, people usually don't understand difference between text() and html(). So when they start dynamically building jQM page with a text() there's a problem. – Gajotres Mar 30 '13 at 19:57
2

Well, since it [doesn't make any significant difference](http://jsperf.com/brief-look-at-html-vs-text), anyway, it's not really worth worrying about I guess. Was just curious, really. =) – David Thomas Mar 30 '13 at 19:59

score 1 · Answer 2 · answered Mar 30 '13 at 19:51

1

$(document).ready(function () {

    // Declare the object here
    var siteData = {....};

    // Set the title
    $('#page_title').text(siteData["name"]);
});

answered Mar 30 '13 at 19:51

palaѕн

72,112
17
116
136

Replace HTML element with function

2 Answers2