Rectangle 27 92

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Yes! That did the trick! Thanks also for pointing out the documentation.

This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied.

@snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM.

@snipe - Try triggering the trigger."create" event on the parent element.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 92

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Yes! That did the trick! Thanks also for pointing out the documentation.

This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied.

@snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM.

@snipe - Try triggering the trigger."create" event on the parent element.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 33

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 33

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 5

When I tried the solutions above I got an error message in Firebug

I found a fix for this though, instead of calling .trigger("create") after the append of the new elements I called

$("ul").listview();

at the end of the ajax callback function.

This got everything working nicely for me. Hope it helps.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 5

When I tried the solutions above I got an error message in Firebug

I found a fix for this though, instead of calling .trigger("create") after the append of the new elements I called

$("ul").listview();

at the end of the ajax callback function.

This got everything working nicely for me. Hope it helps.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 4

$('.myelement').html( myHtmlStr ).enhanceWithin();

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 4

$('.myelement').html( myHtmlStr ).enhanceWithin();

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 1

But you can cheat, instead of letting jQM enhancing your first dynamic page you do it yourself: http://jsfiddle.net/Gajotres/smsnP/

$(document).ready(function() {
    $('<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>').appendTo("body");
});

you example is working but I have to fetch data from ajav then I have tgo built the page. If am using your function like these

I gave you an example in your other question. Also with or without ajax is not going to matter here, point is, you can't create and style jQuery Mobile page without at least one existing page. My example here is just a workaround.

cordova - jQuery mobile styles are not getting applied over dynamicall...

jquery cordova jquery-mobile mobile-application
Rectangle 27 1

Interesting problem. I like the navigation stays but the content changes. This might be something jQM could offer in the future. Here is my attempt using @GerjanOnline's method but the problem is jQM is repositioning the page every time so it kinda looks jerky. Here is a attempted solution but as you can see jQM still only uses what' sin the page tag. I'm just showing the elements behind the page by pushing them down:

jQuery Mobile styles are not getting applied in elements outside data-...

jquery jquery-mobile
Rectangle 27 0

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 0

When I tried the solutions above I got an error message in Firebug

I found a fix for this though, instead of calling .trigger("create") after the append of the new elements I called

$("ul").listview();

at the end of the ajax callback function.

This got everything working nicely for me. Hope it helps.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 0

$('.myelement').html( myHtmlStr ).enhanceWithin();

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 0

Jquery mobile only loads <head> tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part will be refreshed through ajax along with data transition effect. Hence either add all your css script in a file and add it into head tag or stop loading other pages through ajax using following option:

<a href="#" data-ajax=false>Without Ajax</a>

But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.

html - CSS styles are not applying to Jquery Mobile Pages - Stack Over...

html css jquery-mobile
Rectangle 27 0

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Yes! That did the trick! Thanks also for pointing out the documentation.

This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied.

@snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM.

@snipe - Try triggering the trigger."create" event on the parent element.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 0

Enhancing new markup The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page").trigger( "create" );

javascript - jquery mobile - appending html content and applying JQuer...

javascript jquery xml ajax jquery-mobile
Rectangle 27 0

Alright - well, I guess this was too long for anyone to take the time to read it. I figured out a solution, though I think the solution does not get at the heart of the problem. The solution was to add $.fn.event.stopPropagation directly after the repeating ajax was called.

Why this should help is a clue into the problem. The only thing I can think of that would produce this problem, and have my solution fix it is that somehow each time pageInit is called (the result was the same no matter where I bound it, i.e. I tried pageLoad, pageShow, etc.) the function was getting cloned and attached to the end of the ever growing function which stayed bound to pageInit.

Of course that makes no sense, and I've never had that happen elsewhere, so I am at a loss, but, for now, no matter, it is fixed with no obvious detrimental effects noticed as of yet.

jQuery Mobile Not Applying Styles Only On Even Numbered Paged Visits. ...

jquery jquery-mobile
Rectangle 27 0

Jquery mobile only loads <head> tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part will be refreshed through ajax along with data transition effect. Hence either add all your css script in a file and add it into head tag or stop loading other pages through ajax using following option:

<a href="#" data-ajax=false>Without Ajax</a>

But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.

html - CSS styles are not applying to Jquery Mobile Pages - Stack Over...

html css jquery-mobile
Rectangle 27 0

try this, it's working for me: -first, load data you need with ajax ($.ajax, $.post,..) -after data is received, load jquery mobile script this code work for me:

<head>
  <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
  <link rel="stylesheet" href="css/jqm-docs.css" />
  <script src="js/jquery.js"></script>
  <script>
  $(document).ready(function() {
     $.post(url,
         {param: var},
         function(data){
            if( data.success )
            {
               $("#total_marcatges").append(data.total);
               $("#marcatges").append(data.marcatges);
               $.getScript('js/jquery.mobile-1.2.0.js', function() {
                   $("#sortir span span.ui-btn-text").append("&nbsp;&nbsp;");
               });
            }else
            {
               alert("error");
            }
        },
        "json"
);

after that, the jquery mobile styles are apllied for me

cordova - jQuery mobile styles are not getting applied over dynamicall...

jquery cordova jquery-mobile mobile-application
Rectangle 27 0

The problem occurs in ICS. Just add this css code and everything works fine (I had the same problem today).

.ui-page {
    /* Supposed to reduce flickering, but screwed up Ice Cream Sandwich. */
    -webkit-backface-visibility: hidden;
}

jquery mobile - JQueryMobile - styles not applied in Webview (Android)...

android jquery-mobile android-webview