我有一个
.aspx page
,左边有垂直Menus
,包含div
。和左边的clicking
我想在ExternalPage.aspx
右侧的div
中显示div
的内容。我的主页上有 loaded
ExternalPage.aspx
的内容,这很好用。但是,当我点击search button
的ExternalPage.aspx
时,它Redirects
我到ExternalPage.aspx
然后它显示结果。
标记:
<div id="divExternalPage">
</div>
JQuery:
function LoadPage() {
$.get('http://mywebsite/ExternalPage.aspx', function(data) {
$('#divExternalPage').html(data);
});
}
注意: 不想用iframe
How to Prevent this
Redirect
to ExternalPage.aspx
and show the results in the same div
where it has been loaded ie in divExnternalPage
?
我认为你应该尝试一些ajax调用:
$('#divExternalPage').on('click', 'input[type="submit"]', function(e){
e.preventDefault();
$.get('http://mywebsite/ExternalPage.aspx', function(data) {
console.log(data); // this would show you the returned data.
});
});
在浏览器的控制台中,您可以看到从 ajax 请求返回的响应。
由于您的内容是动态的,因此您必须将事件委托给最近的静态父级,在您的情况下是
#divExternalPage
,或者您可以直接将事件委托给$(document) or $(document.body)
.
更新!我正在更新 CodeProject.com 上的以下代码。请搜索“Loading ASPX pages into another page”。
我正在尝试做类似的事情:尝试将 ASPX 页面的内容加载到 HTML 页面中,并在提交内容时使用 ASPX 页面后面的代码。也许下面的代码可以帮助你。当心我只是 JQuery 的初学者!如果有人可以改进下面的代码......请做!
Demo.htm
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="Javascript/LiQuickBootstrapper.js"></script>
<div id="portalViewContent" class="portalViewContent">
</div>
<script type='text/javascript'>
$(document).ready(function () {
loadPage('/Widget/PostCodeCheck.aspx', 'portalViewContent', 'contentWidget');
})
</script>
LiQuickBootstrapper.js
function submit_handler(formObj, widgetUri) {
var submitObj = $(formObj).data('objClicked');
var submitObjID = submitObj.attr('id');
var formData = formObj.serialize()
+ '&'
+ encodeURI(submitObj.attr('id'))
+ '='
+ encodeURI(submitObj.attr('value'))
;
$(formObj).fadeOut('2000');
$(formObj).promise().done(function () {
$.post(widgetUri, formData)
.done(function (xData) {
var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
var newForm = newSubmitObj.parents('form');
formObj.html(newForm.html());
$(formObj).fadeIn('2000');
})
.fail(function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
});
});
return false;
}
function loadPage(widgetUri, containerIDLocal, containerIDRemote) {
var containerObjLocal = $('#' + containerIDLocal);
$(containerObjLocal).fadeOut('2000');
$(containerObjLocal).promise().done(function () {
$.post(widgetUri)
.done(function (xData) {
var externalHTML = $.parseHTML(xData);
var containerObjRemote = $(externalHTML).filter('#' + containerIDRemote);
containerObjLocal.html(containerObjRemote.html());
var forms = containerObjLocal.children('form');
$(forms).submit(function (event) {
event.preventDefault();
submit_handler($(event.currentTarget), widgetUri);
});
$(forms).click(function (event) {
$(this).data('objClicked', $(event.target));
});
$(forms).each(function () {
$(this).data('widgetUri', widgetUri);
});
__doPostBack = function (t, a) {
__myDoPostBack(t, a);
}
$(containerObjLocal).fadeIn('2000');
})
.fail(function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
});
});
}
function __myDoPostBack(eventTarget, eventArgument) {
var submitObj = $("#" + eventTarget);
var theForm = submitObj.parents('form:first');
var submitObjID = submitObj.attr('id');
var widgetUri = $(theForm[0]).data('widgetUri');
$(theForm[0]).find(':hidden#__EVENTTARGET')[0].value = eventTarget;
$(theForm[0]).find(':hidden#__EVENTARGUMENT')[0].value = eventArgument;
var formData = theForm.serialize();
$(theForm).fadeOut('2000');
$(theForm).promise().done(function () {
$.post(widgetUri, formData)
.done(function (xData) {
var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
var newForm = newSubmitObj.parents('form');
theForm.html(newForm.html());
$(theForm).fadeIn('2000');
})
.fail(function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
});
});
return false;
}
可以使用iframe标签轻松绑定.aspx页面。它易于使用。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>
<button class="accordion">Section 1</button>
<div class="panel">
<iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>