0

I have a 2 pages in a document. The active page displays a list and on click on the list, I display the second page. The content div of the second page is dynamically added along with some custom css in the JS. The below Java script does this job, but I am not able to get the css render. 

   $("#showmore").live("click", function(event, param1){       
        getUrl = $(this).attr('data-href');
        $.post(getUrl, function(data){  
            $.mobile.hidePageLoadingMsg(); 
            $('#more').html(data);
            $.mobile.activePage.page().trigger('refresh');
        });    
    });

I also tried $.mobile.activePage.trigger('create'); .This works, but I go back and forth the two pages. But when i click on the list the second time the contents does not get rendered at all. Its a blank page with just the header!

Can anyone share your expertise on how I can go about adding dynamic contents with css to a secondary page and display it as many times I want to from the same page?

Improve this question
3
  • im looking for the same answer i think. I am trying to change the background of a single list item. JQM adds their CSS classes after mine, thereby overriding them. Commented Apr 19, 2012 at 21:09
  • 1
    @Mike_G When jQuery Mobile adds the classes when it initializes widgets, your classes are not removed. That gives you the ability to either use !important in your CSS declaration or you could make more specific CSS rules so they are used over the jQuery Mobile classes: .ui-mobile .ui-page .ui-content .ui-listview .ui-li .ui-btn { color : hot-pink; }... for example will override the jQuery Mobile styles because it is so specific (but will work for all buttons inside list-view list-items inside the content section inside a pseudo-page inside a jQuery Mobile webpage). Commented Apr 19, 2012 at 21:12
  • thank you so much for the tip jasper! Commented Apr 19, 2012 at 21:21

2 Answers 2

Reset to default
1

You only need to call .trigger('create') on the elements you are replacing:

$("#showmore").live("click", function(event, param1){       
    var getUrl = $(this).attr('data-href');//don't unnecessarily create global vars
    $.post(getUrl, function(data){  
        $.mobile.hidePageLoadingMsg();

        //since you are only changing this HTML, you only have to initialize this HTML
        $('#more').html(data).trigger('create');
    });    
});

I've run into situations where this didn't seem to work but I had success initializing each type of widget separately like so:

$("#showmore").live("click", function(event, param1){       
    var getUrl = $(this).attr('data-href');//don't unnecessarily create global vars
    $.post(getUrl, function(data){  
        $.mobile.hidePageLoadingMsg();

        $('#more').html(data).find('a[data-role="button"]').button().end()
                             .find('ul[data-role="listview"], ol[data-role="listview"]').listview().end()
                             ...
    });    
});

Here is a demonstration of dynamically adding HTML to the DOM and then having jQuery Mobile initialize the widgets in the HTML: http://jsfiddle.net/csKtX/

Also, make sure you are adding the data-role="button" (etc.) to the widgets so jQuery Mobile knows to initialize them (my code from above assumes you've done this).

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I even tired creating element like you are suggesing. This time none of the dynamic contents are showing up. Here is the page code into which i am trying to inject the content. ` <div data-role="page" class="type-interior" id="page-details"> <div data-role="content" id="more"> </div> </div> `
@user1339736 I added a demo to my answer: jsfiddle.net/csKtX. See if that helps you figure out your issue. Make sure you are adding the correct data-role attribute values to the widgets, my code expects those data-attributes to exist.
Thanks. I will try to figure out. I tried triggering the changed element and also the find. Interesting the find did not apply the css. But both approach only worked the first time. When I get back to this same page by page transition, the page contents is blank. Part of the dynamic content is a link to transition the page to the initial page. From the initial page I am going back to the new page. I will look further in the example code that you have provided and look at my code and see what I may be doing incorrectly.
In your jsfiddle example, everything happens on the same page. There is no page transition happening. In the list that I have I am changing to the second page with dynamic content and switch back to the initial page with the list. So the situation in the jsfiddle example is different from what I have.
@user1339736 The jQuery Mobile widget initialization/refresh does work pretty well, you've just got to massage your code into the proper format. Here's an updated JSFiddle to show that you can add dynamic content anytime: jsfiddle.net/csKtX/3 (any no, this does not use AJAX, but I can tell you that it's functionally the same so the fact I'm not using AJAX shouldn't play into your situation).
|
0

I had a similar experience wtih jQuery recently where dynamic content was not rendering in Firefox. I got my site working and I think the problem may be with this line: $('#more').html(data);

Try replacing it with an innerHTML method and see if that works.

Cheers

Improve this answer

2 Comments

jQuery uses .innerHTML internally when you use the .html() function if .innerHTML is supported in the browser.
This I know, but after I narrowed it down to to any/all usage of .html(), using .innerHTML fixed it. If I ever have some free time I might even try to figure out why.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.