request a page content by the way of ajax.but the javascript code in that page is not executed
When I click the 'AjaxButton' to request the page 'ajax.jsp' by the way of ajax.the value of 'html' is the code of 'ajax.jsp', but when I append it to div '#ajaxHtml',the is lost, alert('window msg'); is not executed,click the 'methodOne' button is not execute too;
$(function(){
alert('jquery init method!');
});
the code above is not executed too!
why ? How can I solve this problem,or is another way to achieve the same?
main.jsp
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Ajax</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>
<script>
$(function(){
$('#ajax').click(function(){
ajaxTo();
});
});
function ajaxTo(){
$.ajax({
url: '${ctxPath}/cf/customFormTemplateAction!context.action',//ajax.jsp
type: 'POST',
data: {fileName:'ajax'},
success: function( html ) {
$('#ajaxHtml').append(html);
}
});
}
</script>
</head>
<body style="background-Color:red;">
<div id="zhaosheng" style="border:10px solid lightblue;">
<div id="page" data-role="page" style="border:2px solid blue;" data-theme='d' data-zhaosheng='zhaosheng'>
<div data-role="header" data-position="inline" data-position="fixed">
<h1>Chinese</h1>
</div>
<div data-role="content">
<a id="ajax" data-role="button" rel="external">AjaxButton</a>
<div id="ajaxHtml"></div>
</div>
<div data-role="footer" data-position="fixed">
<h1>DCL[zhaosheng.wolf@163.com]</h1>
</div>
</div>
</div>
</body>
</html>
ajax.jsp
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>China</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
<script type="text/javascript" s开发者_如何学JAVArc="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>
<script defer="defer">
function methodOne(){
alert('This is a test message!');
}
$(function(){
alert('jquery init method!');
});
alert('window msg');
</script>
</head>
<body >
CONTENT<br/>
<a href='javascript:methodOne();'>methodOne</a>
</body>
</html>
You can't insert a HTML page into a div
. Use an iframe
instead.
I had the same problem. The only way to solve it is like Aaron answered: use an iframe to receive the html page. But remembers this: the code from an iframe CAN'T act beyond the iframe. In other words, the script inside the iframe can't do anything to the page where the iframe is inserted, but script on the page can access everything in the iframe.
jquery mobile loads everything that You simply link to with AJAX requests.Just link to the page and it will do it properly. Just don't use rel=external
(unnecessarily). If you need to use POST - it works with forms too. If you want to do it yorself despite that - follow the metodology.
You shouldn't load the whole html content into a div - it's really messy. If you use ajax, you're interested only in the body of the loaded page. Even if you put in the whole html document - the jquery code you created there will not run, because the DOMready event does not fire - the site did not load as a document, it's you who put the whole thing inside an existing DOM. The code will not work.
To make it work - define the function in a <script>
block inside the body and call the function after loading the bit into the page.
To make jquery work with new content that you inject to DOM - see the related question at http://jquerymobiledictionary.dyndns.org/faq.html
精彩评论