Попытка загрузить исходный код HTML с помощью JQuery

0

Я пытаюсь загрузить некоторый исходный код HTML, который есть в текстовом файле в jquery. Когда я нажимаю ссылку, чтобы добавить текст, на страницу ничего не загружается. Какие-либо предложения?

Загрузить сценарий:

<div data-role="collapsible" data-collapsed="true">
    <h3>Accordion Concept</h3>
    <p>The accordion concept splits the page into catagories to save space. Each catagory contains information but this information is collapsed in order to make it so you only see the information you want to see on the page.</p>
    <div id = "loadEx">Click Here to Load Example Script File</div>
    <script>
        $( "#loadEx" ).click(function() {
            $('#hello').load('mywebpage.txt');
        });
    </script>
    <pre id = "hello"></pre>
</div>


Текстовый файл:

<body class="container">
    <div data-role="page">
        <div data-role="header">
            <h1> Page  One Title </h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible-set" >
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number one </h3>
                    <p> information for header number one is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number two </h3>
                    <p> information for header number two is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number three </h3>
                    <p> information for header number three is here. </p>
                </div>
            </div>
            <div data-role="footer">
                Copyright
            </div>   
        </div>

</body>
  • 0
    Что говорит консоль ошибок JavaScript? Что произойдет, если вы добавите в console.log операторы console.log ? функция работает вообще? Что происходит на вкладке Net инструментов разработчика браузера? Сделан ли HTTP-запрос? Является ли ответ, что вы ожидаете?
  • 0
    Нет ошибки. Это работает, если я напишу что-то вроде «привет». Просто с HTML это в значительной степени добавляет пустой div.
Показать ещё 8 комментариев
Теги:

2 ответа

2
Лучший ответ

Реальный вопрос возник через комментарии:

что бы я изменил в CSS, который сделает его таким, чтобы он отображался как текст, а не HTML?

Вы бы не использовали CSS для этого. Вам не нужно использовать метод load (который предназначен для обработки HTML, а не текста).

Используйте менее короткую функцию Ajax и вручную помещайте данные в элемент как текст.

        $( "#loadEx" ).click(function() {
            $.get('mywebpage.txt', function (data) {
                $('#hello').text(data);
            });
        });
Поделиться
  • 0
    Большое спасибо, это сработало отлично!
0

сначала загрузите dom, затем используйте функцию $.get.

$(document).ready(function(){
   $( "#loadEx" ).click(function() {

  $('#hello').html("hey there, I am calling get request");
  $.get('mywebpage.txt',function(data,status){
    if(status == "error"){
        alert("File not found "+status);
    }

    $('#hello').html(data);

  });

 });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню