I'm trying to change a part of a page, I know that this has been asked before but I cannot really find a good solution to my issue.
我正在尝试更改页面的一部分,我知道之前已经问过这个问题,但我无法找到解决问题的好方法。
The red colour is the part of the page I want to change dynamically depending on what you click on the left side that is a panel.
红色是我想要动态更改的页面的一部分,具体取决于您在面板左侧单击的内容。
Image: http://wstaw.org/m/2014/04/24/ask.png
HTML Code: http://pastebin.ubuntu.com/7322513/
HTML代码:http://pastebin.ubuntu.com/7322513/
<body id="framework">
<div data-role="page" class="page ui-responsive-panel">
<!-- header -->
<div data-role="header" data-theme="a">
<h1 id="titlepage">ICU</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#right-panel" data-icon="gear" data-iconpos="notext">Add</a>
</div>
<!-- /header -->
<!-- content that is replaced by ajax -->
<div id="content" data-role="content">
<h2>content</h2>
</div>
<!-- /content -->
<!-- Left menu panel -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="overlay" id="nav-panel" data-theme="b">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search" id="nav">
<li data-icon="delete" style="background-color:#111;" data-theme="b">
<!--Removed data-rel="close" since there is a bug in jquery mobile https://github.com/jquery/jquery-mobile/issues/1405 -->
<a href="#closemenu">Close menu</a>
</li>
<li data-filtertext="Inbox">
<a href="html/dummy.html">
<span class="ui-mail-icon-blue nav-ui-thumbnail"></span>
<span class="ui-li-count ui-btn-up-a ui-btn-corner-all" id="mail#">2</span>
<h1 class="ui-li-headline">Inbox</h1>
<p class="ui-li-desc" id="gotMail">Du har mail!</p>
</a>
</li>
<li data-filtertext="Startsida">
<a href="html/dummy2.html">
<span class="ui-start-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Startsida</h1>
</a>
</li>
<li data-filtertext="Översikt">
<a href="html/dummy2.html">
<span class="ui-overview-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Översikt</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<!--Nav list divider-->
<li data-role="list-divider" role="heading" class="ui-button ui-li-divider ui-bar-a ui-li-has-count">
Avdelningar
<span id="departments#" class="ui-li-count ui-btn-up-a ui-btn-corner-all">2</span>
</li>
<!--/Nav list divider-->
<!--Auto generated departments-->
<li data-filtertext="Testpage">
<a href="html/dummy.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 1</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<li data-filtertext="Testpage2">
<a href="html/dummy2.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 2</h1>
<p class="ui-li-desc">Antal elever (3)</p>
</a>
</li>
</ul>
</div>
Jquery Code:
function loadPage(page, title) {
$.ajax({
url: page,
async: false
}).done(function (data) {
$("#content").html(data);
$("#titlepage").html(title);
}).fail(function () {
alert("Gick inte att ladda");
});
}
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
我已经完成了自己的ajax加载页,但有一种方法可以使用jquery mobile内部,因为它感觉像是一个黑客。
Conclusion, is there a way to do this better? and how should i load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
结论,有没有办法更好地做到这一点?我应该如何为每个页面加载脚本,使用主页头一次加载所有这些脚本,或者在加载该内容时是否有加载脚本的方法。
Im using Jquery jquery-2.1.0 JqueryMobile jquery.mobile-1.4.2
我使用Jquery jquery-2.1.0 JqueryMobile jquery.mobile-1.4.2
Best Regards
1 个解决方案
#1
5
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
我已经完成了自己的ajax加载页,但有一种方法可以使用jquery mobile内部,因为它感觉像是一个黑客。
jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.
jQuery Mobile基于Ajax Navigation;它使用Ajax来检索页面,将它们加载到DOM中,然后在显示它们之前初始化它们。这就是说,当你使用Ajax加载外部数据时,你正在以正确的方式做到这一点。
You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().
您可以使用$ .ajax(),. load()或$ .get()。但是,请记住,您需要手动初始化检索到的数据 - 如果它包含jQM小部件 - 使用增强方法,例如.enhanceWithin()。
Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
我应该为每个页面加载脚本,使用主页头来一次加载所有这些脚本,还是有一种方法可以在加载内容时加载脚本。
As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.
当您使用单页模型时,它更安全(也许您应该)为每个页面加载所有JS库和样式表。尽管如此,jQM只会在第一页的初始化时加载这些链接一次,其余的页面将通过Ajax加载/检索。 jQM加载它在任何外部页面中找到的第一个data-role =页面,忽略其他任何东西。
Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.
为什么要加载所有JS和样式表?如果用户刷新当前页面,是为了让jQM再次运行。在这种情况下,当前刷新/重新加载的页面成为第一页。
Binding events and adding listeners:
When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.
使用jQM时,您需要远离.ready()和/或$(function(){})并使用Page Events。除了某些情况,例如使用外部工具栏,面板或弹出窗口。这些外部小部件需要在加载页面之前首次手动初始化。
$(function () {
$("#ExternalPanel").panel();
});
As for adding listeners, use pagecreate event.
至于添加监听器,请使用pagecreate事件。
$(document).on("pagecreate", "#pageID", function () {
$("foo").off("click").on("click", function () {
/* do something */
});
});
You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.
您需要删除.off()之前的绑定,然后.on()再次添加它们,因为外部页面只要显示就会通过pagecreate。因为jQM一旦隐藏就会从DOM中删除外部页面。
One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.
关于将元素附加到活动页面的最后一点。您需要特定于添加Ajax检索的元素的位置。
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
$("#foo", activePage).html(data).enhanceWithin();
}, "html");
演示(1) - 代码
(1) Click "inbox"
(1)点击“收件箱”
#1
5
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
我已经完成了自己的ajax加载页,但有一种方法可以使用jquery mobile内部,因为它感觉像是一个黑客。
jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.
jQuery Mobile基于Ajax Navigation;它使用Ajax来检索页面,将它们加载到DOM中,然后在显示它们之前初始化它们。这就是说,当你使用Ajax加载外部数据时,你正在以正确的方式做到这一点。
You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().
您可以使用$ .ajax(),. load()或$ .get()。但是,请记住,您需要手动初始化检索到的数据 - 如果它包含jQM小部件 - 使用增强方法,例如.enhanceWithin()。
Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
我应该为每个页面加载脚本,使用主页头来一次加载所有这些脚本,还是有一种方法可以在加载内容时加载脚本。
As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.
当您使用单页模型时,它更安全(也许您应该)为每个页面加载所有JS库和样式表。尽管如此,jQM只会在第一页的初始化时加载这些链接一次,其余的页面将通过Ajax加载/检索。 jQM加载它在任何外部页面中找到的第一个data-role =页面,忽略其他任何东西。
Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.
为什么要加载所有JS和样式表?如果用户刷新当前页面,是为了让jQM再次运行。在这种情况下,当前刷新/重新加载的页面成为第一页。
Binding events and adding listeners:
When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.
使用jQM时,您需要远离.ready()和/或$(function(){})并使用Page Events。除了某些情况,例如使用外部工具栏,面板或弹出窗口。这些外部小部件需要在加载页面之前首次手动初始化。
$(function () {
$("#ExternalPanel").panel();
});
As for adding listeners, use pagecreate event.
至于添加监听器,请使用pagecreate事件。
$(document).on("pagecreate", "#pageID", function () {
$("foo").off("click").on("click", function () {
/* do something */
});
});
You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.
您需要删除.off()之前的绑定,然后.on()再次添加它们,因为外部页面只要显示就会通过pagecreate。因为jQM一旦隐藏就会从DOM中删除外部页面。
One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.
关于将元素附加到活动页面的最后一点。您需要特定于添加Ajax检索的元素的位置。
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
$("#foo", activePage).html(data).enhanceWithin();
}, "html");
演示(1) - 代码
(1) Click "inbox"
(1)点击“收件箱”