jQuery $(문서)ready 및 Update Panels?
[ Query ]panel [ Update Panel ]를 선택합니다.은 에 있다.$(document).ready §:
$(function() {
$('div._Foo').bind("mouseover", function(e) {
// Do something exciting
});
});
물론 처음 페이지를 로드했을 때는 정상적으로 동작하지만 UpdatePanel이 부분적인 페이지 업데이트를 하면 실행되지 않고 마우스 오버 효과가 UpdatePanel 내에서 더 이상 작동하지 않습니다.
첫 페이지 로드 시뿐만 아니라 UpdatePanel이 부분 페이지 업데이트를 시작할 때마다 jQuery에 자료를 연결할 때 권장되는 접근 방식은 무엇입니까?ASP? AJAX 라이프 $(document).ready
UpdatePanel은 업데이트 시 업데이트 패널의 내용을 완전히 대체합니다.즉, 해당 업데이트 패널에 새 요소가 있기 때문에 구독한 이벤트가 구독되지 않습니다.
이 문제를 해결하기 위해 제가 한 일은 업데이트 후 필요한 이벤트를 다시 구독하는 것입니다. 용 i i i i를 쓴다.$(document).ready()초기 로드에 대해서는, Microsoft 의 것(페이지에 업데이트 패널이 있는 경우 사용 가능)을 사용해 모든 업데이트를 재서브스크라이브 합니다.
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});
PageRequestManager는 업데이트 패널이 페이지에 있는 경우 자동으로 사용할 수 있는 Javascript 객체입니다.UpdatePanel이 페이지에 있는 한 위의 코드 이외의 작업을 수행할 필요가 없습니다.
보다 자세한 제어가 필요한 경우 이 이벤트는 how와 유사한 인수를 전달합니다.는 NET 인수로 됩니다.(sender, eventArgs)이벤트 발생 원인을 확인하고 필요한 경우에만 다시 확인할 수 있습니다.
Microsoft 의 메뉴얼의 최신 버전을 다음에 나타냅니다.msdn.microsoft.com/ ... / bb383810 . aspx
필요에 따라 jQuery를 사용하는 것이 좋습니다.이러한 방법은 업데이트 시마다 DOM 요소에 재서브스크라이브 하는 것보다 효율적입니다.다만, 이 어프로치를 사용하기 전에, 모든 메뉴얼을 읽어 주세요.필요에 따라서는 대응할 수도 있고 그렇지 않을 수도 있기 때문입니다.jQuery 플러그인은 리팩터로 사용할 수 없는 경우가 많습니다..delegate() ★★★★★★★★★★★★★★★★★」.on()그런 경우에는 다시 하는 게 좋을 것 같아요.
<script type="text/javascript">
function BindEvents() {
$(document).ready(function() {
$(".tr-base").mouseover(function() {
$(this).toggleClass("trHover");
}).mouseout(function() {
$(this).removeClass("trHover");
});
}
</script>
갱신되는 영역.
<asp:UpdatePanel...
<ContentTemplate
<script type="text/javascript">
Sys.Application.add_load(BindEvents);
</script>
*// Staff*
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel 내의 jQuery를 사용한 사용자 제어
질문에 대한 직접적인 답변은 아니지만, 여기서 찾은 답을 읽고 이 해결책을 종합해 보았습니다.누군가 유용하다고 생각할지도 모른다고 생각했습니다.
사용자 컨트롤 내에서 jQuery 텍스트 영역 제한 장치를 사용하려고 했습니다.이는 사용자 컨트롤이 UpdatePanel 내에서 실행되고 콜백 시 바인딩이 손실되었기 때문에 까다로웠습니다.
만약 이것이 페이지였다면, 이 답변은 바로 적용되었을 것입니다.그러나 사용자 컨트롤은 헤드 태그에 직접 액세스할 수 없으며 일부 답변에서 가정한 것처럼 UpdatePanel에 직접 액세스할 수도 없습니다.
결국 이 스크립트 블록을 사용자 컨트롤 마크업 상단에 넣게 되었습니다.첫 번째 바인딩에는 $(문서)가 사용됩니다.prm.add_endRequest를 사용합니다.
<script type="text/javascript">
function BindControlEvents() {
//jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
//Your code would replace the following line:
$('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');
}
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
BindControlEvents();
});
</script>
그래서... 이게 효과가 있다는 걸 누군가 알고 싶어할 것 같아서요
jQuery 1.3으로 업그레이드하여 다음을 사용합니다.
$(function() {
$('div._Foo').live("mouseover", function(e) {
// Do something exciting
});
});
주의: 라이브는 대부분의 이벤트와 함께 작동하지만 모든 이벤트에서는 작동하지 않습니다.문서에는 완전한 목록이 있습니다.
다음과 같은 방법도 있습니다.
<asp:UpdatePanel runat="server" ID="myUpdatePanel">
<ContentTemplate>
<script type="text/javascript" language="javascript">
function pageLoad() {
$('div._Foo').bind("mouseover", function(e) {
// Do something exciting
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
pageLoad()는 ASP이기 때문입니다.클라이언트 측에서 페이지가 로드될 때마다 실행되는 NET Ajax 이벤트입니다.
제 대답이요?
function pageLoad() {
$(document).ready(function(){
기타.
마법처럼 작동했고, 많은 다른 해결책들이 비참하게 실패했어요.
다음 방법 중 하나를 사용합니다.
이벤트 바인딩을 함수에 캡슐화하여 페이지를 갱신할 때마다 실행합니다.이벤트가 같은 요소에 여러 번 바인딩되지 않도록 항상 특정 요소에 대한 이벤트 바인딩을 포함할 수 있습니다.
기본적으로 방법 1을 자동으로 수행하는 라이브쿼리 플러그인을 사용합니다.이벤트 바인딩에 대한 제어 정도에 따라 기본 설정이 달라질 수 있습니다.
pageLoad() 함수는 이 상황에서 사용하면 매우 위험합니다.이벤트가 여러 번 유선 연결될 수 있습니다.또한 .live()는 문서 요소에 부착되어 페이지 전체를 통과해야 하기 때문에 접근하지 않습니다(느리고 불안정합니다).
지금까지 본 최고의 솔루션은 업데이트 패널 외부의 래퍼에 jQuery .delegate() 함수를 사용하여 버블링을 사용하는 것입니다.그 이외의 경우 UpdatePanels에서 동작하도록 설계된 Microsoft의 Ajax 라이브러리를 사용하여 핸들러를 배선할 수 있습니다.
$(document).ready(function (){...}) 후 합니다.
<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once.
}
</script>
저도 비슷한 문제가 있었는데, 가장 효과적인 방법은 이벤트 버블링과 이벤트 위임에 의존하는 것이었습니다.이벤트 위임의 장점은 AJAX 업데이트 후 이벤트를 다시 바인딩할 필요가 없다는 것입니다.
내 코드로 수행하는 작업은 업데이트 패널의 상위 요소에 위임자를 설정하는 것입니다.이 부모 요소는 업데이트 시 교체되지 않으므로 이벤트바인딩은 영향을 받지 않습니다.
jQuery에는 이벤트 위임을 처리하기 위한 다수의 좋은 문서와 플러그인이 있으며, 이 기능은 1.3 릴리즈에 포함될 예정입니다.참조용으로 사용하는 문서/플러그인은 다음과 같습니다.
http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery
어떤 일이 일어나는지 이해하면 업데이트 후 이벤트를 재바인드하는 것보다 훨씬 더 신뢰할 수 있는 솔루션이라는 것을 알게 될 것입니다.또한 페이지가 언로드될 때 바인딩 해제할 수 있는 이벤트가 하나 있다는 이점도 있습니다.
WWIW, 저도 비슷한 문제가 있었습니다.이벤트 재접속은 올바른 조치였지만 요청 마지막에 수행해야 했습니다.예
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {...
beginRequest로 인해 늘 참조 JS 예외가 발생할 경우 유의해야 할 사항입니다.
건배.
pageLoad = function () {
$('#div').unbind();
//jquery here
}
pageLoad 기능은 초기 페이지 로드 및 모든 업데이트패널 비동기 포스트백에서 실행되므로 이 경우에 매우 적합합니다.업데이트 패널 포스트백에서 jquery를 작동시키기 위해 unbind 메서드를 추가해야 했습니다.
http://encosia.com/document-ready-and-pageload-are-not-the-same/
제 답변은 위의 모든 전문가 코멘트에 기초하고 있지만, 아래는 각 포스트백과 비동기 포스트백에서 JavaScript 코드가 실행되도록 하기 위해 누구나 사용할 수 있는 다음 코드입니다.
저 같은 경우에는 한 페이지 안에 사용자 컨트롤이 있습니다.아래 코드를 사용자 컨트롤에 붙여넣기만 하면 됩니다.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
UPDATEPANELFUNCTION();
}
}
function UPDATEPANELFUNCTION() {
jQuery(document).ready(function ($) {
/* Insert all your jQuery events and function calls */
});
}
UPDATEPANELFUNCTION();
</script>
Update Panel은 로드 후 항상 Jquery를 내장된 Script Manager 스크립트로 바꿉니다.pageRequestManager의 인스턴스 메서드를 사용하는 것이 좋습니다.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
function onEndRequest(sender, args) {
// your jquery code here
});
잘 될 거야...
아래 스크립트를 사용하여 스크립트의 본문을 적절히 변경합니다.
<script>
//Re-Create for on page postbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
//your codes here!
});
</script>
Brian McKay의 답변:
JavaScript를 UserControl의 HTML에 직접 넣는 대신 Script Manager를 통해 페이지에 삽입합니다.내 경우 UpdatePanel이 종료되고 반환된 후 표시되는 폼으로 스크롤해야 합니다.이것은 파일 뒤에 있는 코드에 들어갑니다.제 샘플에서는 메인 콘텐츠 페이지에 prm 변수를 이미 작성했습니다.
private void ShowForm(bool pShowForm) {
//other code here...
if (pShowForm) {
FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
}
}
private void FocusOnControl(string pScript, string pControlId) {
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}
/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
string script = @"
function FocusOnForm() {
var scrollToForm = $('#" + pControlId + @"').offset().top;
$('html, body').animate({
scrollTop: scrollToForm},
'slow'
);
/* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
prm.remove_endRequest(ScrollFocusToFormCaller);
}
prm.add_endRequest(ScrollFocusToFormCaller);
function ScrollFocusToFormCaller(sender, args) {
if (args.get_error() == undefined) {
FocusOnForm();
}
}";
return script;
}
Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
$(document).ready(function () {
//rebind any events here for controls under update panel
});
}
제 상황에 처한 다른 사용자를 위해 DevExpress ASPxCallbackPanel에서 jquery document ready 기능을 사용하려고 했지만, 지금까지 아무 것도 작동하지 않았습니다.이게 나한테 효과가 있었던 거야
<script>
function myDocReadyFunction(){ /* do stuff */ }
</script>
<dx:ASPxCallbackPanel ID="myCallbackPanel" ... >
<ClientSideEvents EndCallback="function(){ myDocReadyFunction();}">
</ClientSideEvents>
<PanelCollection ...>
</dx:ASPxCallbackPanel>
언급URL : https://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels
'programing' 카테고리의 다른 글
| int의 크기는 컴파일러나 프로세서에 따라 달라집니까? (0) | 2022.09.13 |
|---|---|
| Java에서 두 숫자를 곱하면 오버플로가 발생하는지 어떻게 확인할 수 있습니까? (0) | 2022.09.13 |
| Conda를 통해 Python OpenCV를 설치하려면 어떻게 해야 하나요? (0) | 2022.09.13 |
| Mac OS Lion 명령줄에서 MySQL 서버를 시작하는 방법 (0) | 2022.09.13 |
| jQuery 개체 검사에서 jQuery 버전 가져오기 (0) | 2022.09.07 |