изменения текста JQuery в h3 теге

Question

Я использую Ajax для вызова страницы, которая выглядит как:

<div class="ui-block-a"> 
    <div class="jqm-block-content invoicehomepage"> 
     <h3>Invoices</h3> 
     <p><a href="pages/" data-ajax="false" class="ui-link">Pages</a></p> 
     <p><a href="navigation/" data-ajax="false" class="ui-link">Navigation</a></p> 
     <p><a href="loader/" data-ajax="false" class="ui-link">Loader</a></p> 
     <p><a href="transitions/" data-ajax="false" class="ui-link">Transitions</a></p> 
    </div> 
</div> 

и мой Аякс вызов:

var pageContent = ''; 
     $.ajax({ 
       url: 'jsp/home/home.jsp', 
       type: 'POST', 
       dataType:'json', 
       success:function(data) { 

        $.each(data, function(i, v) { 
         $.ajax({ 
           url: 'tmpl/homePortlet/'+v.link+'.html', 
           dataType : "html", 
           success: function(html_data) { 
           //var result = $('</div>').append(html_data).find('h3').html(); 
            //$('h3').html(v.portletName); 
            pageContent += html_data; 
            //console.log(pageContent); 
           } 
         }); 
         console.log(pageContent+'sssss'); 
        }); 

       } 
     }); 

Я хочу, чтобы изменить текст в h3 тега значение, которое я получил от моего второго вызова ajax.

Спасибо за помощь.

Answer 1

Вы должны изменить HTML-элемент h3, найдя его в содержании, которое вы получили в чем-то Ajax вызовов, как это:

pageContent = $(html_data).find("h3:first").html(" YOUR-TEXT-YOU-WANNA-PUT ").parent(); 

Update:

Я думаю, вы должны использовать async: false во втором вызове ajax. Во-вторых, я не думаю, что вам нужно хранить/обновлять html в некоторой переменной, как вы использовали pageContent. Вы должны использовать JQuery .append() method:

$.ajax({ 
    url: 'jsp/home/home.jsp', 
    type: 'POST', 
    dataType:'json', 
    success:function(data) { 
     $.each(data, function(i, v) { 
      $.ajax({ 
       url: 'tmpl/homePortlet/'+v.link+'.html', 
       dataType : "html", 
       async: false, 
       success: function(html_data) { 

        var new_html_data = $(html_data).find("h3:first").html(v.portletName).parent(); 
        $('.ui-grid-a').append(pageContent); 
       } 
      }); 
     }); 
    } 
}); 

Answer 2

использование: $('h3').text(v.portletName);

Answer 3

кажется ваш запрос AJAX является асинхронным ..

Вы можете добавить async : false, вариант в Ajax запроса, поэтому, когда запрос на окончание, второй запрос начинается и на успех второго запроса AJAX вы можете изменить текст тега H3.

var pageContent = ''; 
$.ajax({ 
    url: 'jsp/home/home.jsp', 
    type: 'POST', 
    dataType:'json', 
    async:false,// add this line so the success callback execute after response receive. 
    success:function(data) { 
     $.each(data, function(i, v) { 
       $.ajax({ 
        url: 'tmpl/homePortlet/'+v.link+'.html', 
        dataType : "html", 
        async:false,// add this line so the success callback execute after response receive. 
        success: function(html_data) { 
         $('h3').html(v.portletName); 
         pageContent += html_data; 
        } 
       }); 
       console.log(pageContent+'sssss'); 
     }); 

    } 
);