Comment faire pour charger le contenu d'autres html div sans perdre de style css?

J'ai essayé de charger d'autres contenus html de mon div, mais je trouve que je perds le style du contenu chargé.

J'ai essayé d'utiliser certains de code ci-dessous:

.load():

$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");

.get() & .append();

$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
    $("#paymentsExecutiveExSum").append(data);
});

- Je utiliser le même code:

<a data-role="button" class="fullWidth">Test</a>

Mon css de Inspecter l'Élément:

Chargé (à partir de html à l'aide de façon normale à la charge de l'html)

Comment faire pour charger le contenu d'autres html div sans perdre de style css?

Pas chargé (mon cas, fondamentalement, il ne charge pas la JQM bouton css)

Comment faire pour charger le contenu d'autres html div sans perdre de style css?

Mise à JOUR:

Voici mon code complet:

home.html

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/my.css"/>
<link rel="stylesheet" href="css/theme-addon.css"/>
<link rel="stylesheet" href="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.css"/>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
var animation = "none";
Number.prototype.formatMoney = function(c, d, t){
var n = this, 
c = isNaN(c = Math.abs(c)) ? 2 : c, 
d = d == undefined ? "." : d, 
t = t == undefined ? "," : t, 
s = n < 0 ? "-" : "", 
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="WL.Client.init({})" id="content" style='display: none' class="fullWidth">
<div data-role="page" id="homePage">
<div data-role="content">
<a href="#" data-role="button" id="login" class="fullWidth">Log In</a>
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
</div>
<script src="js/plugin/simplesplitview-1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
</body>

my.js

$('#login').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
jq.mobile.changePage("next.html", { transition: animation, changeHash: true });
});

Puis, quand il s'agit de summary.html:

<div data-role="header" data-position="fixed" data-tap-toggle="false">
<button class="back" data-theme="a">Back</button>
<div class="ui-title headerTitle">Summary</div>
</div>
<div data-role="content" id='splitviewcontainer' class='splitviewcontainer summary'>
<div class='leftside'>
<div id="executiveSummaryMenuGroupButton">
<a id="paymentsExecutiveSummaryButton" data-role="button" class="executiveSummaryTitleMenuButton">Payments</a>
<div class="horizontalDivider"></div>
</div>
</div>
<div class='rightside' id='paymentsExSum'></div>    
</div>
<script src="js/summary.js"></script>

summary.js

$(function(){
$('#executiveSummaryMenuGroupButton').hide();
$('#splitviewcontainer').simplesplitview();
});
$('#paymentsExecutiveSummaryButton').click(function(e){
$("#paymentsExSum").load("summary/ExecutiveSummary/paymentsExecutiveSummary.html").trigger('create'); //It seems it doesn't work
$('#splitviewcontainer').simplesplitview('showRight', 'paymentsExSum', true);
});

Quelle est la bonne façon de charger d'autres html du contenu de la div sans perdre de style css?

Assurez-vous que vos noms de classe ne sont pas profondément imbriqués
Pouvez-vous expliquer plus?
Si votre structure HTML est <div class="a"> <div class="b"> </div></div> par exemple, et si vous avez les styles comme .a .b { somestyle } .. Si vous vous déplacez div.b et injecter une dose d'où, évidemment, les styles ne sera pas appliqué de cas selon le courant de styles CSS sont appliquées uniquement aux b lors de l'imbriquée à l'intérieur d'un
salut Sushanth, merci pour l'explication, en fait le JQM css qui n'est pas chargé n'est pas la mienne.. Pls voir mon post édité.

InformationsquelleAutor Rendy | 2013-06-04

5

Explication:

Votre première nécessité pour les charger ensuite déclencher manuellement la page d'amélioration. Vous n'êtes pas perdre du style, vous n'avez pas en premier lieu. jQuery Mobile améliore le contenu des cours de l'initialisation d'une page, chaque ajoutées dynamiquement le contenu doit être amélioré manuellement, en savoir plus sur elle ici.
```
$(document).on('pagebeforeshow', '#index', function(){ 
$("#index").load("load.html", function() {
$(this).trigger("pagecreate");
});
});
```
Tous vous avez besoin est trigger("pagecreate"); qui permettra d'améliorer la page de balisage à la bonne jQuery Mobile look. Si vous êtes seulement en ajoutant le contenu de la DIV ensuite utiliser trigger('create'); mais cette fois sur le contenu de la DIV.

De travail exemple:

index.html
```
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
<script>
$(document).on('pagebeforeshow', '#index', function(){ 
$("#index").load("load.html", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>    
</body>
</html>    
```
load.html
```
<div data-theme="b" data-role="header">
<h1>Index page</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>  
</div>
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>  
</div>
```
- Ne fonctionne pas chez moi aussi 🙁 c'est vraiment très étrange. Je vais poster plus de code plus tard.
- Quand vous parlez de styles parlez-vous classique de jQuery Mobile de styles ou de vos propres styles personnalisés?
- Laissez-moi vérifier et revenir vers vous très bientôt
- salut Gajotres, pls voir mon post édité
- Vous pouvez également ajouter votre code HTML, ils me permet d'en créer vous un exemple? Mon exemple est le travail, je ne sais pas si vous avez essayé ou même regardé un lien que j'ai posté. Vous devez comprendre qu'il ne suffit pas de charge HTML, si vous avez des jQuery Mobile contenu dont il a besoin d'être amélioré avec les méthodes que j'ai mentionné dans ma réponse. Dans le cas où vous êtes le chargement de contenu (non liée à jQUery Mobile) css doit être initialisé avant de vous charger votre contenu.
- Désolé j'ai oublié de poster mon code. Je vais poster autour de 3 heures à partir de maintenant. Btw, j'ai testé votre code par le déclenchement de la pagecreate encore une fois, cependant, je suis en utilisant un autre plugin à l'aide de la lampe et d'autant que j'ai testé, le pagecreate, pageshow, et ses amis ne s'est jamais appelé.
- Je vais être ici, à côté de quelques heures, je vais donc vous donner une réponse dès que vous validez votre code. Aussi, si ce n'est pas un problème, vous pouvez envoyez-moi votre projet et je vais le corriger pour vous.
- Salut Gajotres, désolé, je n'ai pas la moindre chance de le mettre à jour hier. Pls voir mon édité question 🙂
InformationsquelleAutor Gajotres
-1

Vous pouvez utiliser les deux,mais
```
$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");
```
remplace tous les précédents html avec le nouveau et
```
$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
    $("#paymentsExecutiveExSum").append(data);
});
```
va ajouter de nouvelles données à la précédente html,mais pas à enlever l'ancien..Vous pouvez également utiliser .html comme
```
$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
$("#paymentsExecutiveExSum").html(data);
});
```
Qui viendront remplacer les anciennes données par les nouvelles données
- Tous d'entre eux perdent encore du style 🙁
- pour le html nouvellement créé il y a peut être des parents sont différents,de Sorte que doivent tenir compte des nouvelles classes, des parents et aussi vous avez besoin d'inclure un fichier css à l'paymentsExecutiveSummary.html aussi
- Seulement me demande, est-ce une bonne pratique à mettre les css à html et non pas dans le top html(home.html par exemple) ?
- Regardez, il est en cours de chargement le code html des données à partir d'une autre page de sorte qu'il a besoin d'inclure le css à la page aussi....pendant le chargement lui-même le css dans la page principale doent appliquer le css
InformationsquelleAutor Gautam3164

Vous devez vous connecter pour publier un commentaire.

Explication:

De travail exemple:

index.html

load.html