[英]How to load a link from external page in same div
Need help.. 需要帮忙..
I have an index.php
page. 我有一个
index.php
页面。 On that page, I have a link to page-2.php
. 在该页面上,我有一个指向
page-2.php
的链接。
On page-2.php
, 在
page-2.php
,
i also have a link to other page. 我也有指向其他页面的链接。 May I know how to load the link on
page-2.php
in a same div on index.php
page. 我可以知道如何在
index.php
页面的同一div中加载page-2.php
上的链接。
I'm using jQuery load method do to this. 我正在使用jQuery加载方法做到这一点。 I'm able to load
page-2.php
inside a div
on index.php
. 我可以在
index.php
的div
内加载page-2.php
。 Below are the codes that I made. 以下是我编写的代码。
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
the above code will direct me to a new page not on a same div 上面的代码会将我定向到不在同一div上的新页面
Ajax is asynchronous. Ajax是异步的。
$('#content').load(page);
The above starts loading page two 上面开始加载第二页
$('a#upd_staff').click(function(){ //link on page2.php
Then you try to bind your event handler to content from page 2 before it is has finished loading. 然后, 在完成加载之前 ,尝试将事件处理程序绑定到页面2上的内容。
So when you click on the link, there is no JS bound to it, so it acts as a normal link. 因此,当您单击链接时,没有绑定到任何JS,因此它充当普通链接。
Use deferred event handlers (so they listen on the document and check what element was clicked when the click happens). 使用延迟事件处理程序(这样,它们将侦听文档并检查单击发生时单击了哪个元素)。
$(document).ready(function() {
function ajaxLoad(event) {
event.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
}
$(document).on("click", "a#staff_info, a#upd_staff", ajaxLoad);
});
when you click on $('a#staff_info')
this -- I can see that you use e.preventDefault();
当您单击
$('a#staff_info')
这-我可以看到您使用了e.preventDefault();
for preventing the normal action of the anchor tag but when you click on $('a#upd_staff')
this you did not use e.preventDefault();
用于防止锚标记的正常动作,但是当您单击
$('a#upd_staff')
您没有使用e.preventDefault();
-- that's why this redirect to page2.php
. -这就是为什么此重定向到
page2.php
的原因。 Use e.preventDefault();
使用
e.preventDefault();
- this for next one click may be this will help you -下次点击该按钮可能会对您有所帮助
You can use get()
for add directly on your div: 您可以使用
get()
直接在div上添加:
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$.get(page, function(data, status){
//action on page loaded, data is your page result
$('#content').html(data)
});
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.