запросить содержимое страницы с помощью ajax.but код javascript на этой странице не выполняется - PullRequest
0 голосов
/ 09 декабря 2010

Когда я нажимаю «AjaxButton», чтобы запросить страницу «ajax.jsp» через ajax. Значение «html» - это код «ajax.jsp», но когда я добавляю его в div »ajaxHtml ', теряется, оповещение («окно сообщения»);не выполняется, нажмите кнопку 'methodOne', тоже не выполняется;

 $(function(){
        alert('jquery init method!');
    }); 

приведенный выше код тоже не выполняется!

почему?Как я могу решить эту проблему, или есть другой способ добиться того же?

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" 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 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>

Ответы [ 3 ]

0 голосов
/ 09 декабря 2010

У меня была такая же проблема.Единственный способ решить это, как ответил Аарон: использовать iframe для получения html-страницы.Но помните следующее: код из iframe НЕ МОЖЕТ действовать за пределами iframe. Другими словами, скрипт внутри iframe не может ничего сделать со страницей, где находится iframeвставлен, но скрипт на странице может получить доступ ко всему в фрейме.

0 голосов
/ 14 декабря 2010

jquery mobile загружает все, на что Вы просто ссылаетесь с помощью запросов AJAX. Просто дайте ссылку на страницу, и она сделает это правильно. Только не используйте rel=external (без необходимости). Если вам нужно использовать POST - он работает и с формами. Если ты хочешь сделать это сам, несмотря на это - следуй методологии.

Вы не должны загружать весь HTML-контент в div - это действительно грязно. Если вы используете ajax, вас интересует только тело загруженной страницы. Даже если вы вставите весь HTML-документ - созданный там код jquery не будет работать, потому что событие DOMready не запускается - сайт не загружается как документ, это вы помещаете все это в существующий DOM. Код не будет работать.

Чтобы заставить это работать - определите функцию в блоке <script> внутри тела и вызовите функцию после загрузки бита на страницу.

Чтобы заставить jquery работать с новым контентом, который вы добавляете в DOM - смотрите соответствующий вопрос на http://jquerymobiledictionary.dyndns.org/faq.html

0 голосов
/ 09 декабря 2010

Вы не можете вставить HTML-страницу в div. Вместо этого используйте iframe.

...