У меня есть вторая страница, которая заполняется данными из вызова Ajax на домашней странице. В заголовке этой динамически сгенерированной страницы отсутствуют все стили JQuery, и я подозреваю, что они связаны. Это мой HTML для создаваемой страницы:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
Я также использовал некоторые стили CSS, которые, по моему мнению, нуждаются в упрощении, но я не думаю, что они вызывают проблемы. Это потому, что когда я комментирую этот код, в заголовке все еще отсутствует стиль:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
Затем я заполняю заголовок (и страницу), используя ответ от вызова Ajax с предыдущей страницы. Страница заполняется нажатием кнопки (#resultsList
) со ссылкой на эту страницу:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Наконец, вот изображение заголовка. Вы заметите, что у него нет стиля JQuery Mobile и отсутствует кнопка «Назад».
Всем спасибо!