ponowne renderowanie pliku EJS po żądaniu ajaxowym

Próbuję wykonać wywołanie Ajax na moim serwerze po kliknięciu przycisku Href. Po kliknięciu mojego hreftu z powodzeniem przechodzę na mój serwer i wołam zdefiniowaną trasę. Moja trasa obsługuje mnie poprawnie i odsyła dane. Poniżej znajduje się skrypt, który to robi.ponowne renderowanie pliku EJS po żądaniu ajaxowym

$('.graph-switch').click(function(){ 

event.preventDefault(); 

    $.getScript("js/ejs_production.js", function() 
     $.ajax({ 
      url:'/spiderSwitch', 
      type: 'GET', 
      data: { type: $(this).attr('href') }, 
      success: function(result){ 
       console.log(result); // correctly displayed 
       // WHAT TO DO AT THIS POINT?? 
      }, 
      error: function(){ 
       alert("well this is not working"); 
      } 
     }); 
    }); 
});

W tym miejscu muszę ponownie renderować część, którą chcę zmienić. Poniżej znajduje się część kodu HTML, którą chcę zmienić.

<div class="panel-body text-center"><% include partials/spider-chart.ejs %> </div>

Zasadniczo dodaję plik spider-chart.ejs za pomocą słowa kluczowego ejs's include. Poniżej znajduje się plik spider-chart.ejs.

<!-- views/partials/spider-chart.ejs --> 

<!--NOTE: host pages must include the following in <head>--> 
<!--<script src='http://code.jquery.com/jquery-1.6.1.js'></script>--> 
<!--<script src="scripts/SpiderChartControl.js"></script>--> 

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="chart" style="min-width: 300px; max-width: 1000px; height: 300px; margin: 0 auto"></div> 

<script> 

    var spiderGraphData = <%- JSON.stringify(spiderGraphData) %> 
    var options = { 
     metric: 'accuracy' 
    } 

    console.log(JSON.stringify(spiderGraphData)); 
    SpiderChartControl.draw("chart", spiderGraphData, options); 
</script>

Zasadniczo jest to skrypt, który zapełnia element div za pomocą biblioteki wysokiej listy. Z tego co rozumiem, są dwa podejścia, którym nie udało mi się wykonać pracy.

coś takiego:

$("#id").innerHtml = "<div class='panel-body text-center'> <% include partials/spider-graph.ejs %> </div>";

lub coś takiego korzystających EJS konstruuje:

new EJS({url : 'partials/spider-chart.ejs' }).update('.tab-pane active', result);

Nie mam duże nadzieje na to pytanie, ale nie ma odpowiedzi do tego konkretnego problemu w dowolny dowolny zasób sieciowy.

Źródło

2015-03-20 ralzaul

W której części masz problemy? Widzę, że masz mały błąd, który jest zdarzeniem event.preventDefault(), zdarzenie nie jest zdefiniowane, powinieneś zdefiniować to w procedurze obsługi funkcji, jak fuction (event) {event.preventDefault() .... – Balder

Miałem problemy w brak dokumentacji na ten temat z nowym konstruktem EJS. Dlatego w końcu udało mi się z nim pracować, zmieniając wewnętrzny HTML. – ralzaul

Jeśli dobrze rozumiem, zasób /spiderSwitch zawiera dane JSON, które mają zostać użyte do wypełnienia szablonu EJS, i wstawienie wygenerowanego kodu HTML do elementu o następujących nazwach klas: panel-body text-center.

Zgodnie z EJS documentation, należy użyć metody .update(), jak podano w pytaniu. Jednak w dokumentacji nie jest jasne, co przedstawia pierwszy argument.

Podczas przeglądania EJS code stwierdziłem, że powinien on odnosić się do identyfikatora elementu. Jednak w kodzie nie ma żadnego elementu z identyfikatorem .tab-pane active ID.

Jeśli chcesz wybrać element jego nazwy klasy, trzeba użyć document.querySelector jako takie:

new EJS({ 
    url: 'partials/spider-chart.ejs' 
}).update(
    document.querySelector('.panel-body.text-center'), 
    result 
);

Nawiasem mówiąc, jak @balder powiedział, masz błąd odniesienia w kodzie, jeśli ciebie chcesz użyć argumentu event, musisz zadeklarować go w argumentach funkcji:

Źródło

2015-04-21 13:40:33 matteodelabre

ta odpowiedź wydaje się być poprawną metodą wykonania nowej konstrukcji EJS(). Chociaż nadal można zmienić wewnętrzny html strony, z którą skończyłem. – ralzaul

ponowne renderowanie pliku EJS po żądaniu ajaxowym

Odpowiedz

Powiązane problemy