Bir ajax isteğinden sonra EJS dosyasını yeniden oluşturma

Bir href tıklama ile sunucuma bir Ajax çağrısı yapmaya çalışıyorum. Benim href tıklandığında sunucuma başarılı bir şekilde gidip tanımlanmış bir rotayı arıyorum. Rotam bana doğru hizmet ediyor ve verileri geri gönderiyor. Aşağıda, bunu yapan betik var. Ben değiştirmek istiyorum kısmını yeniden oluşturmak için ihtiyaç Bu noktadaBir ajax isteğinden sonra EJS dosyasını yeniden oluşturma

$('.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"); 
      } 
     }); 
    }); 
});

. Aşağıda, değiştirmek istediğim HTML'nin bir parçası var.

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

Temelde anahtar kelime dahil Ejs kullanarak bir örümcek chart.ejs dosyası ekleyin. Aşağıda örümcek-chart.ejs dosyasıdır.

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

Temel olarak, yüksek grafik kütüphanesi kullanarak bir div doldurmayı başaran bir betiktir. Anladığım kadarıyla, hem çalışmayı başaramadığım iki yaklaşım var. Böyle

şey: Bu kullanarak Ejs gibi

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

falan oluşturur: Bu soru için büyük umutlar yok ama cevap bu özel sorunun var

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

herhangi bir web kaynağı.

kaynak

2015-03-20 ralzaul

hayatınızda sorunlar yaşıyorsunuz? Görüyorsunuz ki, küçük bir hata var, bu da event.preventDefault(), olayı tanımlanmamış olarak tanımlamanız gereken işlev işleyicide fuction (event) {event.preventDefault() .... – Balder

Yeni EJS yapısı ile bunu yapmanın belgelenmemesi. Bu yüzden nihayet iç html değiştirerek çalıştım. – ralzaul

Eğer iyi anlarsam, /spiderSwitch kaynağı, EJS şablonunu doldurmak için kullanmak istediğiniz JSON verilerini içerir ve oluşturulan HTML'yi aşağıdaki sınıf adlarına sahip öğeye enjekte eder: panel-body text-center.

EJS documentation'a göre, sorunuzda belirtildiği gibi .update() yöntemini kullanmanız gerekir. Bununla birlikte, ilk argümanın neyi temsil ettiği konusunda belgeler açık değildir.

EJS code numaralı belgeye göz atarak, aslında bir öğenin kimliğine başvurduğunu buldum. Yine de, kodunuzda .tab-pane active ID ile hiçbir öğeniz yok. @balder söylediği gibi, size eğer, kodunuzda bir referans hatası vardır,

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

arada: onun sınıfadı tarafından elemanı seçmek isterseniz

, aşağıdakiler gibi document.querySelector kullanmak gerekir event argüman kullanmak istiyorum, işlevin argümanları bunu beyan etmelidir:

function (event) { 
    event.preventDefault(); 

    $.getScript(/* ... */); 
}

kaynak

2015-04-21 13:40:33 matteodelabre

Bu cevap, yeni EJS() yapısıyla yapmanın doğru yolu gibi görünüyor. Yaptığım sayfanın iç htmlini değiştirmek hala mümkün olsa da. – ralzaul

Bir ajax isteğinden sonra EJS dosyasını yeniden oluşturma

cevap

İlgili konular