Как получить данные AJAX в jQuery?

У меня есть partial view, на который я хочу перезагрузить определенный тег <div> в случае успешного ответа. Я использую .filter для получения определенного тега, но он не работает. Судя по другим статьям о переполнении стека и Google, это должно сработать, но не в моем случае.

Моя цель - извлечь из ответа AJAX конкретный тег div и перезагрузить представление.

AJAX:

$.ajax(
 { 
    url: '/MyUrl', 
    success: function(response) 
            { 
                updateOrderStatusContent(response);
            } 
});


this.updateOrderStatusContent = function (markup) {

     alert("markup " + markup); // This returns HTML.
     var $response = $(markup); // Creating jQuery object from HTML response.

     // Option-1 = Get text
     var getSpecificText = $response.filter('#delivery-status-update').text();
     alert(getSpecificText);     // This is empty.

     // Option-2 = Get HTML
     var getSpecificHtml = $response.filter('#delivery-status-update').html(); // to get HTML 
     alert(getSpecificHtml);     // This is empty.

     // Option-3 = Here I tried output the content of #delivery-status-update in new <div> which is also not working.
     $('#delivery-status-updated').html(jQuery(markup).find('#delivery-status-update').html()); 

};

вывод разметки:

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset='UTF-8' />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta name = "apple-mobile-web-app-capable" content = "yes" />
    <meta content='IE=Edge' http-equiv='X-UA-Compatible' />
    <script src = "/Scripts/S2/console.js"></script>

    <!--[if IE]>             <script src = "/Scripts/S2/html5.js"></script>

<script src = "/Scripts/S2/json2.js"></script>

 <![endif]-->
    <title></title>
    <link href = "/Content/S2/menu.css" rel = "stylesheet" />

    <link href = "/content/themes/stwo/jquery-ui.css" rel = "stylesheet" />

    <link rel = "shortcut icon" type = "image/x-png" href = "/Branding/Snapfinger/favicon.png" />
    <link rel = "apple-touch-icon" href = "/Branding/Snapfinger/touch-icon-iphone.png">
    <link rel = "apple-touch-icon" sizes = "76x76" href = "/Branding/Snapfinger/touch-icon-ipad.png">
    <link rel = "apple-touch-icon" sizes = "120x120" href = "/Branding/Snapfinger/touch-icon-iphone-retina.png">
    <link rel = "apple-touch-icon" sizes = "152x152" href = "/Branding/Snapfinger/touch-icon-ipad-retina.png">
    <link rel = "stylesheet" href = "/Branding/Snapfinger/Snapfinger.css" />
    <!--[if IE]><link rel = "stylesheet" href = "/Branding/Snapfinger/ie.css" /> <![endif]-->
</head>

<body>
    <header class = "header" id = "header"> <a href = "javascript:;" id = "skiplink" class = "skip">Skip to content</a>
        <div class = "header-wrapper">
            <div class = "logo" id = "logo" aria-label = "Zaxby&#39;s logo" itemscope itemtype = "https://schema.org/Organization" tabindex = "0"> <img itemprop = "logo" alt = "Zaxby&#39;s logo" src = "/api/content/image/119/7/200/200"></div>
            <input type = "hidden" id = "restaurantId" value = "9018" />
            <input type = "hidden" id = "menuType" />
            <input type = "hidden" id = "unitNumber" value = "198" />
            <input type = "hidden" id = "currentUtcTime" value = "2018-04-24T19:27:29.2451514Z" />
            <div class = "restaurant-info">
                <h1 class = "title" id = "title">Zaxby&#39;s</h1>
                <meta itemprop = "brand" content = "Zaxby&#39;s" />
                <meta itemprop = "menu" content = "https://local.kiofc.com/o/Restaurant/9018" /> <span itemprop = "geo" itemscope itemtype = "https://data-vocabulary.org/Geo"><meta itemprop = "latitude" content = "34.0756282" /><meta itemprop = "longitude" content = "-84.6527738" /> </span>
                <div class = "restaurant-name" itemprop = "name">Zaxby&#39;s</div>
                <div class = "store-name" itemprop = "name">ACWORTH_00198</div>
                <ul id = "restaurant-address" class = "address" itemprop = "address" itemscope itemtype = "https://schema.org/PostalAddress">
                    <li class = "street" itemprop = "streetAddress" tabindex = "0">3511 BAKER RD</li>
                    <li class = "city" itemprop = "addressLocality" tabindex = "0">ACWORTH</li>
                    <li class = "state" itemprop = "addressRegion" tabindex = "0">GA</li>
                    <li class = "zip" itemprop = "postalCode" tabindex = "0">30101</li>
                    <li class = "country" itemprop = "addressCountry" tabindex = "0">US</li>
                </ul><a title = "View location on google maps" class = "map" itemprop = "map" target = "_blank" href = "https://maps.google.com/maps?client=gme-snapfinger&amp;channel=SnapfingerMobileViewMap&amp;oi=map&amp;q=3511+BAKER+RD,+ACWORTH,+GA+30101"> View Map </a>
                <div class = "phone" itemprop = "telephone"> <a title = "Call 678-574-0400" href = "tel://678-574-0400">678-574-0400</a></div>
                <input type = "hidden" id = "LocationDescription" value = "ACWORTH - BAKER RD" />
            </div>
        </div>
    </header>
    <div class = "page" id = "delivery-status-bar">
        <div class = "content">
            <section class = "delivery-status" id = "delivery-status-bar-section">
                <div id = "delivery-status-update">
                    <h3 class = "summary-title">Delivery Status</h3>
                    <div id = "order-id">
                        <h3 class = "summary-title" tabindex = "0">Order Confirmation : 97140987</h3></div>
                    <ol class = "progress-tracker" data-progress-tracker-steps = "4">
                        <li class = "progress-tracker-done">Received</li>
                        <li class = "progress-tracker-done">Kitchen</li>
                        <li class = "progress-tracker-todo">In Transit</li>
                        <li class = "progress-tracker-todo">Delivered</li>
                    </ol>
                </div>
            </section>
        </div>
    </div>
    <footer class = "footer" id = "footer">
        <div id = "copyright-version">
            <div id = "copyright-info" tabindex = "0"> &copy; Copyright 2018 Tillster, Inc. All rights reserved.</div>
            <div id = "version-info" tabindex = "0"> v 1.0.0.21003</div>
        </div>
    </footer>
    <input id = "concept-key" name = "concept-key" type = "hidden" value = "Snapfinger" />
    <input id = "concept-id" name = "concept-id" type = "hidden" value = "-1" />
    <input id = "is-vanity-url" name = "is-vanity-url" type = "hidden" value = "False" />
    <input id = "is-on-premise" name = "is-on-premise" type = "hidden" value = "False" />
    <script src = "/Scripts/jquery-1.9.1.js"></script>

    <script src = "/Scripts/jquery-ui-1.11.1.js"></script>

    <script src = "/Scripts/S2/modernizr2.7.1.js"></script>

    <script src = "/Scripts/S2/jquery.lazyload.min.js"></script>

    <script src = "/Scripts/jquery/getscriptonce/jquery.getscriptonce.js"></script>

    <script src = "/Scripts/handlebars.js"></script>

    <script src = "/Scripts/S2/utility.js"></script>

    <script src = "/Scripts/S2/loginRegister.js"></script>

    <script src = "/Scripts/S2/analytics.js"></script>

    <script src = "/Scripts/S2/orderStatus.js"></script>

    <div id = "dialog">
        <p id = "dialog-message"></p><img id = "dialog-image" alt = "dialog message" src = "#" /></div>
    <noscript>
        <iframe src = "//www.googletagmanager.com/ns.html?id=GTM-PC8WMW" height = "0" width = "0" style = "display:none;visibility:hidden"></iframe>
    </noscript>
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                '//www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-M84GGD');
    </script>
    <script type = "text/javascript">
        s$.analytics.getOrderLevelData("pageLoad")
    </script>
