2015-03-20 24 views
5

Tôi đang cố thực hiện cuộc gọi Ajax đến máy chủ của mình sau khi nhấp chuột href. Khi tôi nhấp vào href, tôi đã thành công đi đến máy chủ của tôi và gọi một tuyến đường xác định. Tuyến đường của tôi phục vụ chính xác và gửi lại cho tôi dữ liệu. Dưới đây là kịch bản thực hiện điều đó.dựng lại tệp EJS sau khi yêu cầu ajax

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

Tại thời điểm này tôi cần phải hiển thị lại phần mà tôi muốn thay đổi. Dưới đây là một phần của HTML mà tôi muốn thay đổi.

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

Về cơ bản tôi thêm tệp biểu đồ spider.ejs bằng từ khóa bao gồm của ejs. Dưới đây là tệp 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> 

Về cơ bản đó là tập lệnh điền div bằng thư viện biểu đồ cao. Theo như tôi hiểu, có hai cách tiếp cận mà cả hai tôi đều không thể làm việc.

một cái gì đó như thế này:

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

hoặc một cái gì đó như thế này sử dụng EJS xây dựng:

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

tôi không có hy vọng cao cho câu hỏi này nhưng không có câu trả lời cho vấn đề này đặc biệt trong bất kỳ tài nguyên web nào.

+0

trong đó một phần được bạn gặp rắc rối? Tôi thấy bạn có một lỗi nhỏ, đó là event.preventDefault(), sự kiện không được xác định, bạn nên xác định nó trong trình xử lý hàm như fuction (event) {event.preventDefault() .... – Balder

+0

Tôi gặp sự cố trong việc thiếu tài liệu làm việc này với cấu trúc EJS mới. Đó là lý do tại sao cuối cùng tôi đã làm cho nó hoạt động bằng cách thay đổi html bên trong. – ralzaul

Trả lời

3

Nếu tôi hiểu rõ, tài nguyên /spiderSwitch chứa dữ liệu JSON mà bạn muốn sử dụng để điền mẫu EJS và tiêm HTML được tạo trong phần tử có tên lớp sau: panel-body text-center.

Theo số EJS documentation, bạn cần sử dụng phương thức .update(), như bạn đã nêu trong câu hỏi của mình. Tuy nhiên, tài liệu không rõ ràng về đối số đầu tiên đại diện cho cái gì.

Bằng cách duyệt qua EJS code, tôi nhận thấy rằng nó thực sự nên tham chiếu đến ID của phần tử. Mặc dù, bạn không có bất kỳ yếu tố nào có mã số .tab-pane active trong mã của bạn.

Nếu bạn muốn chọn một thành phần của classname của nó, bạn cần phải sử dụng document.querySelector như vậy:

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

Bằng cách này, như @balder nói, bạn có một lỗi tham chiếu trong mã của bạn, nếu bạn muốn sử dụng đối số event, bạn phải khai báo nó trong các đối số chức năng:

function (event) { 
    event.preventDefault(); 

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

câu trả lời này có vẻ là cách chính xác để làm điều đó với cấu trúc EJS() mới. Mặc dù vẫn có thể thay đổi html bên trong của trang mà tôi đã kết thúc. – ralzaul

Các vấn đề liên quan