Search jQuery

jQuery Forum

after load() styles are lost

in jQuery Mobile • 3 months ago

hi,

i am loading some content and placing it in a div. the content contains several different form elements, unfortunately jquery mobile doesn't update the styles. i have seen tons of articles and posts about that issues and none of them seem to help my case. what to do?

this is some of my html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="jquery.mobile-1.3.0/jquery.mobile-1.3.0.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.3.0/jquery.mobile-1.3.0.js"></script>
<script>
$(document).ready(function() {
$("a.link1").click(function() {
$("#here").load("fall2.html");
$("#here").trigger("create");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="panel" data-position="left" data-display="push" id="mypanel">
<div class="ui-bar ui-bar-a">Topic</div>
<div>
<ul data-role="listview">
<li><a class="link1" href="#fall_1">Fall 1</a></li>
</ul>
</div>
</div>
<div data-role="header" id="p_header">
<h1>Test</h1>
<a href="#mypanel" data-icon="bars" data-iconpos="notext">Navigation</a>
</div>
<div data-role="content" id="here" class="ui-grid-a">
<div class="ui-block-a">
text
</div>
<div class="ui-block-b">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">3</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">4</label>
</fieldset>
</div>
</div>
</div>
</body>
</html>

what's wrong?

thank you for the help

Replies(9)

watusiware

Re: after load() styles are lost

3 months ago

How would we know? You haven't shown us where you put the script, your overall page structure (including <head>), nor the content you are loading. We aren't mind-readers!

katzenjam..

Re: after load() styles are lost

3 months ago

sorry, well I updated the code, and if there is still something missing, please let me know

watusiware

Re: after load() styles are lost

3 months ago

Big yellow box, top of the page:

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Sorry to have to link to the 1.2 documentation, but the 1.3 documentation is almost completely unusable. On my older Firefox on Ubuntu, I can't even click on links.

Also, I've seen some comments that 1.3 may need jQuery 1.9.1, although I believe it is supposed to work with 1.8.2.

You still haven't shown what content you are trying to load.

katzenjam..

Re: after load() styles are lost

3 months ago

well, i changed it to

$(document).bind('pageinit', function() ...

but it didn't change, the styles are still "lost"

maybe this helps:

the files i am loading look mostly like this, the text section is always the same and the div on the right of the grid contains different form elements.

<div class="ui-block-a">
lots of text
</div>
<div class="ui-block-b">
some text
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">1</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">2</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">3</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">4</label>
</fieldset>
</div>

Godsbest

Re: after load() styles are lost

3 months ago

Do you see an error? You may see an initialization error in you look the console tab of web inspector (Chrome or Safari) or Firebu (Firefox)

If that is the case, try the following instead:

$("#here").parent().trigger("create");

katzenjam..

Re: after load() styles are lost

3 months ago

changed it as well, but unfortunately it doesn't help...

there are no errors showing in the console

there is something strange I observed while playing with it:

when i load a different file the styles are not updated and you can just see the standard representation of the checkboxes, radio buttons and so on,

but when i hit another link to load a different file, the styles are applied to the previous content and then the new content is loaded into the container and the styles are missing again...

so you can see for a very short moment the correct styles...

as if jqm is updating before loading and inserting the page

s4ty

Re: after load() styles are lost

3 months ago

try:

$(document).ready(function() {
$("a.link1").click(function() {
$("#here").load("fall2.html", function () {
$(this).trigger("create");
});
});
});

katzenjam..

Re: after load() styles are lost

3 months ago

it works! thank you so much s4ty

watusiware

Re: after load() styles are lost

3 months ago

You should not use $(document).ready().

While that may "work", it will only work correctly for a single page.

You really need to read the docs and understand how jQuery Mobile loads and manages pages in the DOM.

Top Reply

Response title

Attachments

jQuery Forum

after load() styles are lost

Replies(9)

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Re: after load() styles are lost

Statistics

Tags

Actions

Related Posts