单击jquery移动选项卡时加载ajax项
Load ajax item when click on jquery mobile tabs
我想在jquery mobile中单击选项卡项时通过ajax加载一些内容。我该怎么做?
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false" data-icon="search" data-iconpos="right">Discover</a></li>
<li><a href="#two" data-ajax="false" data-icon="home">My-chats</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<div data-role="fieldcontain">
<!--load data via ajax-->
</div>
</div>
<div id="two">
<!--load data via ajax-->
</div>
</div>
当点击discover
选项卡时,我想通过ajax将一些数据加载到该选项卡。如何做到这一点?
请帮帮我。
希望能帮助你!
(function(window, $) {
function TabCtrl() {
var self = this;
self.loadData = function(url) {
return $
.get(url)
;
};
$('[data-ajax]').click(function(event) {
event.preventDefault();
var tab = $(this).attr('href').replace('#', '');
self
.loadData(tab)
.then(
function(success) {},
function(error) {}
);
});
}
$(document).ready(TabCtrl);
})(window, window.jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#my-custom-tab" data-ajax>Load Me</a>
试试这个。如果您已经在使用jQuery,那么忽略第一行。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
// Make sure all DOM is loaded
$(document).ready(function(){
// Fired when you click the link
$('#discover-tab').click(function(e){
// Prevent the link from continuing it's normal action
e.preventDefault();
// Fetch the result of a URL
$.get( "ajax/test.html", function( data ) {
// Fill the DIV with ID of 'one' with that result
$( "#one" ).html( data );
});
});
});
</script>
将其绑定到一个javascript函数,该函数执行如下ajax调用:
<a href="javascript:ajaxcallfunction();">Discover</a>
javascript函数:
function ajaxcallfunction(){
window.location.href = window.location.href + "#one";
//Enter your ajax call here
}
相关文章:
- 如何更改jquerymobile中默认的加载ajax加载程序gif
- 无法在 IE6 和 IE7 上加载 ajax
- 页面刷新后重新加载 ajax 检索到的数据
- 清理在加载 Ajax 内容时添加的 CSS
- jquery选项卡加载Ajax内容
- Grails:多个加载ajax调用,但只有一个打印到控制台
- 如何检测通过JSON数据引用的图像何时加载AJAX
- 加载ajax数据时出现jVectorMap问题
- JQuery在加载ajax时阻止链接工作
- 如何在不重新加载ajax的情况下在datatable上.draw()或添加行
- 替换超链接默认操作以加载 AJAX 请求
- 高图表不使用加载 ajax 的数组进行渲染
- 带有 OnClick 的 jQuery 链接标记 href 需要单击两次才能加载 AJAX
- 悬停两次以加载 ajax
- 获取加载 ajax 的文档信息
- 使用 Jquery 在 AJAX 内部加载 AJAX
- 为什么当页面加载 AJAX 时我的 URL 之间没有空格
- 在当前页面中加载一个新的谷歌地图,加载AJAX
- 当滚动达到 80% 时加载 ajax
- 图像滑块未加载 Ajax 请求