</body>

</html>

Что мне здесь не хватает? Нужно ли мне создавать еще один partial view, чтобы достичь того, чего я хочу?

Зачем тебе this? Вы пробовали смотреть .нагрузка (особенно раздел Загрузка фрагментов страницы)?

— 24.04.2018 21:16

вы получаете сообщение об ошибке? что произойдет, когда вы запустите этот код? эта информация должна быть в вашем вопросе

— 24.04.2018 21:20

@derloopkat Я добавил это как комментарий в коде. Я не получаю никаких сообщений об ошибках. alert для всех опций остается пустым, хотя объект markup имеет данные HTML.

— 24.04.2018 21:23

не могли бы вы показать, какие выходы console.info(markup);?

— 24.04.2018 21:25

@Scaramouche Обновил мой вопрос с помощью console.info.

— 24.04.2018 21:30

Если под console.info вы имеете в виду все те теги, которые вы добавили в <head> и <header>, извините, но все они разбросаны по коду и не очень помогут. Я просил вас показать нам вывод console.info(markup);, если вы поместите его в качестве первой строки в функции this.updateOrderStatusContent, это зависит от того, действительно ли $response.filter('#delivery-status-update').text(); будет выводить что-либо.

— 24.04.2018 21:35

javascript jquery html

24.04.2018 21:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

104

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В основном вам нужно использовать .find() вместо .filter().

var markup = '<!DOCTYPE html><html lang = "en"><head> <title></title></head><body><header class = "header" id = "header"> </header><div class = "page" id = "delivery-status-bar"><div class = "content"><section class = "delivery-status" id = "delivery-status-bar-section"><div id = "delivery-status-update"><h3 class = "summary-title">Delivery Status</h3><div id = "order-id"><h3 class = "summary-title" tabindex = "0">Order Confirmation : 123</h3></div><ol class = "progress-tracker" data-progress-tracker-steps = "4"><li class = "progress-tracker-done">Received</li><li class = "progress-tracker-done">Kitchen</li><li class = "progress-tracker-done">In Transit</li><li class = "progress-tracker-todo">Delivered</li></ol></div></section></div></div><footer class = "footer" id = "footer"></footer></body></html>';

var $response = $(markup); // Creating jQuery object from HTML response.
var $delivery = $response.find('#delivery-status-update');
var getSpecificText = $delivery.text(); // to get text
var getSpecificHtml = $delivery.html(); // to get HTML 

console.info(getSpecificText);
console.info(getSpecificHtml);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Это работает. Поэтому мне приходится использовать .find вместо .fileter.

— 24.04.2018 21:56

да, пока ваша разметка начинается с "<", все будет в порядке, иначе сначала нужно проанализировать html, например $($.parseHTML(markup)).find('#delivery-status-update');

— 24.04.2018 21:58

24.04.2018 21:44